setBackground Fabric.js：CORS问题

Question

我正在使用Fabric.js，但我有一个我无法理解的问题。

我想设置Fabric.js画布的背景但是我遇到了CORS问题。 我已经阅读了如何使用cors设置背景

var canvas = window._canvas = new fabric.Canvas('presenterCanvas');
canvas.isDrawingMode = true;

src = "http://itknowledgeexchange.techtarget.com/overheard/files/2016/12/water-molecule.png"; 

canvas.setBackgroundImage(src, canvas.renderAll.bind(canvas), {
   crossOrigin: 'anonymous',
   width: canvas.width,
   height: canvas.height,   
   originX: 'left',
   originY: 'top'
});

我收到此错误：

您可以查看jsfiddle上的代码：http://jsfiddle.net/wikett/uvk8xsjf/

我不明白为什么我可以在html中使用该图像，我可以在画布中添加Fabric图像，但我无法设置背景。 任何人都可以帮忙解决这个问题吗？

提前致谢

Answer 1

显示图片没有任何限制，但使用JavaScript访问数据（包括像素值）存在限制。

Fabric的背景图像代码读取像素数据（可能是因为它可以进行缩放等操作），因此如果图像来自其他原点，则需要通过CORS进行许可。

Answer 2

您的问题是你要求fabric使用crossOrigin属性加载图片。

设置媒体元素的crossOrigin属性时，必须正确设置服务器以接受此类请求。否则，它就会出错，就像你的情况一样。

如果您以后不想导出它，或者应用某些结构的过滤器，则无需执行此操作。

canvas.setBackgroundImage(src, canvas.renderAll.bind(canvas), {
//   crossOrigin: 'anonymous',// Here is your problem
   width: canvas.width,
   height: canvas.height,   
   originX: 'left',
   originY: 'top'
});

updated fiddle