Is it possible to get the height and width of an image in the file system using JavaScript (i.e. an image that is not part of the DOM)? Or would I have to use JavaScript to inject the image into the DOM and grab the dimensions that way?
是否可以使用JavaScript(即不属于DOM的图像)获取文件系统中图像的高度和宽度?或者我是否必须使用JavaScript将图像注入DOM并以这种方式获取尺寸?
I ask because I'm writing a JavaScript method to render a UI component on the fly generated by Raphaël, which takes three image paths as part of the method parameters. These are then used to render the aforementioned UI component, and I need the dimensions of the images for positioning purposes.
我问,因为我正在编写一个JavaScript方法来快速渲染由Raphaël生成的UI组件,它将三个图像路径作为方法参数的一部分。然后将它们用于渲染上述UI组件,并且我需要图像的尺寸以用于定位目的。
Thanks in advance.
提前致谢。
4 个解决方案
#1
9
I think as long as the image has loaded you can grab the width and height - you shouldn't have to inject it into the DOM though. For example:
我认为只要图像已经加载,你就可以获得宽度和高度 - 你不应该把它注入到DOM中。例如:
var tmp = new Image();
tmp.onload = function() {
console.log(tmp.width + ' x ' + tmp.height);
}
tmp.src = 'http://cdn.sstatic.net/*/img/sprites.png?v=4';
#2
4
You cannot necessarily get to "the file system", but you can do this:
您不一定能访问“文件系统”,但您可以这样做:
v = new Image();
v.onload = function() {
alert("size: " + String(v.width) + 'x' + String(v.height));
};
v.src = "http://www.gravatar.com/avatar/96269f5a69115aa0e461b6334292d651?s=32&d=identicon&r=PG";
Would you count that as "adding to the DOM"?
你会把它算作“添加到DOM”吗?
#3
1
You can download image with code:
您可以使用代码下载图像:
var img=new Image(),imgWidth,imgHeight;
img.onerror=img.onload=function(ev) {
ev=ev||event;
if(ev.type==="error") {
imgWidth=imgHeight=-1; // error loading image resourse
}
else {
imgWidth=this.width; // orimgWidth=img.width
imgHeight=this.height; // imgHeight=img.height
}
}
img.src="url_to_image_file";
#4
-5
Is it possible to get the height and width of an image in the file system using JavaScript (i.e. an image that is not part of the DOM)?
是否可以使用JavaScript(即不属于DOM的图像)获取文件系统中图像的高度和宽度?
- No
Or would I have to use JavaScript to inject the image into the DOM and grab the dimensions that way?
或者我是否必须使用JavaScript将图像注入DOM并以这种方式获取尺寸?
- Yes
#1
9
I think as long as the image has loaded you can grab the width and height - you shouldn't have to inject it into the DOM though. For example:
我认为只要图像已经加载,你就可以获得宽度和高度 - 你不应该把它注入到DOM中。例如:
var tmp = new Image();
tmp.onload = function() {
console.log(tmp.width + ' x ' + tmp.height);
}
tmp.src = 'http://cdn.sstatic.net/*/img/sprites.png?v=4';
#2
4
You cannot necessarily get to "the file system", but you can do this:
您不一定能访问“文件系统”,但您可以这样做:
v = new Image();
v.onload = function() {
alert("size: " + String(v.width) + 'x' + String(v.height));
};
v.src = "http://www.gravatar.com/avatar/96269f5a69115aa0e461b6334292d651?s=32&d=identicon&r=PG";
Would you count that as "adding to the DOM"?
你会把它算作“添加到DOM”吗?
#3
1
You can download image with code:
您可以使用代码下载图像:
var img=new Image(),imgWidth,imgHeight;
img.onerror=img.onload=function(ev) {
ev=ev||event;
if(ev.type==="error") {
imgWidth=imgHeight=-1; // error loading image resourse
}
else {
imgWidth=this.width; // orimgWidth=img.width
imgHeight=this.height; // imgHeight=img.height
}
}
img.src="url_to_image_file";
#4
-5
Is it possible to get the height and width of an image in the file system using JavaScript (i.e. an image that is not part of the DOM)?
是否可以使用JavaScript(即不属于DOM的图像)获取文件系统中图像的高度和宽度?
- No
Or would I have to use JavaScript to inject the image into the DOM and grab the dimensions that way?
或者我是否必须使用JavaScript将图像注入DOM并以这种方式获取尺寸?
- Yes