javascript - 动态添加图像/ Canvas 上的 toDataURL

Question

我正在尝试检索图像的 base64 数据 url。我已经成功地在将 crossOrigin 设置为匿名的图像上使用 HTML canvas 的 toDataUrl 方法来规避 Canvas 污染问题。

但是，它仅适用于绘制到 Canvas 上的静态硬编码图像。如果我以编程方式将图像添加到 JS 中的 DOM 并将其绘制到 Canvas 上，它似乎会忽略匿名 crossOrigin 属性，并由于 Canvas 受污染而失败。

示例

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

属性 crossOrigin 对于 DOM 元素来说是只读的。请改用 Image 类。让其余的代码保持原样。

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