HTML5 でキャンバスを画像として保存するにはどうすればよいですか?

Canvas.toDataURL() を使用してキャンバスを画像として保存する

HTML5 では、キャンバス要素上で画像を作成および操作できます。キャンバスを画像として保存するには、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 中国語 Web サイトの他の関連記事を参照してください。