Easeljs：Getimagedataをビットマップオブジェクトに入れます

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 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); 

希望に役立ちます！