4

Web ページが大きな画像を読み込むときにわかるように、ブラウザは読み込みの開始時に画像のサイズ (幅と高さ) を知ることができます。

サイズがわかっているときに呼び出されるイベントをJavascriptで追加する方法を探しています（完全な画像がロードされたときではありません）。metadataloadedビデオに少し似ています。

コード例:

var img = new Image();
img.src = 'images/picture.jpg';

console.log(img.width,img.height);  // 0, 0 (image size is not known yet)

img.addEventListener('imagesizeloaded', () => {
    console.log(img.width,img.height);  //expected: 1024, 768 (for example)
});
4

1 に答える 1

4

サーバーで AJAX コールバックを作成して、メタデータを取得できます。いっそのこと、ファイル名でメタデータを送信します。

jQuery を使用した例 (クライアント):

var img = new Image();
img.src = "images/picture.jpg";

$.get("ajax.php", {action: "getImageSize", url: img.src})
 .success(function(r){
   console.log(r.width, r.height)
 })

サーバー部分は、使用しているサーバー側のテクノロジーによって異なります。それはする必要があります

open the image by its url
read the image metadata
send a JSON response

最悪の場合、ゼロ以外になるまで画像データをポーリングすることもできます。

var img = new Image();
img.src = "images/picture.jpg";

(function testImageSizeKnown(){
  if(img.height && img.width){
    console.log(img.height, imp.width)
  }else{
    setTimeout(testImageSizeKnown, 100) // check every 100 ms
  }
)()
于 2012-10-30T09:20:48.363 に答える