如何在 HTML5 中将画布另存为图像？

使用 Canvas.toDataURL() 将 Canvas 保存为图像

在 HTML5 中，您可以在 canvas 元素上创建和操作图像。要将画布保存为图像，可以使用 canvas.toDataURL() 方法。此方法返回指定图像格式的画布内容的 Base64 编码字符串表示形式。

但是，如果您尝试使用以下代码将画布另存为图像，则可能会遇到问题：

function putImage() {
  var canvas1 = document.getElementById("canvasSignature");
  if (canvas1.getContext) {
    var ctx = canvas1.getContext("2d");
    var myImage = canvas1.toDataURL("image/png");
  }
  var imageElement = document.getElementById("MyPix");
  imageElement.src = myImage;
}

此代码失败，因为它无法正确处理 base64 编码的字符串。要将画布保存为图像，需要使用以下增强代码：

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href = image;

这里，使用replace()方法将base64编码的字符串转换为八位字节流，即与 window.location.href 分配兼容。此代码现在将成功地将画布保存为本地图像。

以上是如何在 HTML5 中将画布另存为图像？的详细内容。更多信息请关注PHP中文网其他相关文章！