如何使用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格式即可。