如何將畫布顯示保存爲透明PNG？

Question

如果您點擊運行代碼片段在this link，它顯示了一個很酷的用法<canvas>您可以在其中「剪切」圖像的一部分（只需將圖像上的鼠標拖動到「剪切」）。我只是好奇，是否有任何方法可以將圖像的「剪切」部分保存爲透明的PNG（即畫布上白色的所有東西都是透明的）。

如果有人能指出我正確的方向（或告訴我它不可行），我會很感激。

Answer 1

是的，有一種方法。使用畫布context.getImageData獲取圖像原始數據數組。用它（原始數據）處理你需要的東西（使你需要的任何像素透明），然後使用context.putImageData在畫布上呈現數據。然後使用var data = canvas.toDataURL("image/png")獲取圖像數據。然後你可以這樣做：image.src = data; 使用此鏈接https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData更多信息

Answer 2

這裏展示瞭如何裁剪&保存圖像的用戶拖動缺口快速瀏覽：

1. 畫在畫布上的圖像。
2. 聆聽鼠標事件，並讓用戶通過將新行連續連接到當前鼠標位置來定義他們想切出的區域。
3. 將＃2中的每個鼠標點都保存在一個數組中。

4. 當用戶完成定義其切口區域：

   • 清除畫布。
   • 使用arry中保存的點繪製並填充剪切區域。
   • Set context.globalCompositeOperation='source-in'。只有當新繪製的像素與現有像素重疊並且其他所有東西都變得透明時，此模式纔會導致任何新圖形出現。通常情況下：新像素將被「剪切」到用戶定義的切口中，新的像素不會出現在切口外。
   • 重繪圖像。

結果是所述圖像的第二繪圖將只出現在用戶定義的切口內。其他一切都將是透明的。

最後，您可以使用var url=canvasElement.toDataURL將裁剪後的畫布圖像保存到.png dataURL中。如果你想從這個dataURL獲得一個實際的圖像，你可以var img=new Image()並設置img.src=url。