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

mga*_*mga 6 javascript image mobile-safari

在这里有一个关于这个问题的HTML 测试页面.出于某种原因,MobileSafari报告Image.width/height任何超过1700像素的图像的属性为其值的一半.也就是说,widthJPG 的属性是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 4的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;
    }
Run Code Online (Sandbox Code Playgroud)

这是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>
Run Code Online (Sandbox Code Playgroud)

Ryt*_*tek 5

是的,它在尺寸和重量方面存在限制.

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

对于RAM小于256 MB的设备,解码的 GIF,PNG和TIFF图像的最大尺寸为3百万像素,对于RAM大于或等于256 MB的设备,最大尺寸为5百万像素.也就是说,对于RAM小于256 MB的设备,请确保宽度*高度≤3*1024*1024.请注意,解码后的大小远远大于图像的编码大小:

使用子采样,JPEG 的最大解码图像尺寸为3200万像素.由于子采样,JPEG图像可以达到3200万像素,这使得JPEG图像可以解码为像素数量的十六分之一.大于2百万像素的JPEG图像被二次采样 - 即,解码为缩小的尺寸.JPEG子采样允许用户查看来自最新数码相机的图像.

对于RAM小于256 MB的设备,画布元素的最大大小为3百万像素,对于RAM大于或等于256 MB的设备,最大大小为5百万像素.如果未指定,画布对象的高度和宽度为150 x 300像素.

一些可能有用的链接:

干杯