如何在 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中文網其他相關文章！