如何插入使用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資產並按照形狀對它們進行着色。 這意味着您必須在與應用程序一起使用前仔細創建自己的資產。