Fabric.js中的PNG图像颜色不变

Rajendra Khabiya 发表于 Dev

拉杰德拉·哈比亚（Rajendra Khabiya）

我正在使用以下代码来动态更改画布上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');

*为测试目的添加了静态颜色，该颜色将由拾色器代替。

对于文本，它可以正常工作，但对于图像，则不能正常工作。

肯兹

您不能在crossOrigin图片上应用图片过滤器。如果查看开发人员控制台，则会看到以下安全错误：“未捕获的SecurityError：无法在'CanvasRenderingContext2D'上执行'getImageData'：画布已被跨域数据污染。”

请仅使用相同来源的图像或使用最新的Fabric.js版本（开发版本）并设置crossOrigin = "Anonymous"。在这种情况下，图像必须带有标题“ Access-Control-Allow-Origin：*”。

您使用的是新API-fabric.Image.filters.Tint此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中找到最新的开发版本（需要您自担风险：））

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。