如何使用fabricjs在图像中插入填充颜色

How to Insert Fill color in image with fabricjs

本文关键字：插入 填充 颜色 图像 何使用 fabricjs      更新时间：2023-09-26

什么面料.js函数允许在图像中填充颜色？

我想加载带有黑线和白色背景的图像进行绘画。

我有一个不同颜色的输入颜色供用户为白色部分的图像添加颜色

另一个疑问：如何自动将图像大小调整为与画布相同的大小？

https://jsfiddle.net/gislef/s3rvoon6/

fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.padding = 5;

  var $ = function(id){return document.getElementById(id)};

  var canvas = this.__canvas = new fabric.Canvas('c');
    canvas.setHeight(300);
        canvas.setWidth(500);
    fabric.Image.fromURL('http://coloring.thecolor.com/color/images/Fish2.gif', function(oImg) {
  canvas.add(oImg);
});

要将图像大小调整为画布的高度和宽度，您可以执行以下操作：

fabric.Image.fromURL('http://coloring.thecolor.com/color/images/Fish2.gif', function(oImg) {
  oImg.scaleToWidth(canvas.getWidth());
  //oImg.scaleToHeight(canvas.getHeight());
  canvas.add(oImg);
});

关于填充颜色，到目前为止还没有这样的事情。有一个 removeWhite 滤镜，可以修改它以用另一种颜色替换白色，但这会删除所有白色而不是白色区域。

如果您的目标是看起来像儿童着色书的应用程序，您应该尝试使用 svg 资源并按形状为它们着色。这意味着在将它们与应用程序一起使用之前，您必须仔细创建自己的资产。

相关文章：