[英]How do I apply an ImageData pixel transformation in Darkroom.JS?
I am attempting to write a Darkroom.JS plugin that will transform white space in images to transparency. 我正在尝试编写一个Darkroom.JS插件,它可以将图像中的空白区域转换为透明度。
I have used this answer (solely canvas based) to write this code: 我已经使用这个答案 (仅基于画布)来编写这段代码:
(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));
},
});
})();
(I should also note I based the structure of the plugin off of the existing rotate plugin ) (我还应该注意我基于现有旋转插件的插件结构 )
The code does get called, and I do not currently have it in the code (for performance reasons) but a log statement indicated that the if block where the pixel editing is done also gets called. 代码确实被调用,我目前在代码中没有它(出于性能原因),但是一条日志语句表明也会调用完成像素编辑的if块。
To verify, I presently have the pixels set to fully opacity and black (instead of transparent so that I can see the effects of editing). 为了验证,我目前将像素设置为完全不透明和黑色(而不是透明,以便我可以看到编辑的效果)。
Also, I noticed that Darkroom.JS seems to generate two canvas objects, an upper canvas and lower canvas . 另外,我注意到Darkroom.JS似乎生成了两个画布对象,一个上部画布和下部画布 。 The object passed to the transform function is the "lower canvas" object, so I even tried using jQuery to grab the "upper" one and set the image data on that, to no avail. 传递给transform函数的对象是“lower canvas”对象,所以我甚至尝试使用jQuery来抓取“upper”对象并在其上设置图像数据,但无济于事。
What am I missing? 我错过了什么?
I was focusing my search for an answer far too much on Darkroom.JS. 我正专注于在Darkroom.JS上寻找答案。 Darkroom.JS is just a layer on top of Fabric.JS, and this answer holds the key: fabric js or imagick remove white from image Darkroom.JS只是Fabric.JS上的一个层,这个答案占据了关键: fabric js或imagick从图像中删除白色
I actually used the second answer and it works perfectly: 我实际上使用了第二个答案,它完美地运作:
So there is a filter in Fabric.js that does just that. 所以Fabric.js中有一个过滤器可以做到这一点。
http://fabricjs.com/docs/fabric.Image.filters.RemoveWhite.html http://fabricjs.com/docs/fabric.Image.filters.RemoveWhite.html
var filter = new fabric.Image.filters.RemoveWhite({ threshold: 40, var filter = new fabric.Image.filters.RemoveWhite({threshold:40,
distance: 140 }); 距离:140}); image.filters.push(filter); image.filters.push(过滤器); image.applyFilters(canvas.renderAll.bind(canvas)); image.applyFilters(canvas.renderAll.bind(画布));
Here is my completed code (with some extraneous details removed to simplify): 这是我完成的代码(删除了一些无关的细节以简化):
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));
};
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.