我一直在用 oCanvas.js 设计一个应用程序。这是一个非常好的画布库,它可以更轻松地创建一个可以创建和操作图像的应用程序,但是当我尝试实现图像过滤器时遇到了一个障碍:
我需要透明背景,以便我可以拥有多个图层,每个图层都由其自己的显示对象表示,在隐藏的“登台”画布上单独呈现(意味着一次一个)。渲染后立即在可见画布上的先前图层之上绘制一个图层,以便在渲染期间可以将不同的图像过滤器独立应用于每个图层。
我遇到的问题是,当尝试从 oCanvas 对象的 canvasElement 中提取图像时,生成的图像永远不会有透明背景。例如:假设我有一个 50x50 的画布,它已经过 oCanvas.create() 处理,但有 display: none; (这用作渲染画布)和另一个没有 oCanvas 实例的画布(相同尺寸)。我正在尝试做这样的事情(伪代码):
visibleCanvas.getContext("2d").drawImage(MyOcanvasCore.canvasElement, 0, 0);
我也尝试过使用URL = MyOcanvasCore.canvasElement.toDataURL()
然后让我visibleCanvas
用src=url
.
图像总是传输,但它们具有白色背景,即使我在 canvas.create() 期间指定背景:“透明”。因此,它们完全覆盖了所有先前的层。
你对我有什么建议吗?我做错了吗?我尝试使用经典的 drawRect、drawImage 等方法将内容从一个画布转移到另一个画布,并且保留了透明度。这就是为什么我相信它要么是库要么是我的代码。