- PR -

元画像サイズの取得

1
投稿者投稿内容
未記入
大ベテラン
会議室デビュー日: 2008/07/11
投稿数: 182
投稿日時: 2009-03-04 11:55
こんにちは。

JavaScriptで画像サイズを取得し、サムネイル表示したいのですが、Safari3.1 & Chrome1.1では、下記ソースでは取得できません(IE6 & FF3ではOK)。

var _img = new Image();
_img.src = "../test.png";
_imgwidth = (_img.width / 2);
_imgheight= (_img.height / 2);
alert(_imgwidth);

Safari3.1 & Chrome1.1で取得の方法は無いでしょうか？

http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php?topic=28788&forum=28
↑こちらの方のお話ですと、Safariではサムネイル表示できないので、専用のロジックでdrawさせてますが･･。確かに縦・横が取得できても、サムネイルが有効にならなければいけないです。

***********************************************************
このscript処理は表示前にサイズ取得をし、サムネイル表示したいです。
_img.naturalWidth & _img.naturalHeight共に０でした。

[ メッセージ編集済み 編集者: 未記入 編集日時 2009-03-04 12:01 ]
unibon
ぬし
会議室デビュー日: 2002/08/22
投稿数: 1532
お住まい・勤務地: 美人谷　　　　　　　　良回答(20pt)
投稿日時: 2009-03-04 12:11
引用:

未記入さんの書き込み (2009-03-04 11:55) より:
JavaScriptで画像サイズを取得し、サムネイル表示したいのですが、Safari3.1 & Chrome1.1では、下記ソースでは取得できません(IE6 & FF3ではOK)。

var _img = new Image();
_img.src = "../test.png";
_imgwidth = (_img.width / 2);
_imgheight= (_img.height / 2);

Safari や Chrome を使ったことがなく、あまり確認せずに回答しますが、_img.src への代入が非同期でおこなわれるという可能性はないでしょうか？
すなわち、たとえば _img.src への代入をおこなったあと、しばらく経ってから button の onclick などで _img.width や _img.height を取得してもダメでしょうか？

また、画像 "../test.png" にはちゃんとアクセスできているはずであることは確認済みでしょうか？
スフレ
ぬし
会議室デビュー日: 2005/05/27
投稿数: 281
お住まい・勤務地: 東京
投稿日時: 2009-03-04 12:19
Safari/Chromeに限らず、IEでもFirefoxでもその方法ではサイズが取得できないケースがあるはずです。理由は unibon さんが書いてある通りで、srcに代入した後、実際の画像のロードは非同期に行なわれるからです。

IE以外では load イベント、IE では readystatechange イベントで画像のロード完了を知ることができます。

未記入
大ベテラン
会議室デビュー日: 2008/07/11
投稿数: 182
投稿日時: 2009-03-04 12:24
ありがとうございます。

srcをドメイン部も含めて、ブラウザで確認すると確かに取得できました。
非同期･･そうですね。IEでも画像サイズが大きくなれば、取得できないかもしれませんね･･。

この画像をセットしているのは、一覧でして、できれればそのままセットしたいのですが･･。
かつのり
ぬし
会議室デビュー日: 2004/03/18
投稿数: 2015
お住まい・勤務地: 札幌
投稿日時: 2009-03-04 13:10
サムネイル表示を行いたいという目的であれば、方法が既に間違ってますね。
サーバサイドでサムネイル画像と実画像、
それにそれぞれの画像のサイズを管理するのが筋です。

画像ロード後に非同期でサイズ取得して変更すると、
一瞬ちらつくような状態になりませんか？
未記入
大ベテラン
会議室デビュー日: 2008/07/11
投稿数: 182
投稿日時: 2009-03-04 17:28
ありがとうございます。

そうですね！サーバサイドで画像を保持しているので、受け渡せばよいんですね。
目からうろこでした。

ありがとうございます。
1

スキルアップ／キャリアアップ（JOB@IT）