Canvas.toDataURL() が画像を保存しないのはなぜですか?

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:

<div id="createPNGButton">
  <button onclick="putImage()">Save as Image</button>
</div>

解決策:

画像をバイナリ ストリームに変換するステップが欠落していますコード。コードを次のように変更します:

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

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

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

以上がCanvas.toDataURL() が画像を保存しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。