动态添加的图像/画布上的toDataURL

Question

I'm trying to retrieve the base64 data url of an image. I've had success using the HTML canvas' toDataUrl method, on an image with crossOrigin set to anonymous to circumvent tainted-canvas problems.

However, it only works with a static, hard-coded image drawn to the canvas. If I programatically add an image to the DOM in JS and draw that to the canvas, it seems to ignore the Anonymous crossOrigin property and fail due to tainted canvas.

Example

 var canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 200; var img = document.createElement('img'); img.src = "https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/18010130_1691474777821328_8505053465237696429_n.jpg?oh=a75b5a83d1930cd8b7e38062b6f08e89&oe=594E6B6F" img.crossOrigin = "Anonymous"; img.id = "doesntWork"; img.width = 200 img.height = 200 img.onload = function() { var ctx = canvas.getContext("2d"); /*ctx.drawImage(document.getElementById("works"), 0, 0); console.log(canvas.toDataURL());*/ //--- hardcoded image drawn to canvas, toDataURL works ctx.drawImage(document.getElementById("doesntWork"), 0, 0); console.log(canvas.toDataURL()); //--- dyanmically added image drawn to canvas, fails } document.body.appendChild(img); 

 <img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-9/18010138_1692193031082836_7096469518601268674_n.jpg?oh=5f125a7ec2fbf6dcf05a86481881780e&oe=59900564" crossOrigin="Anonymous"id="works" width="200" height="200"> 

http://jsfiddle.net/PPN7Q/156/

Answer 1

The attribute crossOrigin is read only for the DOM elements. Use the class Image instead. Let the rest of your code as it is.

var img = new Image();
img.crossOrigin = 'anonymous'; // or img.setAttribute('crossOrigin', 'anonymous');
img.src = 'https://...';