2012-09-23 16 views
6

私はHTML test page for this issue hereを持っています。なんらかの理由でMobileSafariが、の半分の値を持つ1700ピクセル以上の画像のImage.width/heightプロパティを報告しています。つまり、JPGのwidthプロパティは2000であるが、MobileSafari JavaScriptでは1000とレポートされます。同じコードを1700ピクセル幅の画像で試してみると、正しい幅が得られます。MobileSafariがJavaScript経由で正しい画像サイズ情報を返さない

The test私は2つの画像(異なる画像で同じ画像)をロードし、JavaScriptのサイズ値を表示しました。私が試した中で:

  • クロム22、Safariの5.1.7は、Firefox 15.0.1のMac OS X 10.6.8(正しいサイズ)
  • iOSシミュレータ4.3 SDK 3.2(間違ったサイズ)
  • のiPad内のすべてのiOSの5.1(間違ったサイズ)のiOS 5.1(間違ったサイズ)

  • iPhone 4Sすべてのアイデア、なぜこれが起こっている?と2私はどこかの設定が欠けていますか?なぜそれはいくつかの画像では動作しますが、他の画像では動作しません。

    テストはここにある: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> 
    
  • +0

    を制限しますロードィ画像が3000px四角で、iOSのJavascriptがオンロードイベントが正常に終了したと報告していましたが、その時点の報告された高さと幅はゼロでした。私は同じ問題があると思います。 –

    答えて

    3

    はい、それはサイズおよび重量の制限が存在します。 の最大サイズは GIF、PNGをデコード

    、およびTIFF画像をデバイスのための3メガピクセル未満とされていますので、iOSの上で使用可能なメモリの

    、それが処理できるリソースの数に制限があります256 MB RAM以上のデバイスの場合は256 MB RAMと5メガピクセル。 つまり、RAMが256 MB未満のデバイスの場合は、の幅*高さ≦3 * 1024 * 1024にしてください。 JPEGの最大デコード画像サイズが サブサンプリングを使用して32メガピクセルである

    デコードサイズは、画像の符号化サイズよりもはるかに大きいこと 注意。 JPEG画像は、 サブサンプリングのために最大32メガピクセルになる可能性があります。これにより、JPEG画像は、ピクセル数の16分の1の のサイズにデコードできます。 2メガピクセルより大きなJPEG画像はサブサンプリングされます。つまり、縮小されたサイズにデコードされます。 JPEGサブサンプリング を使用すると、最新のデジタルカメラの画像を表示できます。

    キャンバス要素の最大サイズは、 のRAMが256 MB未満のデバイスの場合は3メガピクセル、256 MBのRAMの場合は 以上のデバイスの場合は5メガピクセルです。キャンバスオブジェクトの高さと幅は、指定されていない場合、150 x 300ピクセルです。

    助けることができるいくつかのリンク:

    乾杯

    +0

    私はこれが上記の私の問題の理由であるかどうかは分かりませんが、私が作った[テスト](http://still-island-1941.herokuapp.com/sizetest.html)でわかるように、大きい "画像は2000x1334 = 2,668,000であり、3x1024x1024 = 3,145,728ピクセルより小さい。 – mga

    +0

    画像の品質(重量)を下げて、画像が変化しているかどうか確認してください。 私は退屈な回避策を試しましたか? – Rytek

    +0

    私は新しい "大"ファイルをアップロードしましたので、圧縮された(20%の品質)ひどいです... 72kb(圧縮済み)... MobileSafariによって報告された寸法の変更はありません – mga

    関連する問題