canvas.toDataURL() による画像保存の問題の解決

canvas.toDataURL() を利用してキャンバスを画像として保存しようとした場合問題が発生する可能性があります。この状況に対処する方法は次のとおりです:

問題と解決策

問題:

次のとおりです。キャンバス画像を保存するためのコードですが、機能しません:

// Canvas named "canvasSignature"

JavaScript:

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;
}

HTML5:


  Save as Image

解決策:

画像をバイナリ ストリームに変換するステップがコードにありません。コードを次のように変更します:

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

window.location.href = image; // Save locally

コードは、画像をバイナリ ストリームに変換してファイルとして扱うことで、画像をローカルに保存できます。