Javascript 确定图像跨浏览器的原始大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1944280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Determine original size of image cross browser?
提问by Pekka
Is there a reliable, framework independent way of determining the physical dimensions of a <img src='xyz.jpg'>resized on the client side?
是否有一种可靠的、独立于框架的方法来确定<img src='xyz.jpg'>客户端调整大小的物理尺寸？
回答by Gabriel McAdams
You have 2 options:
您有 2 个选择：
Option 1:
选项1：
Remove the widthand heightattributes and read offsetWidthand offsetHeight
删除width和height属性并读取offsetWidth和offsetHeight
Option 2:
选项 2：
Create a JavaScript Imageobject, set the src, and read the widthand height(you don't even have to add it to the page to do this).
创建一个 JavaScriptImage对象，设置src，然后读取width和height（您甚至不必将它添加到页面来执行此操作）。
function getImgSize(imgSrc) {
var newImg = new Image();
newImg.onload = function() {
var height = newImg.height;
var width = newImg.width;
alert ('The image size is '+width+'*'+height);
}
newImg.src = imgSrc; // this must be done AFTER setting onload
}
Edit by Pekka: As agreed in the comments, I changed the function to run on the ′onload′ event of the image. Otherwise, with big images, heightand widthwould not return anything because the image was not loaded yet.
由 Pekka 编辑：正如评论中所同意的，我将函数更改为在图像的“onload”事件上运行。否则，大图像，height而width不会因为在拍摄时尚未加载任何回报。
回答by Bugster
Images (on Firefox at least) have a naturalWidth/height property so you can use img.naturalWidthto get the original width
图像（至少在 Firefox 上）具有naturalWidth/height 属性，因此您可以使用它img.naturalWidth来获取原始宽度
var img = document.getElementsByTagName("img")[0];
img.onload=function(){
console.log("Width",img.naturalWidth);
console.log("Height",img.naturalHeight);
}
回答by Myles
You can preload the image into a javascript Image object, then check the width and height properties on that object.
您可以将图像预加载到 javascript Image 对象中，然后检查该对象的宽度和高度属性。
回答by Roman
/* Function to return the DOM object's in crossbrowser style */
function widthCrossBrowser(element) {
/* element - DOM element */
/* For FireFox & IE */
if( element.width != undefined && element.width != '' && element.width != 0){
this.width = element.width;
}
/* For FireFox & IE */
else if(element.clientWidth != undefined && element.clientWidth != '' && element.clientWidth != 0){
this.width = element.clientWidth;
}
/* For Chrome * FireFox */
else if(element.naturalWidth != undefined && element.naturalWidth != '' && element.naturalWidth != 0){
this.width = element.naturalWidth;
}
/* For FireFox & IE */
else if(element.offsetWidth != undefined && element.offsetWidth != '' && element.offsetWidth != 0){
this.width = element.offsetWidth;
}
/*
console.info(' widthWidth width:', element.width);
console.info(' clntWidth clientWidth:', element.clientWidth);
console.info(' natWidth naturalWidth:', element.naturalWidth);
console.info(' offstWidth offsetWidth:',element.offsetWidth);
console.info(' parseInt(this.width):',parseInt(this.width));
*/
return parseInt(this.width);
}
var elementWidth = widthCrossBrowser(element);
回答by Wagner Bertolini Junior
Just changing a little bit Gabriel's second option, to be more easy to use:
只需稍微更改 Gabriel 的第二个选项，使其更易于使用：
function getImgSize(imgSrc, callback) {
var newImg = new Image();
newImg.onload = function () {
if (callback != undefined)
callback({width: newImg.width, height: newImg.height})
}
newImg.src = imgSrc;
}
Html:
网址：
<img id="_temp_circlePic" src="http://localhost/myimage.png"
style="width: 100%; height:100%">
Sample call:
示例调用：
getImgSize($("#_temp_circlePic").attr("src"), function (imgSize) {
// do what you want with the image's size.
var ratio = imgSize.height / $("#_temp_circlePic").height();
});
