我的用户可以上传非常大的图像,并且出于裁剪和显示目的,我正在添加width
属性,以便它可以很好地适合浏览器窗口。实际图像尺寸可以是 - 比如说 1920 x 1080 像素。
<!-- width added for display purpose -->
<img class="croppable" src="images/fhd.jpg" width="640" />
为了计算真实的选择框尺寸(如果x
坐标是 20 像素,那么在原始全高清图片中将是 60 像素),我需要在应用属性之前获取完整的图像尺寸。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);
});
});
请不要将此标记为重复,因为我所要求的与简单的图像宽度/高度检索完全不同(实际上有效)。
编辑:克里斯 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">