jsで画像の幅と高さを取得する方法-jsチュートリアル-php.cn

jsで画像の幅と高さを取得する方法

coldplay.xixi

リリース： 2023-02-08 13:59:57

オリジナル

16209 人が閲覧しました

画像の幅と高さを取得するための JS メソッド: 1. onload 後に印刷する; 2. complete と onload を組み合わせて使用する; 3. タイミングループ検出を通じて取得する、コードは [from:check : width:' img .width ',height:' img.heig]。

jsで画像の幅と高さを取得する方法

このチュートリアルの動作環境: Windows 7 システム、JavaScript バージョン 1.8.5、DELL G3 コンピューター。

js で画像の幅と高さを取得する方法:

1. 画像を取得する簡単な方法

// 图片地址 后面加时间戳是为了避免缓存 var img_url = ‘upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'+img.height);

ログイン後にコピー

結果は次のとおりです。次のように:

jsで画像の幅と高さを取得する方法

幅と高さが両方とも 0 になる結果は正常です。これは、画像の関連データが読み込まれる前に、幅と高さがデフォルトで 0 になるためです。このように最適化できます。

2. onload 後、

// 图片地址 后面加时间戳是为了避免缓存 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 加载完成执行 img.onload = function(){ // 打印 alert('width:'+img.width+',height:'+img.height); };

ログイン後にコピー

を出力すると、結果は次のようになります。

jsで画像の幅と高さを取得する方法

onload を介した画像より広く、より高く。ただし、大きな画像の onload は通常遅くなり、現実的ではありません。ただし、画像がブラウザによってキャッシュされている限り、onload をトリガーするために画像の読み込みを待つ必要はほとんどありません。必要なのはプレースホルダーです。したがって、キャッシュから取得するときにこのように書くこともできる人もいます。

3. complete と onload を一緒に混合する

キャッシュ効果をテストするために、次のテストイメージの URL にはタイムスタンプが追加されていないことに注意してください

// 图片地址 var img_url = 'upload/2013/13643608813441.jpg'; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 判断是否有缓存 if(img.complete){ // 打印 alert('from:complete : width:'+img.width+',height:'+img.height); }else{ // 加载完成执行 img.onload = function(){ // 打印 alert('from:onload : width:'+img.width+',height:'+img.height); }; }

ログイン後にコピー

初めて実行するときは、常に onload によってトリガーされます

jsで画像の幅と高さを取得する方法

もう一度更新すると、ほとんどの場合、キャッシュによってトリガーされます

jsで画像の幅と高さを取得する方法

From 言うまでもなく、キャッシュ内の画像の幅と高さを読み取るのは非常に便利で高速です。キャッシュを使用しない onload よりも高速な方法で画像の高さを変更できます。一部の写真は完全にダウンロードされていないにもかかわらず、すでにプレースホルダーがあり、少しずつ読み込まれていることがよくあります。プレースホルダーがあるので、画像リソースサーバーに応答を要求してから返す必要があります。ただし、サーバーが応答して幅と高さのデータを返すとき、onload イベントなどのイベントはトリガーされません。そこで 4 番目のメソッドが生まれました。

4. タイムループ検出による取得

#次の例を見てください。キャッシュからのデータの読み取りを避けるために、各リクエストは次のようになります。タイムスタンプ:

// 图片地址 var img_url = 'upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 定时执行获取宽高 var check = function(){ document.body.innerHTML += ' from:check : width:'+img.width+',height:'+img.height+' '; }; var set = setInterval(check,40); // 加载完成获取宽高 img.onload = function(){ document.body.innerHTML += ' from:onload : width:'+img.width+',height:'+img.height+' '; // 取消定时获取宽高 clearInterval(set); };

ログイン後にコピー

推奨学習: 「

JavaScript ビデオチュートリアル」

以上がjsで画像の幅と高さを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。