【Canvas練習ノート】CanvasをPNG画像ダウンロード – toBlobとsaveAs

2014.07.22 11:00 author: taikiken | 0件のコメント

canvasをPNG画像へキャプチャしダウンロード。

PNG画像へのキャプチャは canvas.toBlob を使います。
ダウンロードは FileSystem API で行います。

canvas.toBlob

HTMLCanvasElement のメソッド toBlob は Blobオブジェクト（画像）を返してくれます。
ただ残念なことに Firefox しかサポートしておらず、polyfill メソッドを用意する必要があります。

w3c: File API#blob
stackoverflow: Which browsers (and versions) support the Canvas.toBlob method?
MDN: HTMLCanvasElement Example: Save toBlob to disk with OS.File (Chrome Context Only)

canvas-toBlob.jsはBrowserがBlobをサポートしていることが前提です。
Blobは IE 9, Android 2.3などではサポートされていません。
caniuse.com Blob

canvas-toBlob.js作者はBlob Cross Browser対策のBlob.jsも用意してくれています。

FileSystem APIでダウンロードします。
IE には saveAs コマンドが用意されています。

Internet Explorer Dev Center: SaveAs

canvas-toBlob.jsのFileSaver.jsを使用しました。
github: FileSaver.js

canvas-toBlob.jsとFileSaver.jsのおかげでcanvasをPNG画像としてダウンロード保存するのはとても簡単でした。
Safari ではファイル名が与えられないようです。

demo

左上のボタンでPNG画像を保存できます。