Fabric.js中PNG图像颜色不变
提问于 2013-11-16 05:54:29
我使用下面的代码动态更改画布上PNG图像的颜色，
var selectedObject = canvas.getActiveObject();
if ("text" == selectedObject.type) {
selectedObject.setFill("#FF0000");
canvas.renderAll();
}
else {
selectedObject.filters.push(
new fabric.Image.filters.Tint({color:"#FF0000", opacity:0.6}));
selectedObject.applyFilters(canvas.renderAll.bind(canvas));
}其中canvas = new fabric.Canvas('c');
*增加静态颜色，以供测试之用，并会以色选器取代。
对于文本，它工作得很好，但是对于图像，它是不工作的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-18 01:54:16
不能在crossOrigin图像上应用图像过滤器。如果您查看开发人员控制台，您会看到以下安全错误："Uncaught :未能在‘CanvasRenderingContext2D’上执行'getImageData‘：画布已被跨源数据污染。“
请只使用相同来源的图片或使用最新的Fabric.js版本(开发版本)并设置crossOrigin = "Anonymous"。在这种情况下，图像必须与标题“访问控制-允许-原产地：*”一起服务。
您使用fabric.Image.filters.Tint的新API -此API仅在Fabric.js版本>= 1.3.2中可用。
我更新了jsfiddle以使用数据URL映像(CORS没有问题)，并将Fabric.js更新为1.3.2：http://jsfiddle.net/Kienz/wDfhf/
您可以在https://github.com/kangax/fabric.js/tree/master/dist上找到最新的开发版本(按您自己的风险：)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20019268
复制相关文章
腾讯云开发者
