关于JS获取图图片长宽的问题，在Chrome下总是为0

Posted 2023-03-15

举例说明吧
var img = new Image();
img.src = "xxx.png"
console.log(img.width + ":" + img.height);

输出- > 0:0

也尝试过判断img.complete是否为true了，但是还是不行。

用img.onload = function()
console.log(img.width + ":" + img.height);
;

仍然为0，求教高手回答
已经确认路径正常，图片为本地图片，已经在html5的CANVAS里画出来了。

假如在页面有一个img标签： <img src="hyzq.jpg" id="test_img" />

编写代码：

var img = document.getElementById("test_img");
alert(img.offsetWidth+","+img.offsetHeight);

打印出来就是 图片的 宽度 和高度。 你可以试一下，Chrome绝对可以。追问

仍然不行，offsetWidth和offsetHeight仍然为0
还有，这个问题是怎么回事？

追答

var img = new Image();
img.src = "szx_dl.jpg";
alert(img.width + ":" + img.height);

我的Chrome测试正常，我的Chrome版本 12.0.742.100

追问

上面的代码我也试了一下，获取过一次正确的大小后又为0了

参考技术A chrome opera 的确都是显示0。。。。你只有把代码放在window.onload 回调函数里 浏览器彻底加载完毕dom树 js文件 图片。。这时候变量就可以显示出来 。。临时嵌入在document里的script 图片长宽变量死活都是0。 。。。。因为工程上基本上大家的代码都在$(fn) 里 。。所以不会遇到你这情况。。本回答被提问者采纳 参考技术B 楼主，我照着你的思路在两个浏览器里测试了下，如果src指向的图片不存在，那么ie的表现是一个小红叉，这个小红叉会有28x30的像素，而Chrome则会直接显示0，这个是两个浏览器的处理方式有差异；图片存在的时候两个浏览器的结果是一致的，都能够正确地显示出图片的长宽的。不知道楼主能否确认自己的图片路径是否准确呢追问

是的，是正确的，因为我正在研究HTML5的Canvas，在Canvas里已经画出来了。

追答

你的意思是同样的代码，在ie中有值，在Chrome中没值吗？

追问

不是，用FIREFOX和CHROME都获取不了

追答

你能把你Canvas那段代码贴出来看看吗，有点好奇你是怎么把Canvas的画出来的值给img标签的

追问

var Canvas = document.getElementbyId("Canvas");
var Context = Canvas.getContext("2d");
Context.drawImage(img,x,y);

这样就行了，但必须你的浏览器要支持html5

追答

我是ie9，支持的

追问

不行啊不行=。=

追答

我的测试代码在ie中图片可以在Canvas里面画出来，但是Chrome图片都出不来，所以打印的是0:0（PS：代码完全一致，IE正常，Chrome没显示）

追问

但是我的图片出来了啊...出来了以后宽高还是0

追答

这是我的代码，IE下正常：
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img = new Image();
img.src = "Blackout.jpg";
console.log(img.width + ":" + img.height);
cxt.drawImage(img, 0, 0);

参考技术C 我这可以啊，不是chrome浏览器的问题吧
var img = new Image();
img.src = "http://www.baidu.com/search/zhidao/task/uc/small_53.jpg";
alert(img.width);
alert(img.height);
通过测试。
如果你最上面代码是粘过来的，可能是第二行img.src后面少了一个分号追问

用的是本地的图片，获得的就为0
在线的是没有问题的

追答

恩，不过不单是chrome，IE和FF的虽然有结果，不是0，但是也是错的，貌似不可以这样直接在JS里指定本地文件路径。
你可以在页面加个隐藏的img标签，通过更改img的src属性然后再对这个img进行width和length的查询，但是估计满足不了你的要求

追问

隐藏的img标签也试过了，同样获取不了，都为0

追答

测试通过了，原因是src的地方不能写c:\\XXXX\XXX\XX.jpg，只能写像下面这样的
就是你的网页存放路径必须和图片路径一致，就是页面文件必须和图片放在一个文件夹才可以
function tea()
var img = new Image();
img.src='1111.jpg';
alert(img.width);

追问

我就是这么写的=。=...真不好意思..

追答

太高深了，我这无论测多少遍都是正确值。
如果只是js的话那上面那肯定没有问题，只要保证同一文件夹而且能显示出来就可以
至于你说的HTML5，Chrome内核不同可能有问题
还有Chrome的缓存机制比较恶心，你有没有试试清缓存
别的真想不出来了，不好意思

参考技术D 同问啊，刚好也是用html5来画，结果chrome里显示宽高都是0追问

这个问题我至今无解，- =