Canvas 即使crossOrigin="；“匿名”；

单击同一个按钮时，您将看到一个异常：

（索引）：72未捕获的DomeException:未能在“HtmlCanvaElement”上执行“toDataURL”：可能无法导出受污染的画布。

var canvas=newfabric.canvas（'c'）；
变量url=”https://ae01.alicdn.com/kf/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB/223239535/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB.jpg?size=172993&height=1082&width=790&hash=62c4f508fb7a71cf577223a35c25f896";
fabric.Image.fromURL（url，函数（oImg）{
oImg.set({
“左”：0
});
oImg.crossOrigin='匿名'；
oImg.set({
“顶部”：0
});
canvas.add（oImg）；
});
document.getElementById（'save'）。addEventListener（'click'，function（）{
document.getElementById（'output'）。innerHTML=''；
});

要使crossOrigin属性起作用，必须在加载图像之前设置该属性。不能在已修改的图像上更改它

遗憾的是，如果没有设置crossOrigin匿名头，那么从链接上看似乎是这样

如您所见，我在代码段中添加了2个图像标记。没有crossOrigin属性的一个正在正确加载，另一个根本没有加载

var canvas=newfabric.canvas（'c'）；
变量url=”https://ae01.alicdn.com/kf/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB/223239535/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB.jpg?size=172993&height=1082&width=790&hash=62c4f508fb7a71cf577223a35c25f896";
fabric.Image.fromURL（url，函数（oImg）{
oImg.set({
“左”：0
});
oImg.set({
“顶部”：0
});
canvas.add（oImg）；
}，{crossOrigin:'匿名'}）；
document.getElementById（'save'）。addEventListener（'click'，function（）{
document.getElementById（'output'）。innerHTML=''；
});

拯救
输出将在这里
我的示例正在运行，它向您展示了承载映像的服务器不支持跨源标题。因此，您不能在该设置中使用crossOrigin。配置您的主机或查找其他主机。
var canvas = new fabric.Canvas('c');
var url = "https://ae01.alicdn.com/kf/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB/223239535/HTB1wM8QLpXXXXcgXVXXq6xXFXXXB.jpg?size=172993&height=1082&width=790&hash=62c4f508fb7a71cf577223a35c25f896";


fabric.Image.fromURL(url, function(oImg) {
  oImg.set({
    'left': 0
  });
  oImg.crossOrigin = 'anonymous';
  oImg.set({
    'top': 0
  });

  canvas.add(oImg);
});



document.getElementById('save').addEventListener('click', function() {
  document.getElementById('output').innerHTML = '<img crossOrigin="anonymous" src="' + canvas.toDataURL('image/png') + '" />';
});