如何将画布显示保存为透明PNG？

Question

如果您点击this link中的运行代码段，它会显示<canvas>的酷炫用法，您可以在其中“剪切”部分图片（只需拖动您的鼠标在图像上“剪切”）。我只是好奇是否有任何方法可以保存图像的最终“剪切”部分，如透明的PNG（即画布中白色的所有内容都是透明的）。

如果有人能指出我正确的方向（或告诉我这是不可行的），我会很感激。

Answer 1

是的，有办法。使用canvas 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

这是一个快速浏览，介绍如何裁剪＆amp;保存用户拖动的图像剪切：

1. 在画布上绘制图像。
2. 收听鼠标事件，让用户通过不断将新行连接到当前鼠标位置来定义要剪切的区域。
3. 将＃2中的每个鼠标点保存在一个数组中。

4. 当用户完成切割区域的定义时：

   • 清除画布。
   • 使用arry中保存的点绘制并填充剪切区域。
   • 设置context.globalCompositeOperation='source-in'。此模式将导致任何新图形仅在新绘制的像素与现有像素重叠且其他所有内容均为透明的情况下显示。一般来说：新像素将被剪裁＆＃34;进入用户定义的剪切区域，新的像素不会出现在剪切区外。
   • 重绘图像。

结果是图像的第二次绘制仅出现在用户定义的剪切块内。其他一切都是透明的。

最后，您可以使用var url=canvasElement.toDataURL将裁剪的画布图像保存到.png dataURL中。如果您想要此dataURL中的实际图片，可以var img=new Image()并设置img.src=url。