December 06, 2018

canvas要素をまとめてZIPで保存するブックマークレット

event_noteDecember 06, 2018

CanvasZipブックマークレット

11-03-2019 追記
ジャンプ+などからの画像保存はこのブックマークレットからは行えなくなってしまいました。

このブックマークレットでできること

現在ブラウザで開いているページに存在するcanvas要素を一括でpng画像として取得ZIPファイルとしてダウンロードすることができます。

canvas要素?

canvasはHTML5以降のHTMLで使える、描画のための要素です。JavaScriptなどと組み合わせることで、動的に描画内容を変更できるのが面白いところだと思います。例えば、以下のCanvasという文字の描画は、canvas要素で行っています。この動くサンプルには、codepen (https://codepen.io/tholman/pen/lDLhk)で公開されているコードを一部改変し使わせてもらってます。

主な用途

canvas要素が多く使われているWebページで、そのページの描画内容を一括してダウンロードしたいときに便利です。

使い方

ブックマークにスクリプトを登録

ブックマークレットは、ブックマークにスクリプトを登録し、ブックマークからそのリンクをクリックして実行します。まずはこの青いボタンのリンクをブックマークに登録してください。

ブックマークへの登録方法 (Chromeの場合)

ブックマークへの登録の仕方ですが、Chromeの場合は以下のように、ブックマークバーを設定から表示させて、ドラッグ&ドロップするのが手軽です。

Chromeでのブックマークへの登録

ブックマークへの登録方法 (Firefoxの場合)

Firefoxの場合はボタンを右クリックして、"このリンクをブックマーク"から登録するのが早いです。

Webページでブックマークレットを実行

canvas要素のあるWebページを、ブラウザのタブで開いている状態にしてから、先ほどブックマークに登録したCanvasZip BookmarkletをクリックすればOKです。
クリックしても反応がない場合は、もう一度ブックマークからCanvasZip Bookmarkletをクリックしてしばらく待ってみてください。
上手くいくと、canvas.zipというファイル名でダウンロードされます。

このスクリプトでは、現在表示されているHTML内に存在するcanvas要素しか、画像としてダウンロードできません。

このブックマークレットは、サイトやサービスの仕様変更により今後使えなくなる可能性もありますので予めご注意ください。

また、スマートフォンや、使用するブラウザによっては、スクリプトが上手く動作しないことがあるかも知れません (IEでは動作しませんでした)。

このブックマークレットのソースや参考サイトなど

  • スクリプトのソース

このブックマークレットでは、CDNJSというホスティングサービスから、JSZipとFileSaverという二つのJSプラグインを読み込んでいます。
JSZipの扱い方についてはこちらのサイトが参考になりました。

なんとなく必要かもしれない気がしたので、前回の続きとして実験。 実現したかったのは、生成した画像をZIPファイルに圧縮してダウンロードさせる機能。JSZipという素敵なライブラリを発見したので、それを使わせていただく。 色をグリグリ変えてダウンロードボタンを押すと、その色のSVGとPNG画像が落とせる。 SVGとPNGをZIPでダウンロード Attacker Created with Sketch. コードはJSZipの処理が追加になっているだけ。 [JavaScriptで出力した画像ファイルをZip圧縮してダウンロード](https://gist.github.com/681ac3ec0fd&

配列操作については以下のサイトが参考になりました。

これまでライブラリに頼ることが多かった配列操作も、IE9以降の主要ブラウザがECMAScript5をサポートした現在、ネイティブのJavaScriptの機能で多くに対応できます。この記事では配列要素のすべてに処理を行うメソッドを解説します。