Easeljs:获取图像数据并将其放入位图对象中

Question

所以我正在使用Easel.js并且只是想要一种快速的方法来阈值图像，然后将其读回位图中，以便我旋转它并调整它的大小等等。但是下面的代码不起作用。阈值部分有效，如果我放置 putimagedata，则可以工作。但是如何将阈值数据恢复到位图对象中呢？

知道了

var canvas, stage, background, imgData, newBackground
(function initializeCanvas() {
    canvas = document.getElementById("canvas")
    stage = new createjs.Stage("canvas")
    background = new createjs.Bitmap("background1.jpg");
    background.image.onload = handleBackgroundImage_Loaded
})();
function handleBackgroundImage_Loaded(evt) {
    background.x = 0
    background.y = 0
    stage.addChild(background);
    stage.update()
    var context = canvas.getContext('2d');
    var imgData = context.getImageData(0, 0, background.image.width, background.image.height);
    background.visible = 0
    for (i = 0; i < imgData.data.length ; i = i + 4) {
        brightnessValue = 0.299 * imgData.data[i] + 0.587 * imgData.data[i + 1] + 0.114 * imgData.data[i + 2]
        if (brightnessValue > 150) {
        } else {
            imgData.data[i + 3] = 0  // if perceptual brightness less than some threshold, then that pixel becomes completely transparent.
        }
    }
    background.image.data = imgData.data
    stage.update()
    //context.putImageData(imgData,0,0);        
}

Answer 1

最简单的方法是使用屏幕外画布，然后将该画布设置为位图的源。

// Your code
context.putImageData(imgData,0,0); 
// New bmp
var bmp = new createjs.Bitmap(canvas);

这种方法就是过滤器在EaselJS中的工作方式。这是一个很好的过滤器应该用于什么的例子，实际上在 GitHub 的 extras 文件夹中已经提供了一个 ThresholdFilter。

用法：

// Rough greyscale filter
var bmp = new createjs.Bitmap(img);
var filter = new createjs.ThresholdFilter(0x80, 0x80, 0x80, 0xFF0000, 0x0000FF);
bmp.filters = [filter];
bmp.cache(0,0,img.width,img.height);

希望对您有所帮助！