1

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

我需要透明背景,以便我可以拥有多个图层,每个图层都由其自己的显示对象表示,在隐藏的“登台”画布上单独呈现(意味着一次一个)。渲染后立即在可见画布上的先前图层之上绘制一个图层,以便在渲染期间可以将不同的图像过滤器独立应用于每个图层。

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

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

我也尝试过使用URL = MyOcanvasCore.canvasElement.toDataURL()然后让我visibleCanvassrc=url.

图像总是传输,但它们具有白色背景,即使我在 canvas.create() 期间指定背景:“透明”。因此,它们完全覆盖了所有先前的层。

你对我有什么建议吗?我做错了吗?我尝试使用经典的 drawRect、drawImage 等方法将内容从一个画布转移到另一个画布,并且保留了透明度。这就是为什么我相信它要么是库要么是我的代码。

4

1 回答 1

0

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

于 2012-10-11T14:09:21.000 回答