javascript - PNG 图像颜色在 Fabric.js 中不会改变

Question

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

*添加静态颜色用于测试目的，将由颜色选择器取代。

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

Answer 1

您不能在跨源图像上应用图像过滤器。如果您查看开发者控制台，您会看到以下安全错误:“未捕获的安全错误:无法在‘CanvasRenderingContext2D’上执行‘getImageData’: Canvas 已被跨源数据污染。”

请仅使用同源图像或使用最新的 Fabric.js 版本(开发版)并设置 crossOrigin = "Anonymous"。在这种情况下，图像必须使用 header “Access-Control-Allow-Origin: *”提供。

您使用 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 找到最新的开发版本(风险自负:))