javascript - setBackground Fabric.js : CORS problems

Question

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

我想设置 Fabric.js Canvas 的背景，但遇到 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 图像添加到 Canvas 中，但无法设置背景。 谁能帮忙解决这个问题吗？

提前致谢

Answer 1

您的问题是您要求结构加载具有 crossOrigin 属性的图像。

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

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

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