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

Question

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

我需要透明的背景，这样我才能有多个层，每个层都由它自己的显示对象表示，在隐藏的"staging“画布上分别渲染(一次渲染一个)。渲染后，会立即在可见画布上的前几个层上绘制一个层，以便在渲染期间可以将不同的图像过滤器单独应用于每个层。

我遇到的问题是，当尝试从oCanvas对象的canvasElement中提取图像时，生成的图像永远不会有透明的背景。例如:假设我有一个经过oCanvas.create()处理的50x50画布，但是有display: none；(这用作呈现画布)和另一个没有oCanvas实例的画布(尺寸相同)。我正在尝试这样做(伪代码)：

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

我也尝试过使用URL = MyOcanvasCore.canvasElement.toDataURL()，然后让我的visibleCanvas用src=url做一个drawImage。

图像总是传输的，但它们的背景是白色的，即使我在canvas.create()中指定了background："transparent“。因此，它们完全覆盖了以前的所有层。

你有什么建议给我吗？我做错了吗？我尝试使用经典的drawRect、drawImage等方法将内容从一个画布转移到另一个画布，但透明度仍然保持不变。这就是为什么我相信它要么是库，要么是我的代码。

Answer 1

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