如何在Darkroom.JS中應用ImageData像素轉換？

Question

我正在嘗試編寫一個Darkroom.JS插件，它可以將圖像中的空白區域轉換為透明度。

我已經使用這個答案 （僅基於畫布）來編寫這段代碼：

(function() {
'use strict';

var Transparency = Darkroom.Transformation.extend({
  applyTransformation: function(canvas, image, next) {
    console.log(canvas);
    console.log(image);
    var context = canvas.getContext("2d");
    var upperContext = $('.upper-canvas').get(0).getContext("2d");

    var imageData = context.getImageData(0, 0, image.getWidth(), image.getHeight());

    //var upperImageData = upperContext.createImageData(image.getWidth(), image.getHeight());

    console.log("apply transformation called");

    for(var i = 0, n = imageData.data.length; i < n; i +=4){
      var r = imageData.data[i],
              g = imageData.data[i+1],
              b = imageData.data[i+2];

      if(r >= 230 && g >= 230 && b >= 230){
        imageData.data[i] = 0;
        imageData.data[i+1] = 0;
        imageData.data[i+2] = 0;
        imageData.data[i+3] = 1;
      }
    };

    context.putImageData(imageData, 0, 0);
    upperContext.putImageData(imageData, 0, 0);


    //canvas.renderAll();

    next();
  }
});

Darkroom.plugins['transparency'] = Darkroom.Plugin.extend({

  defaults: {
    clearWhiteSpace: function() {
      this.darkroom.applyTransformation(
        new Transparency()
      );
    }
  },

  initialize: function InitializeDarkroomTransparencyPlugin() {
    var buttonGroup = this.darkroom.toolbar.createButtonGroup();

    this.destroyButton = buttonGroup.createButton({
      image: 'wand' //Magic Wand by John O'Shea from the Noun Project
    });

    this.destroyButton.addEventListener('click', this.options.clearWhiteSpace.bind(this));
  },
});

})();

（我還應該注意我基於現有旋轉插件的插件結構 ）

代碼確實被調用，我目前在代碼中沒有它（出於性能原因），但是一條日志語句表明也會調用完成像素編輯的if塊。

為了驗證，我目前將像素設置為完全不透明和黑色（而不是透明，以便我可以看到編輯的效果）。

另外，我注意到Darkroom.JS似乎生成了兩個畫布對象，一個上部畫布和下部畫布 。 傳遞給transform函數的對象是“lower canvas”對象，所以我甚至嘗試使用jQuery來抓取“upper”對象並在其上設置圖像數據，但無濟於事。

我錯過了什么？

Answer 1

我正專注於在Darkroom.JS上尋找答案。 Darkroom.JS只是Fabric.JS上的一個層，這個答案占據了關鍵： fabric js或imagick從圖像中刪除白色

我實際上使用了第二個答案，它完美地運作：

所以Fabric.js中有一個過濾器可以做到這一點。

http://fabricjs.com/docs/fabric.Image.filters.RemoveWhite.html

var filter = new fabric.Image.filters.RemoveWhite（{threshold：40，
距離：140}）; image.filters.push（過濾器）; image.applyFilters（canvas.renderAll.bind（畫布））;

這是我完成的代碼（刪除了一些無關的細節以簡化）：

       fabric.Image.fromURL(imgData.URL, function(logoImg){

            canvas.add(logoImg);

            var threshold = 40;

            var whitespace = function(){
                var filter = new fabric.Image.filters.RemoveWhite({
                  threshold: threshold,
                  distance: 140
                });

                threshold+=20;

                logoImg.filters.push(filter);
                logoImg.applyFilters(canvas.renderAll.bind(canvas));
            };
       });