当前位置：文江博客话题详情

Javascript 可以访问本机图像大小吗？

发布于 2024-07-26 19:16:35 字数 86 浏览 1 评论 0原文

我正在编写一个 jQuery 函数，我想在其中访问图像的本机大小以及页面上为其指定的大小。我想为每个设置一个变量。

这是怎么做到的？

原文

分享到QQ

分享到微博

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

发布评论

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

月牙弯弯 2024-08-02 19:16:36

现代浏览器

当我在 2009 年写下这个答案时，浏览器环境已经大不相同。如今，任何相当现代的浏览器都支持使用 img.naturalWidth 和 img.naturalHeight<的 Pim Jager 的建议 /代码>。看看他的回答。

旧版答案与超旧浏览器兼容

// find the element
var img = $('#imageid');

/* 
 * create an offscreen image that isn't scaled
 * but contains the same image.
 * Because it's cached it should be instantly here.
 */

var theImage = new Image();
theImage.src = img.attr("src");

// you should check here if the image has finished loading
// this can be done with theImage.complete

alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

Modern browsers

When I wrote this answer back in 2009 the browser landscape was much different. Nowadays any reasonably modern browser supports Pim Jager's suggestion using img.naturalWidth and img.naturalHeight. Have a look at his answer.

Legacy answer compatible with super old browsers

// find the element
var img = $('#imageid');

/* 
 * create an offscreen image that isn't scaled
 * but contains the same image.
 * Because it's cached it should be instantly here.
 */

var theImage = new Image();
theImage.src = img.attr("src");

// you should check here if the image has finished loading
// this can be done with theImage.complete

alert("Width: " + theImage.width);
alert("Height: " + theImage.height);

回复收藏 0 原文

我不咬妳我踢妳 2024-08-02 19:16:36

这应该有效：

var img = $('#imageid')[0]; //same as document.getElementById('imageid');
var width = img.naturalWidth;
var height = img.naturalHeight;

naturalWidth 和naturalHeight 返回图像响应的大小，而不是显示大小。

根据 Josh 的评论，这不支持跨浏览器，这可能是正确的，我在 FF3 中测试了这一点

This should work:

var img = $('#imageid')[0]; //same as document.getElementById('imageid');
var width = img.naturalWidth;
var height = img.naturalHeight;

The naturalWidth and naturalHeight return the size of the image response, not the display size.

According to Josh' comment this is not supported cross browser, this might be correct, I tested this in FF3

回复收藏 0 原文

沉睡月亮 2024-08-02 19:16:36

编辑 - 新想法...参见http://jsbin.com/uzoza

  var fixedW = $("#imageToTest").width(); 
  $("#imageToTest").removeAttr("width"); 
  var realW = $("#imageToTest").width(); 
  $("#imageToTest").attr("width", fixedW);

原始答案

请参阅如何获取图像大小（高度和宽度）使用 JavaScript？

var img = $('#imageid'); 

var width = img.clientWidth;
var height = img.clientHeight;

EDIT - new idea... see http://jsbin.com/uzoza

  var fixedW = $("#imageToTest").width(); 
  $("#imageToTest").removeAttr("width"); 
  var realW = $("#imageToTest").width(); 
  $("#imageToTest").attr("width", fixedW);

ORIGINAL ANSWER

see How to get image size (height & width) using JavaScript?

var img = $('#imageid'); 

var width = img.clientWidth;
var height = img.clientHeight;

回复收藏 0 原文

不忘初心 2024-08-02 19:16:36

我正在添加一种方法来完成此任务，并确保所有浏览器都支持。几乎所有浏览器都支持 naturalWidth 和 naturalHeight（Internet Explorer 8 及更低版本除外）。

由于 IE 8 及更低版本在尝试检索尺寸值时会返回可见图像的尺寸而不是自然尺寸，因此需要一个小的解决方法来获取来自杰克·摩尔的示例。

function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

我将其设置为支持传递图像 ID 值或 ID 名称。

用法：

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img"  width="400">

naturalSize("some_img");

// Returns: Object {width: 731, height: 387}

或者

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png"
onclick="aaa=naturalSize(this);alert('Size: '+aaa.width+'x'+aaa.height);">

// Displays: Size: 731x387

