setBackground Fabric.js: CORS 问题

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 中使用那个图像，我可以在 canvas 中添加一个织物图像，但我不能设置背景。谁能帮忙解决这个问题？

提前致谢

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

setBackground Fabric.js: CORS 问题

setBackground Fabric.js: CORS problems

javascript

canvas

cors

html5-canvas

fabricjs