我正在尝试写一个 Darkroom.JS插件,将图像中的空白转换为透明度。
我用过这个answer (仅基于 Canvas )编写此代码:
(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 block 也被调用。
为了验证,我目前将像素设置为完全不透明和黑色(而不是透明,以便我可以看到编辑的效果)。
此外,我注意到 Darkroom.JS 似乎生成了两个 Canvas 对象,一个上 Canvas 和下 Canvas 。传递给转换函数的对象是“下 Canvas ”对象,因此我什至尝试使用 jQuery 来获取“上” Canvas 并在其上设置图像数据,但无济于事。
我错过了什么?
最佳答案
我过于关注 Darkroom.JS 来寻找答案。 Darkroom.JS 只是 Fabric.JS 之上的一层,这个答案掌握了关键: fabric js or imagick remove white from image
我实际上使用了第二个答案,它工作得很好:
So there is a filter in Fabric.js that does just that.
http://fabricjs.com/docs/fabric.Image.filters.RemoveWhite.html
var filter = new fabric.Image.filters.RemoveWhite({ threshold: 40,
distance: 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));
};
});
关于javascript - 如何在 Darkroom.JS 中应用 ImageData 像素转换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39104814/