Question

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

*添加静态颜色用于测试目的，将由colorpicker替换。

对于文本，它工作正常，但对于图像，它不起作用。

Answer 1

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

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

您使用fabric.Image.filters.Tint的新API - 此API仅适用于Fabric.js版本＆gt; = 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

找到最新的开发版本（风险自行:)）

Fabric.js中的PNG图像颜色不会更改

1 个答案: