Tainted canvases may not be exported

Hi!


I try to load a TWebDataset and after editing to save a picture, but upon saving I get this error "Tainted canvases may not be exported".

To load I use this code:

procedure TfrmEditor.wdsPobudaAfterOpen(DataSet: TDataSet);
begin
  imgSlika.Url := connServer.URL + '/pobuda('+wdsPobuda.FieldByName('Id').AsString+')/Slika';
end;


To save I use this code:

procedure TfrmEditor.wdsPobudaAfterApplyUpdates(Sender: TDataSet;
  Info: TResolveResults);
begin
  UpdatePicture;
end;



procedure TfrmEditor.UpdatePicture;
var
  xhr: TJSXmlHttpRequest;
  P: integer;
  b64: string;


  function Base64ToArrayBuffer(str: string): TJSArrayBuffer;
  var
    BufView: TJSUInt8Array;
    BinaryString: string;
    I: Integer;
  begin
    BinaryString := window.atob(str);
    Result := TJSArrayBuffer.New(Length(BinaryString));
    BufView := TJSUInt8Array.New(Result);
    for I := 0 to Length(BinaryString) - 1 do
      BufView := TJSString(BinaryString).CharCodeAt(I);
  end;


begin
  xhr := TJSXMLHttpRequest.new;
  xhr.open('PUT', connServer.URL+'/'+string('pobuda('+wdsPobuda.FieldByName('Id').AsString+')/Slika'));
  b64 :=  imgSlika.Base64Image;
  P := Pos(',', b64);
  xhr.send(Base64ToArrayBuffer(Copy(b64, P+1, Length(b64))));
end;


I really don't need to save the picture (it is not changed) but if I don't save it explicitly, it is deleted after ApplyUpdate. TWebDataset does not work as TAureliusDataset (which updates just the changed fields), so I need to call UpdatePicture.

So the question is - how do I display a picture in a "detail" window (where te user changes some data, but not the picture)and the save it back to the server?

Hope I have been clear, because sometime the errors are difficult to explain :)

I found this, but don't know how to implement it:


https://thisinterestsme.com/tainted-canvases/

could be connected?

Additional info:


XData setver has this line to enable CORS


DbModule.AddMiddleware(TCorsMiddleware.Create);

Here's also the call stack



Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at getBase64Image (http://localhost:8000/Editor/Editor.js:17184:28)
    at Object.GetBase64Image (http://localhost:8000/Editor/Editor.js:17187:9)
    at Object.GetBase64Img (http://localhost:8000/Editor/Editor.js:20774:39)
    at Object.btnSaveClick (http://localhost:8000/Editor/Editor.js:57735:40)
    at Object.cb [as FOnClick] (http://localhost:8000/Editor/Editor.js:222:26)
    at Object.Click (http://localhost:8000/Editor/Editor.js:14030:58)
    at Object.HandleDoClick (http://localhost:8000/Editor/Editor.js:13671:12)
    at HTMLButtonElement.cb (http://localhost:8000/Editor/Editor.js:222:26)

You can try to use the solution suggested in the link you posted, to see if it works:




procedure TfrmEditor.wdsPobudaAfterOpen(DataSet: TDataSet);
begin
  imgSlika.ElementHandle.SetAttribute('crossOrigin', 'anonymous');
  imgSlika.Url := connServer.URL + '/pobuda('+wdsPobuda.FieldByName('Id').AsString+')/Slika';
end;

Wagner R. Landgraf2019-11-21 13:57:10

It's working! Thank you!