JavaScriptで最大サイズ以上の画像を縮小して表示する

TinyMCEの拡張プラグインで画像を縮小表示しているものがあったので
画像のサイズをいじれるのだと確信…イロイロといじってみました。

テストケースとして既定の最大サイズを超える画像を最大サイズに縮小します。
今回既定値は横幅250pixとしました。
たくさん失敗しましたが同じような失敗をした人のために失敗ケースも載せています。

とりあえず適当な感じで

<IMG src="image.jpg" align="left"  name="face_image"><br />
<script language="javascript">
    if(document.face_image.width > 250){
        document.face_image.width = 250;
    }
</script>

DOMベースだと

<IMG src="image.jpg" align="left"  id="face_image"><br />
<script language="javascript">
    var img = document.getElementById("face_image");
    if(img.getAttribute("width") > 250){
            img.setAttribute("width",250);
    }
</script>

こんなんでも簡単なHTMLでは動くッちゃー動きましたが
実際に運用しているページに適応してみるとIEで動きません(>_<)

IEは画像のオブジェクトが画像ロード前にも取得できるようです…
コノ場合、widthが0となるのでうまく動いてくれないという感じ
body の onloadで処理しても同じです。

ということで img　の onloadで処理

<IMG src="image.jpg" align="left"  name="face_image" onload="if(document.face_image.width > 250){document.face_image.width = 250;}">

今度はうまくいきました…とおもったら【戻るボタン】や同じ画像が使われている
ページ同士のリンクでまたまたうまく縮小されません(Ｔ_Ｔ）
キャッシュの画像を表示した場合onloadが働かない(loadしてないもんね)ということでしょう

ということで onload　と img タグ直下の script 記述併記を試してみます。
…失敗orz

思い出しました、JavaScriptの開発はコレ(ブラウザ差異…主にIEの独自拡張と気まぐれ)がイヤなんです。
だだっこＩＥなんてfirefoxに駆逐されればいいのにと本気でつぶやいてみましたが
それを待っているわけにもいかないのでアプローチの変更

画像をあらかじめロードしてwidthを指定

<IMG align="left"  name="face_image" ><br />
<script language="javascript">
    if(true){
        var img = new Image();
        img.src = "image.jpg";
        document.face_image.src = img.src;
        if(img.width > 250){
            document.face_${text.text_id}.width=250;
        }
    }
</script>

今度こそIEで安定したみたいです。
…FireFoxで不安定に(T_T)
firefoxでは表示していないimageオブジェクトにサイズはない模様

<IMG src="image.jpg" align="left"  name="face_image" onload="if(document.face_image.width > 250 ){document.face_image.width = 250;}" ><br />
<script language="javascript">
    if(true){
        var img = new Image();
        img.src = "image.jpg";      
        if(img.width > 250){
            document.face_image.width=250;
        }
    }
</script>

2007/09/19　下記サンプルコードにVelocityてんぷれーとのタグが残っていたため上記に修正。うまくいかなかった人ゴメンなさい

<IMG src="image.jpg" align="left"  name="face_image" onload="if(document.face_${text.text_id}.width > 250 ){document.face_${text.text_id}.width = 250;}" ><br />
<script language="javascript">
    if(true){
        var img = new Image();
        img.src = "image.jpg";       
        if(img.width > 250){
            document.face_${text.text_id}.width=250;
        }
    }
</script>

クロスブラウザ開発は難しいですね…
ようやく安定(？)です。

なおwidthと共にheightも指定するのが一般的ですが私の知る限り
JavaScriptで画像サイズを片方だけ変更した場合は縦横の比率を保ったまま
もう片方の値も自動的に変更されます。
(現状のIEとfirefoxはそうです)