请确保在调用此函数之前确保图像已加载，无论是使用 onload 还是在将其添加到 DOM 时触发。

测试用：
Windows XP - 火狐 1.5、IE 8
Windows 7 - IE 9、Chrome 56
安卓 6.0.1 - Chrome 50
Android 5.1.1 - Opera Mini 7.6、Dolphin 10.3

完整代码示例：

<!DOCTYPE html>
<html dir="LTR" lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body class="assignments" onload="run_test();">

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img" width="400">
<textarea id="outbox"></textarea>

<script type="text/javascript">
function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

function run_test() {
 var a = naturalSize("some_img");
 document.getElementById("outbox").innerHTML = "Size: "+a.width+"x"+a.height;
}
</script>
</body></html>

I'm adding a way to accomplish this and be sure that there is support for all browsers. Pretty much all browsers support naturalWidth and naturalHeight except for Internet Explorer 8 and below.

Since IE 8 and below would return the size of the visible image and not the natural size when using trying to retrieve size values, a small workaround is needed to get the full size dimensions which came from an example by Jack Moore.

function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

I set this up to support passing either the image ID value or the name of the ID.

Usage:

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img"  width="400">

naturalSize("some_img");

// Returns: Object {width: 731, height: 387}

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png"
onclick="aaa=naturalSize(this);alert('Size: '+aaa.width+'x'+aaa.height);">

// Displays: Size: 731x387

Be sure to make sure the image is loaded before calling this, whether by using onload or triggering upon adding it to the DOM.

Tested with:
Windows XP - Firefox 1.5, IE 8
Windows 7 - IE 9, Chrome 56
Android 6.0.1 - Chrome 50
Android 5.1.1 - Opera Mini 7.6, Dolphin 10.3

Full code example:

<!DOCTYPE html>
<html dir="LTR" lang="en"><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body class="assignments" onload="run_test();">

<img src="http://c64.exitof99.com/ims/VicGauntlet2013.png" id="some_img" width="400">
<textarea id="outbox"></textarea>

<script type="text/javascript">
function naturalSize(imageid) {
 imageid = (imageid.src ? imageid : document.getElementById(imageid));
 if (document.documentMode < 9) {
  var img = new Image();
  img.src = imageid.src;
  return {width: img.width,height: img.height};
 }
 return {width: imageid.naturalWidth,height: imageid.naturalHeight};
}

function run_test() {
 var a = naturalSize("some_img");
 document.getElementById("outbox").innerHTML = "Size: "+a.width+"x"+a.height;
}
</script>
</body></html>

回复收藏 0 原文

赠意 2024-08-02 19:16:36

我的解决方案是编写一个 Web 服务来获取/下载图像，然后获取其分辨率并将其返回为 {width: x,height:y}。然后您可以使用 $.ajax 或等效项来调用它来检索它。

或者，您可以使用将图像添加到隐藏的 div

// e.g. don't set width and height
$("#hiddendiv").html("<img src='theurl'>");

，然后获取 div 的宽度/高度，尽管我还没有尝试过。

My solution would be to write a web service that gets/downloads the image, and then gets its resolution and returns it as {width: x,height:y}. Then you call it with $.ajax or equivalent to retrieve this.

Alternatively you could add the image to a hidden div using

// e.g. don't set width and height
$("#hiddendiv").html("<img src='theurl'>");

And then get the div's width/height though I haven't tried it.

回复收藏 0 原文

~没有更多了~

关于作者

失与倦＂

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

Javascript 可以访问本机图像大小吗？

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

发布评论

评论（5）

现代浏览器

旧版答案与超旧浏览器兼容

Modern browsers

Legacy answer compatible with super old browsers

关于作者

相关话题

热门标签

推荐作者

謌踐踏愛綪

开始看清了

高速公鹿

alipaysp_PLnULTzf66

热情消退

白色月光

友情链接

Javascript 可以访问本机图像大小吗？

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

发布评论

评论（5）

现代浏览器

旧版答案与超旧浏览器兼容

Modern browsers

Legacy answer compatible with super old browsers

关于作者

相关话题

热门标签

推荐作者

謌踐踏愛綪

开始看清了

高速公鹿

alipaysp_PLnULTzf66

热情消退

白色月光

友情链接

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