MobileSafari未通过JavaScript返回正确的图像大小信息



我在这里有一个关于这个问题的HTML测试页面。由于某种原因MobileSafari报告任何像素超过1700的图像的Image.width/height属性为其值的一半。也就是说,JPG的width属性是2000,但MobileSafari JavaScript将其报告为1000。如果我用1700px宽的图像尝试相同的代码,我会得到正确的宽度。

我所做的测试加载了两个图像(不同维度的相同图像)并显示JavaScript大小值。我试过:

  • Chrome 22、Safari 5.1.7、Firefox 15.0.1均支持Mac OS X 10.6.8(正确大小)
  • iOS模拟器4.3 SDK 3.2(大小不正确)
  • iOS 5.1版iPad 2(尺寸不正确)
  • 带有iOS 5.1的iPhone 4S(尺寸不正确)

有什么想法吗?我是不是错过了某个场景?为什么它适用于某些图像而不适用于其他图像?

测试在这里:http://still-island-1941.herokuapp.com/sizetest.html

这是JavaScript代码:

var imgBig, imgSmall;
function init() {
imgBig = new Image();
imgBig.onload = handleBig;
imgBig.src = "/images/size.jpg";
imgSmall = new Image();
imgSmall.onload = handleSmall;
imgSmall.src = "/images/test1.jpg";
document.getElementById("browser").innerHTML = navigator.userAgent;
}
function handleBig() {
document.getElementById("dimensionsBig").innerHTML = imgBig.width + "x" + imgBig.height;
document.getElementById("testBig").src = imgBig.src;
}
function handleSmall() {
document.getElementById("dimensionsSmall").innerHTML = imgSmall.width + "x" + imgSmall.height;
document.getElementById("testSmall").src = imgSmall.src;
}

这是HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>MobileSafari image dimensions test</title>
</head>
<body onload="init()">
<p>your browser: <strong><span id="browser"></span></strong></p>
<p>big image dimensions: <strong><span id="dimensionsSmall"></span></strong> (should be 1700x1134)</p>
<img id="testSmall" />
<p>small image dimensions: <strong><span id="dimensionsBig"></span></strong> (should be 2000x1334)</p>
<img id="testBig" />
</body>
</html>

是的,它在尺寸和重量上都有限制。

由于iOS上可用的内存,它可以处理的资源数量有限制:

解码GIF、PNG和TIFF图像的最大大小对于RAM小于256 MB的设备为300万像素,对于RAM大于或等于256 MB的装置为500万像素。也就是说,对于RAM小于256 MB的设备,请确保宽度*高度≤3*1024*1024。请注意,解码的大小远远大于图像的编码大小

JPEG的最大解码图像大小为3200万像素,使用二次采样。JPEG图像可能高达3200万像素,原因是二次采样,允许JPEG图像解码到一个像素数的十六分之一。大于200万像素的JPEG图像被二次采样——也就是说,被解码为减小的大小。JPEG子采样允许用户查看来自最新数码相机的图像。

对于具有小于256 MB RAM和500万像素的设备等于256MB RAM。画布对象的高度和宽度为150x 300像素(如果未指定)。

一些可能有帮助的链接:

  • 苹果官方网站:查看了解iOS资源限制部分
  • 评论中的分析和解决方案
  • 变通办法

干杯

最新更新