javascript - 获取原始图像进行裁剪，忽略宽度属性？

Question

我的用户可以上传非常大的图像，出于裁剪和显示的目的，我添加了width属性，这样它就可以很好地适应浏览器窗口。实际图像尺寸可以是 - 例如 1920 x 1080 像素。

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

为了计算真实选择框尺寸(如果x坐标为20px，那么在原始全高清图片中将是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">

Answer 1

获取图像本身的宽度/高度，而不是它所包含的 div。

$(window).load(function(){
    $('img.croppable').each(function(){
        var img = new Image();
        img.src =  $(this).src;
        alert(img.width);
    });
});