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

最简单的方法是使用屏幕外 canvas，然后将其 canvas 设置为位图的来源。

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

这种方法是过滤器在 EaselJS 中的工作方式。这是过滤器应该用于什么的一个很好的例子，实际上 GitHub 中的 extras folder 中已经提供了一个 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);

希望对您有所帮助！

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

Easeljs: Getimagedata and put it into a bitmap object

canvas

bitmap

easeljs