2008年11月26日
画像のサイズ指定違いを可視化するGreasemonkeyスクリプトのバージョンアップとブックマークレット
JavaScript, Greasemonkey, ブックマークレット
画像のサイズ指定違いを可視化するGreasemonkeyスクリプト - inamenaiの日記で作った画像のサイズ指定違いを可視化するGreasemonkeyスクリプトをバージョンアップしてみました。
インストールはこちらから⇒インストールする
レイアウト目的で使われる1px*1pxの画像のサイズ変更の場合と、サムネイルなどのような縦横比を保持したままの拡大・縮小の場合は、それぞれチェックするかしないかを選べるようにしました。デフォルトではどちらもチェックしないに設定してあります。変更する場合はソース中の定数を直接書き換えてください。
また、ブックマークレット版も作ってみました。Greasemonkey版より多少簡易化してありますが同じように使えます。画像の読み込みが終了してから実行してください。Firefox3.0.4、Safari3.1.2、IE7で動作確認。
javascript:(function(){var imageList=document.getElementsByTagName('img');for(var i=0;i<imageList.length;i++){if(imageList[i].naturalWidth==0){continue;}if(!imageList[i].naturalWidth){var newImg=new Image();newImg.src=imageList[i].src;imageList[i].naturalWidth=newImg.width;imageList[i].naturalHeight=newImg.height;}checkSize(imageList[i]);}function checkSize(img){if(!(img.width==img.naturalWidth)||!(img.height==img.naturalHeight)){if(img.naturalWidth==1&&img.naturalHeight==1){return;}if(img.height!=0&&img.naturalHeight!=0&&img.width/img.height==img.naturalWidth/img.naturalHeight){return;}img.style.border='3px solid #ff0000';}}})();
トラックバック - http://d.hatena.ne.jp/inamenai/20081126/p1
リンク元
- 10 http://10.8.1.15/users/fukuoka/
- 7 http://twitter.com/inamenai
- 6 http://blog.inasphere.net/
- 6 http://inasphere.net/
- 6 http://www.google.co.jp/search?q=inamenai&sourceid=navclient-ff&ie=UTF-8&rlz=1B3GGGL_jaJP249JP250
- 5 http://news.atode.cc/?d=20081014
- 4 http://search.yahoo.co.jp/search?p=GreaseMonkey+画像のサイズ&ei=UTF-8&fr=mozff&x=wrt&meta=vc=
- 4 http://www.google.co.jp/search?hl=ja&safe=off&client=firefox-a&rls=org.mozilla:ja:official&q=greasemonkey+縦横比&btnG=検索&lr=lang_ja
- 3 http://b.hatena.ne.jp/entry/d.hatena.ne.jp/inamenai/20081126/p1
- 3 http://www.google.co.jp/search?q=greasemonkey+画像&lr=lang_ja&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&client=firefox-a
