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

Question

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

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

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

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

我还尝试使用URL = MyOcanvasCore.canvasElement.toDataURL()，然后让visibleCanvas使用src=url进行drawImage。

图像始终传输，但它们具有白色背景，即使我在canvas.create（）期间指定了背景：“透明”。因此，它们完全覆盖了之前的所有图层。

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

Answer 1

  

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