getimagedata 与原始图像 alpha？

Question

在 HTML5 画布上，在 javascript 中，我使用屏幕外画布元素在其上绘制图像。然后我将这个图像的一部分转移到屏幕上的另一个画布上。原始图像是带有 alpha 通道的 png。然而，当图像被绘制到屏幕上时，它的 alpha 通道已经消失，只有白色背景。

这种说法是有道理的，但我在文档中找不到太多关于如何对图像进行采样、在屏幕外执行一些操作然后将图像传输到具有完整 Alpha 通道的屏幕画布的文档。

这是一个小演示（应用程序，它是从一段更大的代码中破解出来的）：

    //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通道没有保存吧？

有没有人对此有任何指示？就像我提到的那样，我找不到任何关于此的即时文档...

真的非常感谢

一个

Answer 1

原始图像是带有 Alpha 通道的 png。然而，当图像被绘制到屏幕上时，它的 alpha 通道已经消失，只有白色背景。

等等，根本不应该是这样。如果情况确实如此，我认为您的代码中的其他地方有问题。

这是一个在一个画布上绘制透明图像的示例，在它之前和之后绘制一些东西，然后将该画布绘制到第二个画布上，保持透明度不变：

http://jsfiddle.net/Urutb/

无论如何，getImageData 和 PutImageData 绝对保留了 alpha 通道，你在这里做的其他事情肯定是问题所在。