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

Question

使用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); 
}); 

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