MobileSafari not returning the right image size info via JavaScript

问题

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.

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 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?

The test is here: http://still-island-1941.herokuapp.com/sizetest.html

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;
    }

This is the HTML code:

<!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>

回答1:

Yes, it exists a limitation in size and weight.

Because of the memory available on iOS, there are limits on the number of resources it can process:

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 :

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.

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.

Some links which could help :

Apple official site : check the Know iOS Resource Limits section
Analysis and solution in the comments
Workaround

Cheers

来源：https://stackoverflow.com/questions/12556198/mobilesafari-not-returning-the-right-image-size-info-via-javascript

标签

javascript

image

mobile-safari