inamenaiの日記

画像のサイズ指定違いを可視化する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';}}})();

Permalink | コメント(0) | トラックバック(0)