Darkroom.JSでImageDataピクセル変換を適用するにはどうすればよいですか？

Question

画像の空白を透明に変換するプラグインDarkroom.JSを書き込もうとしています。

私はこの answer（のみキャンバスがベース）は、このコードを記述するために使用されている

：

(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)); 
    }, 
}); 

})(); 

（私も、私は、既存のrotate pluginのオフプラグインの構造をベースに注意してください）

コードをdoes notは呼び出され、私は現在コード内にパフォーマンス上の理由から持っていませんが、log文は、ピクセル編集が行われたifブロックも呼び出されることを示しています。

確認するには、現在、完全に不透明と黒に設定されています（透明ではなく、編集の効果がわかります）。

また、私はDarkroom.JS、2つのキャンバスオブジェクト、アッパーキャンバスと低キャンバスを生成するように見えることに気づきました。変換関数に渡されるオブジェクトは「下部キャンバス」オブジェクトなので、jQueryを使用して「上部」の画像を取得し、その画像データを無駄に設定しようとしました。

私には何が欠けていますか？

Answer 1

私はDarkroom.JSで答えを検索するのを非常に重視していました。 Darkroom.JS Fabric.JSの上だけの層であり、この答えが鍵を握る： fabric js or imagick remove white from image

私は実際には第二の答えを使用し、それが完璧に動作します：

のでフィルタがありますFabric.jsではそれだけです。

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

VARフィルタ=新しいfabric.Image.filters.RemoveWhite（{閾値：40、
距離：140}）; image.filters.push（filter）; image.applyFilters（canvas.renderAll.bind（canvas））;

ここでは、（単純化するために除去いくつかの余分な詳細を）私の完成したコードです：

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