0

ユーザーは非常に大きな画像をアップロードできます。トリミングと表示の目的で、属性を追加widthして、ブラウザー ウィンドウにうまく収まるようにします。実際の画像サイズは、1920 x 1080 px などです。

<!-- width added for display purpose -->
<img class="croppable" src="images/fhd.jpg" width="640" />

実際の選択ボックスの寸法を計算するには(x座標が 20px の場合、元のフル HD 画像では 60px になります) 、属性を適用する前にフル イメージ サイズを取得する必要があります。width

問題は、幅属性を考慮して、これが値として 640 を返すことです。

// Important: Use load event to avoid problems with webkit browser like safari
// when using cached images
$(window).load(function(){
    $('img.croppable').each(function(){
        alert(this.width);
    });
});

私が求めているのは、単純な画像の幅/高さの取得 (実際には機能します) とは完全に異なるため、これを重複としてフラグ付けしないでください。

編集: Chris G. ソリューションが機能していないようです:

$(window).load(function(){
    $('img.croppable').each(function(){
        console.log(this.src);
        var original = new Image(this.src);
        console.log(original);
        $("#original_w").text(original.width); // Temp, more images to be added
        $("#original_h").text(original.height); // Temp, more images to be added
    });
});

コンソール出力:

http://localhost/DigitLifeAdminExtension/images/pillars-of-creation.jpg
<img width="0">
4

4 に答える 4

3

画像に含まれるdivではなく、画像自体の幅/高さを取得します。

$(window).load(function(){
    $('img.croppable').each(function(){
        var img = new Image();
        img.src =  $(this).src;
        alert(img.width);
    });
});
于 2011-12-14T22:19:46.180 に答える
0

属性を削除し、幅を取得して、属性を再度配置することができます。

var $img = $(img);
var oldWidth = $img.attr("width");
var imgWidth = $img.removeAttr("width").width();

$img.width(oldWidth);

しかし、Chris G.の答えもうまく機能していると思います。幅を取得しようとするときに、ロードされることを確認してください。

img.onload = function() {
    if (!img.complete) return; // IMG not loaded
    width = img.width;
   imgManipulationGoesHere();
}
于 2011-12-14T22:31:35.720 に答える
0

最新のブラウザと IE9 で動作します。

$(window).load(function(){
    $('img.croppable').each(function(){
        alert(this.naturalHeight);
    });
});
于 2011-12-14T22:37:43.923 に答える
0

実用的な解決策は次のとおりです。

$(function(){
    $('img.croppable').each(function () {

        var original = new Image(this.src);
        original.onload = function () {
            alert(original.src + ': ' + original.width + 'x' +original.height);
        };
    });
});
于 2011-12-14T22:55:04.970 に答える