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与原始图像阿尔法？

回答

相关问题