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