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

最简单的方法是使用离屏画布，然后将该画布设置为Bitmap的源。

// 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：Getimagedata并将其放入一个位图对象

1 个答案: