画像の幅と高さを取得する js メソッド_javascript スキル

この記事では、画像の幅と高さを取得するためのさまざまな 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);

結果は次のとおりです:

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

2. オンロード後に印刷します

// 图片地址 后面加时间戳是为了避免缓存
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);
};

結果は以下の通りです

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 によってトリガーされます

再度更新すると、ほぼ常に キャッシュがトリガーされます

言うまでもなく、キャッシュから画像の幅と高さを読み取るのは非常に便利で高速です。今日私たちが解決しようとしているのは、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);
};

ファイアフォックス

IE7 8 9 10

クロム

上記のテストにより、画像の幅と高さを定期的に検出する方法は、印刷行数が多いほど、40 ミリ秒に 1 回実行されると、onload 時間が長くなることがわかりました。画像の幅は基本的に 100 ミリ秒で取得できます。Chrome は最初のループでもデータをすでに取得しています。上記のデータの分析から、画像の幅と高さが 0 より大きい限り、正しい画像の幅と高さが取得されたことを意味するとタイミング関数で実際に判断できます。時間をマークして、タイミングまたはオンロードを通じて幅と高さを取得するのにどれくらいの時間がかかるかを確認しましょう。

// 记录当前时间戳
var start_time = new Date().getTime();
 
// 图片地址
var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time;
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
 // 只要任何一方大于0
 // 表示已经服务器已经返回宽高
 if(img.width>0 || img.height>0){
 var diff = new Date().getTime() - start_time;
 document.body.innerHTML += '
from:check : width:'+img.width+',height:'+img.height+', time:'+diff+'ms
';
 clearInterval(set);
 }
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
 var diff = new Date().getTime() - start_time;
 document.body.innerHTML += 'from:onload : width:'+img.width+',height:'+img.height+', time:'+diff+'ms';
};

FireFox:

IE

クロム

これは 2560 * 1600 サイズの画像です。各ブラウザの実行結果がわかります。画像サイズの取得はほぼ 200 ミリ秒以内であり、onload は少なくとも 5 秒であることがわかります。画像の幅と高さを取得するのは非常に便利です。

js を使用して画像の幅と高さを取得するさまざまな方法の長所と短所を、多数の例を通じて分析および比較しました。ニーズに応じて慎重に選択してください。