やりたかったこと
複数の画像がCanvasで描画されているWebページにおいて、一括でダウンロードできないかと思いつつ、ワンクリックで保存ができるものを作りました。
スクリプト
特定のWebページにある複数のCanvasを一括して画像保存します。
具体的には、特定のクラス名hogeのCanvasを取得し、一個ずつaタグを利用してダウンロードさせます。
※クラス名によらずCanvasすべての場合であれば、canvasと指定できます。
以下の例では、JPEG、品質90で保存します。
function canvasdownload(){
var elements = document.querySelectorAll('.hoge'); // 特定のクラス名のCanvasを全て取得
for(i = 0; i < elements.length; i++){
var a = document.createElement('a');
a.href = elements[i].toDataURL('image/jpeg', 0.90); // 形式と質を指定
a.download = String(i).padStart(3, '0') + '.jpg'; // 連番のゼロパディング
a.click(); // 保存
}
}
canvasdownload();
- 2023/08/18追記：@ss8826さんに１ステートメントで書いた場合のスクリプトをいただきました。ありがとうございます！
document.querySelectorAll('canvas').forEach((e, i) =>
Object.assign(document.createElement('a'), {
href: e.toDataURL('image/jpeg', .9),
download: `${`00${i}`.slice(-3)}.jpg`
}).click());
使い方
- 以下のスクリプト（1行にしたもの）をコピーし、テキストエディタに貼り付けます。
- 目的のWebページ上で開発者ツールを開き、対象のCanvasのクラス名を調べます（特定のクラスのみ抽出したい場合）。
- 特定のクラスのみの場合、
canvasを上記のクラス名に変更します(例：.hoge)。 - 変更したスクリプトをコピーし、新規ブックマークのURL欄にペーストします。名前はわかりやすいものにしておきます。
- Ctrl+Shift+Bでブックマークバーを表示させます。
javascript: function canvasdownload(){ var elements = document.querySelectorAll('canvas'); for(i = 0; i < elements.length; i++){ var a = document.createElement('a'); a.href = elements[i].toDataURL('image/jpeg', 0.90); a.download = String(i).padStart(3, '0'); + '.jpg'; a.click(); } } canvasdownload();
- 1ステートメント（処理は同等）
javascript:document.querySelectorAll('canvas').forEach((e,i)=>Object.assign(document.createElement('a'),{href:e.toDataURL('image/jpeg',.9),download:`${`00${i}`.slice(-3)}.jpg`}).click());
- 目的のWebページを表示し、先ほど作成した「Canvasダウンロード」をクリックします。
- すると、そのWebページにある目的のCanvasが一括でダウンロードフォルダに保存されます。