getimagedata與原始圖像阿爾法？

在HTML5畫布上，在javascript中，我使用了一個離屏畫布元素來繪製圖像。然後我將這個圖像的一部分轉移到屏幕上的另一個畫布上。原始圖像是帶alpha通道的png。然而，當圖像被繪製到屏幕上時，它的alpha通道消失了，它只是具有白色背景。getimagedata與原始圖像阿爾法？

這種有道理，但我無法找到很多有關如何取樣一個圖像的文檔方面，執行一些離屏的動作，然後將圖像傳輸到屏幕上的畫布，它的alpha通道完好無損。

這裏有一個小的演示（appologies，這有點砍死了一個更大的一段代碼）：

//this is all nested in an MVC view, using jQuery/Backbone 

    this.pasteboard = $("<canvas/>").attr("width",1200).attr("height",600) 
    this.pasteboard = this.pasteboard[0].getContext("2d"); 
    var img  = $("<img/>"); 
    var t  = this; 
    img.load(function(){ 
     t.pasteboard.save(); 
     t.pasteboard.clearRect(0,0,args.width,args.height) 
     t.pasteboard.drawImage(this,0,0); 
     log("obj args:",args) 
     o.imageData = t.pasteboard.getImageData(0,0,args.width,args.height); 
     t.pasteboard.restore(); 
     o.ready = true; 
     o.trigger("ready",args); 
    }).attr("src",args.src); 


// and somewhere else in the view object i use 
this.ctx.putImageData(myimagedataobjecthere,0,0); 

// all works fine except the alpha is now white background..

據推測，這是因爲缺乏getimagedata和putimagedata之間的alpha通道保存的？

有沒有人對此有過指點？就像我提到的那樣，沒有任何信息的文檔，我可以找到這個...

非常感謝確實

一個

來源

2012-03-03 Alex

原始圖像是alpha通道的PNG文件。然而，當圖像被繪製到屏幕上時，它的alpha通道消失了，它只是具有白色背景。

等一下，應該不是這種情況。如果情況似乎如此，我認爲代碼中的其他地方有問題。

這裏繪製的透明圖像投影到一個帆布，有填充之前和之後它繪製，然後繪製畫布到第二畫布，保持透明度完整的示例：

http://jsfiddle.net/Urutb/

在任何情況下，alpha通道是完全保留getImageData和PutImageData，你在這裏做的其他事情必須是問題。

來源

2012-03-04 04:12:56

我明白你的意思了，我實際上是在試圖建立一個動畫，其中各種圖像在彼此頂部合成基礎是jpg thene有3個阿爾法pngs在頂部獲得動畫。所以我需要將圖像數據存儲爲一個單獨的實例。我已經修改了一下你的代碼，並且在使用drawimage時繪製圖像很好：http：//jsfiddle.net/EBEN4/但是當我使用get/putimage數據時，事物並不具有相同的效果，而只是覆蓋整個事物：http://jsfiddle.net/GYZvU/ – Alex 2012-03-04 14:47:14

getimagedata與原始圖像阿爾法？

回答

相關問題