如何使用oCanvas.js渲染具有透明背景的图像

Question

我一直在使用oCanvas.js设计应用程序。这是一个非常好的画布库，可以更容易地创建一个可以创建和操作图像的应用程序，但是当我试图实现图像过滤器时遇到了一个问题：

我需要透明背景以便我可以拥有多个图层，每个图层都由其自己的显示对象表示，并分别在一个隐藏的“分级”画布上单独渲染（意味着每次渲染一个图层）。渲染后立即在可见画布上的先前层上绘制图层，以便在渲染过程中可以将不同的图像滤镜独立应用于每个图层。

我遇到的问题是，当试图从oCanvas对象的canvasElement中提取图像时，生成的图像从不具有透明背景。例如：想象一下，我有一个已处理oCanvas.create（）的50x50画布，但显示：无; （这用作渲染画布）和另一个画布（相同的尺寸），没有oCanvas实例。我试图做这样的事情（伪）：

visibleCanvas.getContext("2d").drawImage(MyOcanvasCore.canvasElement, 0, 0); 

我也用URL = MyOcanvasCore.canvasElement.toDataURL()尝试，然后有我的visibleCanvas做的drawImage与src=url。

尽管我在canvas.create（）中指定了背景：“透明”，但图像始终会转移，但它们仍具有白色背景。因此，它们完全覆盖了以前的所有层。

你有什么提示吗？我做错了吗？我尝试使用经典的drawRect，drawImage等方法将东西从一个画布转移到另一个画布，并保留透明度。这就是为什么我相信它是图书馆或我的代码。

Answer 1

我想你使用的不是png的图像格式。 你应该有你的PNG图像格式，它保留了每个像素的所有细节>包括像素的透明度 而不是压缩格式。 因此，只需在图像编辑器中编辑图像并保存为.png格式，然后将图像保存为png格式即可。