Question

在HTML5画布上，在javascript中，我使用离屏画布元素将图像绘制到。然后我将此图像的一部分传输到屏幕上的另一个画布上。原始图像是带有Alpha通道的png。然而，当图像被绘制到屏幕上时，它的alpha通道消失了，它只有一个白色背景。

这种方法很有意义，但我无法找到关于如何对图像进行采样的文档，在屏幕外执行某些操作然后将图像传输到屏幕画布上，其中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通道的保存？

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

非常感谢

A

Answer 1

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

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

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

http://jsfiddle.net/Urutb/

在任何情况下，使用getImageData和PutImageData绝对保留alpha通道，你在这里做的其他事情必定是问题。

getimagedata与原始图像alpha？

1 个答案: