Image loading not called

Question

I am trying to read an image from an external URL as a data url. Here is my code

var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();

img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
    console.log(canvas.toDataURL("image/jpeg"));
    canvas = null;
};
img.crossOrigin = 'anonymous';
img.src = "http://pierre.chachatelier.fr/programmation/images/mozodojo-original-image.jpg";

Image loading does not load here. But when I delete img.crossOrigin = 'anonymous';onload receives a call and the browser throws an error SecurityError: The operation is insecure. This error is from Mozilla. Chrome submission error -

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Unable to test IE like on a Linux machine

I can’t find what else is wrong with the code.

Answer 1

I changed my code. Now I am sending bytes from the server instead of the image URL using the code:

URL u = new URL(url);
InputStream is = u.openStream();
byte[] = IOUtils.toByteArray(is);

Answer 2

canvas.toDataURL("image/jpeg") , . , , base64. -, , canvas.toDataURL() .