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

How do I save canvas display to transparent PNG?

本文关键字：保存 透明 PNG 显示 布显示      更新时间：2023-09-26

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

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

是的，有办法。使用画布context.getImageData获取图像原始数据数组。用它（原始数据）做你需要的（使你需要的任何像素透明），然后使用context.putImageData在画布上渲染数据。然后使用var data = canvas.toDataURL("image/png")获取图像数据。然后你可以这样做：image.src = data ;使用此链接 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData 了解更多信息

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

  1. 在画布上绘制图像。
  2. 侦听鼠标事件，让用户通过连续将新线连接到当前鼠标位置来定义他们想要剪切的区域。
  3. 将 #2 中的每个鼠标点保存在数组中。

  4. 当用户完成其剪切区域的定义后：

    • 清除画布。
    • 使用Arry中保存的点绘制并填充剪切区域。
    • 设置context.globalCompositeOperation='source-in' .此模式将导致任何新绘图仅在新绘制的像素和现有像素重叠且其他所有内容都变得透明的地方出现。通俗地说：新像素将被"裁剪"到用户定义的切口中，新像素不会出现在切口之外。
    • 重绘图像。

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

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

相关文章：