キャンバス出力を画像としてキャプチャ: Canvas.toDataURL() による課題を解決する

HTML5 アプリケーション開発時のキャンバスのコンテンツのキャプチャ画像として表示することは重要なタスクになる可能性があります。 Canvas.toDataURL() メソッドはこれを実現する手段を提供しますが、その実装で障害が発生する場合があります。

よくある落とし穴

canvas でよく発生する問題が 1 つあります。 toDataURL()メソッドの使い方を誤ると、保存した画像が正しく表示されなかったり、保存に失敗する場合があります。次のコードの抜粋は、一般的な問題を示しています。

var canvas1 = document.getElementById("canvasSignature");        
var myImage = canvas1.toDataURL("image/png");      

この例では、toDataURL() への呼び出しで完全な MIME タイプが指定されていません。これは「image/png」である必要があります。その結果、生成されたイメージが破損したり使用できなくなる可能性があります。

問題の修正

この問題を修正し、キャンバスを画像に正しく変換するには、次の手順を実行します。完全な MIME タイプは次のように指定する必要があります:

var canvas1 = document.getElementById("canvasSignature");        
var myImage = canvas1.toDataURL("image/png"); 

さらに、画像をローカルにダウンロードすることが目的の場合は、window.location.href プロパティを使用して画像をダウンロード リンクのソースとして設定できます。これは、次のコードを使用して実現できます。

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");  // Convert to Base64 and Replace MIME Type
window.location.href=image; // Set Image as Source for Download

完全な MIME タイプを利用し、window.location.href プロパティを適切に設定することにより、キャンバスのコンテンツを画像として正常に保存し、キャプチャされたファイルを利用できるようになります。必要に応じてアプリケーション内の画像。