Fabric.js 中的 PNG 图像颜色不会改变答案

【问题标题】：PNG image color doesn't change in Fabric.jsFabric.js 中的 PNG 图像颜色不会改变
【发布时间】：2013-11-29 22:04:35
【问题描述】：

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

*添加静态颜色用于测试目的，将被颜色选择器替换。

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

【问题讨论】：

@Tushar Gupta 请检查这里是 jsfiddle jsfiddle.net/93xje/3，当我们选择文本颜色更改但当我们选择图像没有效果时，我也想更改 png 图像的颜色

标签： javascript jquery html5-canvas fabricjs

【解决方案1】：

您不能对 crossOrigin 图像应用图像过滤器。如果您查看开发人员控制台，您会看到以下安全错误：“Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': canvas has been tainted by cross-origin data.”

请仅使用同一来源的图像或使用最新的 Fabric.js 版本（开发版）并设置crossOrigin = "Anonymous"。在这种情况下，图像必须带有标题“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找到最新的开发版本（风险自负:)）

【讨论】：

Kienz，我无法（截至目前）升级到最新版本的 fabric.js（我们使用的是 1.2.0）。有没有办法让 crossOrigin 的东西在那个版本中工作？我尝试在 loadImage 函数中添加img.crossOrigin = 'anonymous'; 并没有成功。
基于 1.4.7 代码，看来您需要使用 setCrossOrigin [ github.com/kangax/fabric.js/blob/… ]，但我无法在 Chrome 中使用它。
@Jack 您必须将 crossOrigin 属性传递给 loadImage 函数。必须在图像加载过程开始之前设置 crossOrigin 属性。 fabric.util.loadImage('xyz.png', function(img) { ... }, null, '匿名'});
@Kienz 我们实际上在不久前就让它工作了，（我们最终升级了结构）。
@Jack 你能帮帮我吗？画布图像正在从跨源加载，但我仍然无法应用过滤器