如何在 Darkroom.JS 中应用 ImageData 像素转换？答案

【问题标题】：How do I apply an ImageData pixel transformation in Darkroom.JS?如何在 Darkroom.JS 中应用 ImageData 像素转换？
【发布时间】：2016-08-23 15:08:39
【问题描述】：

我正在尝试编写一个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）

代码确实被调用了，我目前在代码中没有它（出于性能原因），但日志语句表明完成像素编辑的 if 块也被调用。

为了验证，我现在将像素设置为完全不透明和黑色（而不是透明，以便我可以看到编辑效果）。

另外，我注意到 Darkroom.JS 似乎生成了两个画布对象，一个上画布和下画布。传递给转换函数的对象是“下部画布”对象，所以我什至尝试使用 jQuery 抓取“上部”对象并在其上设置图像数据，但无济于事。

我错过了什么？

【问题讨论】：

标签： javascript canvas

【解决方案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 filter = new fabric.Image.filters.RemoveWhite({ threshold: 40,
距离：140 }); image.filters.push(过滤器); 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));
            };
       });

【讨论】：