image - 在fabric js中更改png图像颜色

Question

有没有办法使用 fabricJS 更改图像的颜色？应用色调过滤器只会添加颜色而不改变原始颜色。

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>