イナヅマTVログ

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

| 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

https://github.com/eligrey/canvas-toBlob.js/
canvas-toBlob.jsを使用しました。

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

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

saveAs

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

Internet Explorer Dev Center: SaveAs

html5rocks: FileSystem API について知る

FileSaver.js

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

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

demo
inazumatv (4)

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

コメントを残す