support cross-origin fromDataURL

[somazx]

If you have a question, please ask it on StackOverflow and use signature-pad tag instead of creating an issue.

Do you want to request a feature or report a bug?
Add support for loading signature Cross Origin with fromDataURL.

What is the current behavior?

In Firefox (possibly/likely other browsers as well) if I attempt to load a signature image from a domain other than the origin (for example if the signatures are stored on S3/cloudflare) then future attempts to call toDataURL result in a SecurityError due to "tainted canvas", as explained here https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/szimek/h80phxyr/).

https://jsfiddle.net/ab27n8f3/1/

Then click the save as PNG or JPG buttons and note the error in the console.

SecurityError: The operation is insecure. (Firefox)

Chrome:

signature_pad.min.js:1 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    at o.toDataURL (https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js:1:3363)
    at HTMLButtonElement.<anonymous> (https://fiddle.jshell.net/ab27n8f3/1/show/:120:27)

What is the expected behavior?

Support cross origin requests for image signatures

Which versions of SignaturePad, and which browser / device are affected by this issue? Did this work in previous versions of SignaturePad?

Signature Pad 2.3.2
Firefox 62.0.3

I believe the solution is to add just one line to fromDataURL, after:

const image = new Image();

add the following after:

image.crossOrigin = "Anonymous";

[jogi323]

+1
I am also facing the same issue after clearing existing signature and trying to add new signature. @somazx solution is working locally but need it from signature_pad package.

[mgc-robot]

this my code and it works.

let canvas = document.querySelector('canvas');
let ctx = canvas.getContext("2d");
let image = new Image();
image.crossOrigin = "Anonymous"; 
image.src = "image_path.jpeg";
image.onload = function(){
  ctx.drawImage(image, 0, 0);
}

[szimek]

Fixed by #542.