Kineticjs导出到jpeg用白色填充透明像素？

Question

我想用以下方式导出我的Kineticjs舞台：

stage.toDataURL({
  mimeType : "image/jpeg",
  callback : function() {}
}); 

当我导出时：

导出后我得到以下图片：

所有透明像素都设置为黑色。

如何在导出前将所有透明像素设置为白色？

Answer 1

问题

这是因为在KineticJS阶段，背景是透明的：rgba（0,0,0,0）。

rgba中的最后一个零是alpha ==不透明度。

但jpeg不允许不同的不透明度。它只允许纯色。

因此，当您使用toDataURL保存舞台时，jpeg会使背景不透明度变为纯色== rgba（0,0,0,1）。

rgba(0,0,0,1) is black.  

因此，保存jpeg时，透明像素始终写为黑色。

解决方案

添加一个用白色（或其他颜色）填充舞台的背景矩形，以便jpeg知道用于背景像素的颜色。

演示：http://jsfiddle.net/m1erickson/WZ5G2/