从Google Apps脚本网页上的HTML画布获取数据URI

Question

The Problem

I'm trying to implement a signature collector using this library: github.com/szimek/signature_pad

The collector is running as a web app on Google Apps Script. I'd like to be able to use our company's user list and Drive together with the signature to create a PDF.

I've created the form using regular HTML and I've added the canvas element from the library's demo page.

I can draw a signature but when I try to extract the data URL using canvas.toDataURL() I get the following message:

Expected property "toDataURL" to be a function, not undefined: undefined

in the Chrome developer console.

What I've Tried

I assume that the Google Caja library (of which I know next to nothing) does not implement or allow the toDataURL() method. I found this library: http://www.nihilogic.dk/labs/canvas2image/ , that can create a base64 encoded version of a BMP of the canvas.

This time I can run the code and extract some data but when I try to put the image back together on the server end, all I get is a black box.

Here's an example app that demonstrates the problem: https://script.google.com/macros/s/AKfycbwXo0xFNWqiewoe4oh-cSxTdhmqRTyNDwL9xknbtOdk3rLbHZ8/exec

The example outputs

Object [object Object] has no method 'toDataURL'

to the developer console. This should be because I'm using NATIVE sandbox mode instead of EMULATED.

Here's a link to the editable project: https:// script.google.com/d/19azWWXnrUO72ryDWhmhKJA-PqoOiDIRNPEIt61h2l_kduUbD87V4P311/edit?usp=sharing. Maybe some nice person can make that a proper link for me?

What Next

• Is there a way I can get the toDataURL() method to work?
• Should the BMP solution work? What's going wrong?
• Are there other libraries/solutions I could use?

Obviously I haven't provided any code. I can do so on request. If the BMP solution should work then I'll show you what I'm doing, I haven't added the code now because it may just be a dead end.

EDITS:

• Corrected getDataURL() to toDataURL()
• Added example app

Answer 1

The problem here is that Google Apps Script is running this all in a Caja sandbox (as you know).

The canvas object that the sandbox makes available to us, is a sandbox friendly TameSpecificElement version of canvas, which doesn't have the toDataURL method attached to it.

Whether this is because the Caja team currently deem this as being a potentially dangerous method, or because it is still under development I'm not sure.

In the Caja source code : test-domado-canvas-guest has a TODO next to toDataURL, but that doesn't make it clear to me whether thats because implmentation is in development, or just that tests to make sure it is effectively sandboxed are in development, so your guess is as good as mine in terms of future implementation.

But I think its safe to answer that under the current released version, the tamed version of canvas doesn't support that operation.

One thing you could use is Canvas' context getImageData method which will give you back an array of all the pixels in it's data property. I tested this in your app engine code and it works!

After that you would have to convert that to base64 encoding to roll-your-own dataUrl (might need a good JavaScript library to convert from pixel array to PNG, something like this http://www.xarg.org/2010/03/generate-client-side-png-files-using-javascript/ may do the trick).

Here is some sample code that works with the library mentioned, with some efficiency changes vs. your current sample.

window.saveButton.addEventListener("click", function (event) {
    if (window.signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        var captureWidth = 658;
        var captureHeight = 318;

        var p = new PNGlib(captureWidth, captureHeight, 256);
        var background = p.color(0, 0, 0, 0);
        var context = canvas.getContext("2d");
        var imageData = context.getImageData(0, 0, captureWidth, captureHeight);
        var data = imageData.data;
        var dataKeys = Object.keys(data);

        var thisPixelNumber = 0;

        // each pixel is represented by 4 bytes in the array, 
        // so we'll just advance 4 at a time here.  We're using dataKeys to determine the
        // length, because data property in this environment is an object not an array.
        for (var i=0; i < dataKeys.length; i+= 4) {
            var thisPixelNumber = i / 4,
                pixelColor = {
                    r: data[i],
                    g: data[i+1],
                    b: data[i+2],
                    a: data[i+3]
                };

            // only worry about transferring the pixel if it actually has a value, check the     alpha for this.
            // this is a massive time saver for us, reading memory being way faster than writing.
            if (pixelColor.a) {
                var x = thisPixelNumber % captureWidth,
                    y = Math.floor(thisPixelNumber / captureWidth);

                p.buffer[p.index(x, y)] = p.color(pixelColor.r, pixelColor.g, pixelColor.b,     pixelColor.a);
            }
        }

        // in the end just log out the url to the console.  Use Chrome DevTools to check this     value and click it to view the converted PNG
        console.log('data:image/png;base64,' + p.getBase64());
    }
});