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

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では動作しませんでした)。

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

スクリプトのソース

javascript:(function(){ var s = document.createElement("script"); s.src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"; document.body.appendChild(s); var sb = document.createElement("script"); sb.src = "https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"; document.body.appendChild(sb); zipData = new JSZip(); var b = Object.values( Array.from( document.body.querySelectorAll( "canvas" ) ) ); console.log( b ); var d= []; b.forEach(function (value, index) { d[index] = b[index].toDataURL().replace(/^.*,/, ""); zipData.file(index + 1 + ".png", d[index], { base64: true }); console.log(index + 1 + "番目 : " + value); console.log( d[index] ); }); zipData.generateAsync({type:"blob"}) .then(function (blob) { saveAs(blob, "canvas.zip"); }); })()

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

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

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

teratail[テラテイル]

https://teratail.com/questions/114571

【JS】HTML上に存在するIMG要素を全て取得し、src属性が重複するものを削除したオブジェクトを取得したい。｜teratail