在Fabric.js中更改PNG图像颜色

Question

有没有办法使用fabricJS更改图像的颜色？应用Tint滤镜只会添加颜色而不是更改原始颜色。

- infinitywarior

Answer 1

对于这样的图像，您可以使用色调旋转过滤器。

var canvas = new fabric.StaticCanvas('c');
var image;
var imgEl = document.createElement('img');
imgEl.crossOrigin = 'anonymous';
imgEl.onload = function() {
  image = new fabric.Image(imgEl);
  image.filters = [new       fabric.Image.filters.HueRotation()];
  canvas.add(image);
}
imgEl.src = 'https://i.imgur.com/28kU1bo.png';


document.getElementById('hue').onclick= function() {
  image.filters[0].rotation = 2 * Math.random() - 1;
  console.log(image.filters[0].rotation);
  image.applyFilters();
  canvas.requestRenderAll();
};

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button id="hue">Change to random color</button>
<canvas id="c" width=600 height=600 ></canvas>

- AndreaBogazzi

---

我们能否改变图像的颜色，如果图像是黑白色的？ - Tomonso Ejang

在这种情况下，色调旋转不起作用。我认为可能有一个可以做到的着色滤镜。如果没有，你仍然可以通过一些研究轻松构建它。 - AndreaBogazzi

Andrea，我想在我的项目中实现这个解决方案，但是我需要以分离的方式更改几个svg对象的颜色，而不使用静态画布。我已经尝试了但没有成功。有什么建议吗？你能看一下我的问题吗？ - SIMBIOSIS surl