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

【问题标题】：How do I save canvas display to transparent PNG?如何将画布显示保存为透明 PNG？
【发布时间】：2016-03-08 00:43:35
【问题描述】：

如果您单击this link 中的Run code sn-p，它会显示<canvas> 的一个很酷的用法，您可以在其中“剪切”部分图像（只需将鼠标拖到要“剪切”的图像）。我只是好奇是否有任何方法可以将生成的图像“剪切”部分保存为透明的 PNG（即画布中的所有白色都是透明的）。

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

【问题讨论】：

标签： javascript html canvas

【解决方案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 了解更多信息

【讨论】：

【解决方案2】：

下面是一个快速浏览，展示了如何裁剪和保存用户拖动的图像剪切：

在画布上绘制图像。
监听鼠标事件，让用户通过不断地将新行连接到当前鼠标位置来定义他们想要剪切的区域。
将 #2 中的每个鼠标点保存在一个数组中。
当用户完成定义他们的剪切区域时：
- 清除画布。
- 使用阵列中保存的点绘制并填充剪切区域。
- 设置context.globalCompositeOperation='source-in'。此模式将导致任何新图形出现仅在新绘制的像素和现有像素重叠并且其他所有内容都变为透明的地方。通俗地说：新像素将被“剪裁”到用户定义的切口中，新像素不会出现在切口之外。
- 重绘图像。

结果是图像的第二个绘图将仅出现在用户定义的切口内。其他一切都是透明的。

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

【讨论】：