How to stamp PDF file from Javascript code? How to stamp PDF file using Image Data from HTML5 Canvas Drawing?

Hello VeryPDF,

We've been using VeryPDF PDFStamp for quite a while now and it has worked very well. We have another need that I'm hoping you might be able to do with the software:

We are now using html 5 elements to allow users to draw their own pictures. On saving, we are gathering what the user created by using the javascript toDataURL() command (which is basically the code for the image) and trying to put it on top of the PDF. This does not work right now because VeryPDF expects a image file to open and stamp, not the image data itself.

Is it possible for PDFStamp to stamp an image based on the result of toDataURL() as an option (basically, don't read from a file, just read from the data passed like the browser does)?

Customer
------------------------------------------------
I am attaching an example of a small HTML file that uses the CANVAS element to create an image. If you open this HTML file in a web browser, you will see that you can draw lines on the canvas, then click "Save" to have the canvas call the javascript function toDataURL(), which will then return a string of base64 encoded characters (that you can see in the input text box at the top) and see how it appears as an image on the right in an HTML tag. This string always starts with "data:image/png;base64," and then the base64 encoded characters representing the image begins.

I have already developed code that saves this string of image data as a value into a database. What I need now is to burn this into a PDF document using PDFStamp and Visual C++/.Net language. What I need is for the VeryPDFStamp COM component to have an option to accept this string to be passed as a variable instead of a file name when stamping an image. Example:

veryAddImage(long id,long position,char *filename,long shift_lr,long shift_tb,long rotate,long layer,long zoomW,long zoomH,long action,char *link,long pageno);

The "filename" variable here could contain the image data string instead of a file name. You could either add another parameter to choose between the value for "filename" being a file name or an image data string, or simply detect this by looking for the prefix "data:image/png;base64," in the filename value.

In the program, you would delete the beginning of the string (the "data:image/png;base64," portion) and then Base64Decode() the rest of it to get the real image data. Once you had that, you could probably then do whatever you normally do to paste the image onto the PDF, as now you have the code that makes a PNG image file.

Let me know if you have any questions.

Customer
------------------------------------------------
We have created a new version of PDFStamp SDK to you, please download the new version from following URL to try again,

https://www.verypdf.com/app/pdf-stamp/try-and-buy.html
https://www.verypdf.com/pdfstamp/pdfstamp_sdk.zip

Please refer to following Javascript code, this Javascript code will show to you how toDataURL() method works,

function save()
{
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
        document.getElementById("canvas_data_url").value = dataURL;
       
        StampImageToPDFFile("D:\\downloads\\2701140465.pdf", "D:\\downloads\\2701140465_jsout.pdf", dataURL);
}

function StampImageToPDFFile(strInPDF, strOutPDF, strImageData)
{
        alert("Start to stamping,\n\n" + strInPDF + "\n\n" + strOutPDF);
        try {
                var pdfstamp = new ActiveXObject("PDFStampCOM.CPDFStamp");
                pdfstamp.veryRegEx("XXXXXXXXXXXXXX");
                id = pdfstamp.veryOpenEx(strInPDF, strOutPDF);
                if(id > 0)
                {
                        code = pdfstamp.veryAddImageEx(id, 7, strImageData, 30, -30, 0, 0, 0, 0, 0, 0, 0)
                        code = pdfstamp.veryAddImageEx(id, 3, strImageData, -30, 30, 0, 0, 0, 0, 0, 0, 0)
                        pdfstamp.veryCloseEx (id);
                }
        } catch (error) {
                // error handling code not shown...
                alert(error + '\n\nThis error occurred while\nattempting to load PDFStampCOM.')
                return;
        }
        alert("Finished the stamping");
}

image

This is the stamped PDF file,

image

>>Microsoft JScript runtime error: Automation server can't create object.

As I understand for your error message saying "Microsoft JScript runtime error: Automation server can't create object", you can try to enable ActiveX controls and plug-ins in IE according to the following steps:

Open IE -> Tools ->Internet Options -> Security -> Custom Level -> ActiveX controls and plug-ins ->Enable "Initialize and script ActiveX controls not marked as safe for scripting"

VeryPDF

VN:F [1.9.20_1166]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.20_1166]
Rating: 0 (from 0 votes)

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *


Verify Code   If you cannot see the CheckCode image,please refresh the page again!