画像の原寸で処理を分岐するという機能を実装したかったのですが、色々と調べてみたところブラウザごとの制約など、条件が厳しいことが発覚しました。
そこで、なんとか簡単に原寸を取得できないかと思って工夫したので、忘備しておこうと思います。
ブラウザごとの制約について
naturalWidth、naturalHeightという、そのままなプロパティが存在していますが、利用できるのは以下のブラウザに限定されます。
- Chrome
- Safari
- Firefox
- Edge
また、IEか…と思ってしまいますね。
残念ながらOperaでも利用できないようです（たまに使う）。
読み込んだままでは厳しい
表示された時点で様々なスタイルが適用されることもあり、naturalWidth、naturalHeightを利用できないブラウザに対応するには、ひと工夫必要です。
ひとつめは「CSSをクリアしてしまう」という方法。
個人的にはいろいろと影響がありそうなので避けたいところです。
ということで、クリーンな状態の画像を用意することにしました。
$tmp_img = $('<img>').attr('src', 'hoge.jpg');これで $tmp_img が、hoge.jpg を読み込んだ直後の状態になります。
画像の原寸を取得してみる
さて、画像の原寸を取得してみましょう！
naturalWidth = $tmp_img[0].width;
naturalHeight = $tmp_img[0].height;たまにありますね、配列で「0」を指定しないと要素にアクセスできない現象…
不勉強なので、なぜ発生するのかいまだに理解が追い付いていません。
が、取得できたので問題なしとしましょう！
この程度のTips、わざわざ書き留めるようなものでもないと思うのですが、結局やりたいことができなかったので、ソースから消してしまう予定です。
もったいないので投稿しておきます(笑)