是否可以获取不在 DOM 中的图像的高度/宽度？

发布于 2024-12-04 18:47:58 字数 229 浏览 1 评论 0原文

是否可以使用 JavaScript 获取文件系统中图像的高度和宽度（即不属于 DOM 的图像）？或者我是否必须使用 JavaScript 将图像注入 DOM 并以这种方式获取尺寸？

我问这个问题是因为我正在编写一个 JavaScript 方法来动态渲染 Raphaël 生成的 UI 组件，该方法将三个图像路径作为方法参数的一部分。然后将它们用于渲染上述 UI 组件，并且我需要图像的尺寸来进行定位。

提前致谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄与心 2024-12-11 18:47:58

我认为只要图像已加载，您就可以获取宽度和高度 - 不过您不必将其注入到 DOM 中。例如：

var tmp = new Image();
tmp.onload = function() {
    console.log(tmp.width + ' x ' + tmp.height);
}
tmp.src = 'http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4';

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:

var tmp = new Image();
tmp.onload = function() {
    console.log(tmp.width + ' x ' + tmp.height);
}
tmp.src = 'http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4';

回复收藏 0 原文

放手` 2024-12-11 18:47:58

你不一定能到达“文件系统”，但你可以这样做：

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";

你会把它算作“添加到 DOM”吗？

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"?

回复收藏 0 原文

素染倾城色 2024-12-11 18:47:58

您可以使用代码下载图像：

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";

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";

回复收藏 0 原文