Failed to execute 'toDataURL' on 'HTMLCanvasElement'

发表于 更新于 分类于
本文字数： 1.1k 阅读时长 ≈ 1 分钟

完整错误如下：

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

且表现为间接出现，不是 100% 报错。

原代码

1
2
3
4
5
6
7
8
9
10
var qrcodeImage = new Image();
qrcodeImage.src = qrcodeurl;
qrcodeImage.crossOrigin = 'Anonymous';
qrcodeImage.onload = function () {
  context.drawImage(qrcodeImage, 164, 474, 123, 123);

  var base64 = canvas.toDataURL("image/png");  // "image/png" 这里注意一下
  var img = document.getElementById('image');
  img.setAttribute('src', base64);
};

网上的资料一般都是说存在跨域问题，img 元素加上 crossOrigin=Anonymous 即可解决问题。 问题是我代码中明明有加这个属性，结果还是间接出现。

解决方法

1
2
qrcodeImage.crossOrigin = 'Anonymous'; // 这一句必须放在前面，不然可能会报错
qrcodeImage.src = qrcodeurl;

完整代码：

1
2
3
4
5
6
7
8
9
10
var qrcodeImage = new Image();
qrcodeImage.crossOrigin = 'Anonymous';
qrcodeImage.src = qrcodeurl;
qrcodeImage.onload = function () {
  context.drawImage(qrcodeImage, 164, 474, 123, 123);

  var base64 = canvas.toDataURL("image/png");  // "image/png" 这里注意一下
  var img = document.getElementById('image');
  img.setAttribute('src', base64);
};