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

【问题标题】：How to Insert Fill color in image with fabricjs如何使用fabricjs在图像中插入填充颜色
【发布时间】：2016-04-27 15:21:02
【问题描述】：

什么 fabric.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);
});

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

要将图像调整为画布的高度和宽度，您可以这样做：

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 资源并按形状为它们着色。这意味着在将它们与应用程序一起使用之前，您必须仔细创建自己的资产。

【讨论】：