Putting a picture to TMSFNCPDFLib

WEB TMS WEB Core
1
Hello,
I Need some help.
If I put a Picture to a TTMSFNCBitmapContainer it can be used to Display in a PDF by
doing

pdf.graphics.drawimage(container1.items[0].bitmap, PointF(400,200));
this works fine,

But now I want to Change the Picture at runtime. I'm retrieving the Picture from a database via xdata.

In the form it works by using a webimagecontrol an the url:

webimagecontrol1.url:='https://xxxxxxxxx.com/cadiaserver/xdata/AuftragUnterschriften(''O19.00001'')/UnterschriftMonteur

But how can I get the Picture to the pdf?

Thank you for your help.
Stefan


2

Hi,


You can add an image from an URL via 

  TMSFNCBitmapContainer1.AddFromURL('http://localhost:8888/Project42/1.jpg', 'MyImage');

And then afterwards use the following code to paint the image

  TMSFNCPDFLib1.BeginDocument('test.pdf');
  TMSFNCPDFLib1.BitmapContainer := TMSFNCBitmapContainer1;
  TMSFNCPDFLib1.NewPage;
  TMSFNCPDFLib1.Graphics.DrawImageWithName('MyImage', PointF(100, 100));
  TMSFNCPDFLib1.EndDocument(True);

3
Hello Pieter,
thank you for your very quick Reply. Your sample works fine.

But I have the Image stored in a database and I want to retrieve via xdata.
First is a BLOB and you can see it using
https://salelite.com/cadiaserver/xdata/AuftragUnterschriften('O19.00001')/UnterschriftMonteur
Second is a Textfield holding the base64image
https://salelite.com/cadiaserver/xdata/AuftragUnterschriften('O19.00001')/UnterschriftMonteurText
Both show fine putting the url to any browser, you can try it, it's my testing-environment.
If I add them to the container using
TMSFNCBitmapContainer1.AddFromURL('https://salelite.com/cadiaserver/xdata/AuftragUnterschriften(''O19.00001'')/UnterschriftMonteur','layer3');
or
TMSFNCBitmapContainer1.AddFromURL('https://salelite.com/cadiaserver/xdata/AuftragUnterschriften(''O19.00001'')/UnterschriftMonteurText','layer3');
No error is raised
If I then try to add it to the pdf
pdf.graphics.drawimagewithname('layer3', PointF(100,200));
I get the following error
ERROR
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. | stack::Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at getBase64Image (http://localhost:8000/PDFExportSample/PDFExportSample.js:48995:32) at GetBase64Image (http://localhost:8000/PDFExportSample/PDFExportSample.js:48998:13) at Object.NotifyBitmap (http://localhost:8000/PDFExportSample/PDFExportSample.js:49005:15) at Object.cb (http://localhost:8000/PDFExportSample/PDFExportSample.js:222:26) at Object.NotifyBitmap (http://localhost:8000/PDFExportSample/PDFExportSample.js:41484:46) at Object.DrawImage$1 (http://localhost:8000/PDFExportSample/PDFExportSample.js:44153:22) at Object.DrawImageWithName$1 (http://localhost:8000/PDFExportSample/PDFExportSample.js:44143:95) at Object.DrawImageWithName (http://localhost:8000/PDFExportSample/PDFExportSample.js:44125:27) at Object.DrawImageWithName (http://localhost:8000/PDFExportSample/PDFExportSample.js:564:38) at Object.WebButton1Click (http://localhost:8000/PDFExportSample/PDFExportSample.js:53427:38) Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at getBase64Image (http://localhost:8000/PDFExportSample/PDFExportSample.js:48995:32) at GetBase64Image (http://localhost:8000/PDFExportSample/PDFExportSample.js:48998:13) at Object.NotifyBitmap (http://localhost:8000/PDFExportSample/PDFExportSample.js:49005:15) at Object.cb (http://localhost:8000/PDFExportSample/PDFExportSample.js:222:26) at Object.NotifyBitmap (http://localhost:8000/PDFExportSample/PDFExportSample.js:41484:46) at Object.DrawImage$1 (http://localhost:8000/PDFExportSample/PDFExportSample.js:44153:22) at Object.DrawImageWithName$1 (http://localhost:8000/PDFExportSample/PDFExportSample.js:44143:95) at Object.DrawImageWithName (http://localhost:8000/PDFExportSample/PDFExportSample.js:44125:27) at Object.DrawImageWithName (http://localhost:8000/PDFExportSample/PDFExportSample.js:564:38) at Object.WebButton1Click (http://localhost:8000/PDFExportSample/PDFExportSample.js:53427:38)
at http://localhost:8000/PDFExportSample/PDFExportSample.js [48995:32]
or
ERROR
Uncaught InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. | stack::Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. at Object.NotifyBitmap (http://localhost:8000/PDFExportSample/PDFExportSample.js:49006:38) at Object.cb (http://localhost:8000/PDFExportSample/PDFExportSample.js:222:26) at Object.NotifyBitmap (http://localhost:8000/PDFExportSample/PDFExportSample.js:41484:46) at Object.DrawImage$1 (http://localhost:8000/PDFExportSample/PDFExportSample.js:44153:22) at Object.DrawImageWithName$1 (http://localhost:8000/PDFExportSample/PDFExportSample.js:44143:95) at Object.DrawImageWithName (http://localhost:8000/PDFExportSample/PDFExportSample.js:44125:27) at Object.DrawImageWithName (http://localhost:8000/PDFExportSample/PDFExportSample.js:564:38) at Object.WebButton1Click (http://localhost:8000/PDFExportSample/PDFExportSample.js:53427:38) at Object.cb [as FOnClick] (http://localhost:8000/PDFExportSample/PDFExportSample.js:222:26) at Object.Click (http://localhost:8000/PDFExportSample/PDFExportSample.js:13978:58) Error: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded. at Object.NotifyBitmap (http://localhost:8000/PDFExportSample/PDFExportSample.js:49006:38) at Object.cb (http://localhost:8000/PDFExportSample/PDFExportSample.js:222:26) at Object.NotifyBitmap (http://localhost:8000/PDFExportSample/PDFExportSample.js:41484:46) at Object.DrawImage$1 (http://localhost:8000/PDFExportSample/PDFExportSample.js:44153:22) at Object.DrawImageWithName$1 (http://localhost:8000/PDFExportSample/PDFExportSample.js:44143:95) at Object.DrawImageWithName (http://localhost:8000/PDFExportSample/PDFExportSample.js:44125:27) at Object.DrawImageWithName (http://localhost:8000/PDFExportSample/PDFExportSample.js:564:38) at Object.WebButton1Click (http://localhost:8000/PDFExportSample/PDFExportSample.js:53427:38) at Object.cb [as FOnClick] (http://localhost:8000/PDFExportSample/PDFExportSample.js:222:26) at Object.Click (http://localhost:8000/PDFExportSample/PDFExportSample.js:13978:58)
at http://localhost:8000/PDFExportSample/PDFExportSample.js [49006:38]
I don't know, what I'm doing wrong, would be very nice, if you could help me
Thanks
Stefan
4

Hi,


You are testing from localhost and want to export an image from a canvas coming from another server. That is unfortunately not possible. The error "Tainted canvases may not be exported" more information can be found here: https://ourcodeworld.com/articles/read/182/the-canvas-has-been-tainted-by-cross-origin-data-and-tainted-canvases-may-not-be-exported
5

Ok. Thank you, so I will have to produce the PDF serverside.

6

Not necessarely, you need to make sure that the images are available at the domain where the PDF is generated, you could accomplish this by doing an HTTPRequest to "transfer" the images to the server where the web application is running.