MobileSafari没有通过JavaScript返回正确的图像大小信息 [英] MobileSafari not returning the right image size info via JavaScript
问题描述
我在这里有一个HTML 此问题的测试页。出于某种原因 MobileSafari报告任何超过1700像素的图像的 Image.width / height 属性为其值的一半。也就是说，JPG的 width 属性是2000，但MobileSafari JavaScript将其报告为1000.如果我尝试使用1700px宽图像的相同代码，我会得到正确的宽度。
I have an HTML test page for this issue here. For some reason MobileSafari is reporting the Image.width/height properties of any image with more than 1700 pixels as half its value. That is, the width property of the JPG is, say, 2000 but MobileSafari JavaScript reports it as 1000. If I try the same code with a 1700px-wide image I get the correct width.
测试我确实加载了两个图像（不同维度的相同图像）并显示了JavaScript大小值。我尝试过：
The test I did loads two images (same image in different dimensions) and displays the JavaScript size values. I tried in:
- 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（尺寸不正确）
- Chrome 22, Safari 5.1.7, Firefox 15.0.1 all in Mac OS X 10.6.8 (correct size)
- iOS Simulator 4.3 SDK 3.2 (incorrect size)
- iPad 2 with iOS 5.1 (incorrect size)
- iPhone 4S with iOS 5.1 (incorrect size)
为什么会发生这种情况？我错过了某个地方的设置吗？为什么它适用于某些图像而不适用于其他图像？
Any ideas why this is happening? Am I missing a setting somewhere? Why does it work with some images but not others?
测试在这里： http://still-island-1941.herokuapp.com/sizetest.html
这是JavaScript代码：
This is the JavaScript code:
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>
推荐答案
是的，它存在尺寸和重量的限制。
Yes, it exists a limitation in size and weight.
由于iOS上可用的内存，它可以处理的资源数量有限制：
Because of the memory available on iOS, there are limits on the number of resources it can process:
对于RAM大于或等于256 MB的设备，已解码 GIF，PNG和TIFF图像的最大大小为3百万像素，对于大于或等于256 MB RAM的设备，最大大小为5百万像素。
即，对于RAM小于256 MB的设备，请确保 width *height≤3* 1024 * 1024 。
请注意解码后的尺寸远远大于图片的编码尺寸：
The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image :
使用
子采样，JPEG的最大已解码图像大小为3200万像素。由于
子采样，JPEG图像可以高达3200万像素，这使得JPEG图像可以解码为像素数的十六分之一的大小。大于2百万像素
的JPEG图像被二次采样 - 即，解码为缩小的尺寸。 JPEG子采样
允许用户查看来自最新数码相机的图像。
The maximum decoded image size for JPEG is 32 megapixels using subsampling. JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
对于具有
的设备，canvas元素的最大尺寸为3百万像素低于256 MB的RAM和5百万像素的设备使用更大或
等于256 MB RAM。如果没有指定，画布对象的高度和宽度为150
x 300像素。
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. The height and width of a canvas object is 150 x 300 pixels if not specified.
一些可能有用的链接：
- Apple官方网站：查看了解iOS资源限制部分
- 评论中的分析和解决方案
- 解决方法
- Apple official site : check the Know iOS Resource Limits section
- Analysis and solution in the comments
- Workaround
干杯
这篇关于MobileSafari没有通过JavaScript返回正确的图像大小信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
