ブックマークレット画像を抽出して一覧を表示する (view_image)

いつも使ってるブックマークレットを掲載します
スマートフォンでブラウザを使っている際にホームページに使われている画像を一覧で確認したくなったため作成しました。

ページに使われている画像を抽出して一覧を表示するブックマークレット

ページに使われている画像を抽出して一覧を表示するブックマークレット

以下のリンクをブックマークに登録すると利用できます。またリンクをクリックすると動作の確認が行えます

view_image

コード

リンクをクリックする（ブックマークレットを実行する）とページで使われている画像を抽出し、新しいタブに一覧が表示されます。表示された画像はそれぞれ保存することもできます。

Twitterなど、動的に画像が読み込まれるページでは、抽出したい画像を表示してこのブックマークレットを実行すると抽出できます

一覧に表示される情報

ブックマークレットを実行すると新しいタブで次のような画面が開きます。

表示される内容は以下の通りです

画像
サイズ(取得に失敗する場合があります)
URL

抽出できる画像の種類

imgタグ
背景画像(background-image)
base64エンコードされた画像
svgタグ内のimage要素

※canvasには対応していません
表示される画像は、画像の種類によって色の違うボーダーで囲んで表示されます。

PCとAndroidのChrome、iOSのSafariで動作確認しました。

ＰＣでの登録・使い方

登録方法

上のリンクを右クリックし→「このリンクをブックマーク」で追加または、コードをコピーしてブックマーク登録の際のURLに貼り付て登録します

使い方

画像を抽出したいページを表示し、登録したブックマークを開くと利用できます

Android( Chrome )での登録・使い方

登録方法

ブックマークレットは直接登録できないため、「適当なページをブックマーク」→「登録したブックマークを編集」して登録します

１、上のコードをコピーします

２、適用なページをブックマークします。ブラウザの画面上の★アイコンをタップします。タップすると★アイコンが青色に変わりブックマークに追加されます。続いてもう一度★アイコンをタップしてブックマーク編集画面を表示します。

３、ブックマーク編集画面では、名前には自分の入力しやすい名前、URLにはコピーしたコードを貼り付けます（変更した内容は左上の戻るボタンを押すと反映されます）

使い方

画像を抽出したいページを表示し、ブラウザの画面上のURL枠に登録したブックマークレットの名前を入力し、表示される候補をタップすると利用できます

iPhone( iOS Safari )での登録・使い方

登録方法

ブックマークレットは直接登録できないため、「適当なページをブックマーク」→「登録したブックマークを編集」して登録します

１、上のコードをコピーします

２、適用なページをブックマークします。ブックマークはブラウザの画面下の真ん中のアイコンをタップ→「ブックマークを追加」をタップ→「保存」をタップすると追加できます

３、ブラウザの画面下の本のアイコンをタップするとブックマーク一覧が表示されるため、先ほど登録したブックマークが追加されていることを確認します

４、次に画面下の「編集」をタップ→ 先ほど登録したブックマークをタップします。

５、ブックマークを編集が表示されるため、上側には自分のわかりやすい名前、下側にはコピーしたコードを貼り付けます（変更した内容は左上「＜お気に入り」から戻るだけで反映されます）

使い方

画像を抽出したいページを表示し、ブラウザの画面下の本のアイコンをタップ→ブックマーク一覧から登録したブックマークレットをタップすると利用できます

画面下の本アイコンをタップ

javascript:(function(d,t,e,h,b,s,f,p,i,j){h='';t=d.getElementsByTagName('*');for(i=0;i<t.length;i++){f=0;s=t[i].currentStyle||d.defaultView.getComputedStyle(t[i],'');if(t[i].tagName=='IMG'){b=t[i].src;f=1;e=c('i',b);}if(t[i].tagName=='image'){b=t[i].getAttributeNS('http://www.w3.org/1999/xlink','href');f=1;e=c('s',b);}if(s.backgroundImage!='none'){b=s.backgroundImage.replace(/(%20|url\(|\)|")/g,''%20);if(b.match(/(-gradient)/)==null){p=b.split(',');f=1;e='';for(j=0;j<p.length;j++){e+=c('b',p[j]);}}}if(f&&h.indexOf(b)==-1){h+=e;}}function%20c(i,b,r){r=new%20Image();r.src=b;if(b.match(/(data:image)/)){b='data:image';}return%20'<div><img%20id="'+i+'"%20src="'+r.src+'"%20/><br%20/>'+r.width+'%C3%97'+r.height+'<br%20/><nbr>'+b+'</nbr></div>';}var%20p%20=%20window.open();p.document.open();p.document.write('<html><head><title></title><style%20type="text/css">body{background-color:#ddd;}div{margin-bottom:1em;}#s{border:solid%203px%20#f00;}#i{border:solid%203px%20#00f;}#b{border:solid%203px%20#0f0;}</style></head><body>'+h+'</body></html>');p.document.close();})(document);