3

我有一个最近在 iOS6 上被破坏的 html5 webapp。我们采用高分辨率 jpeg 图像并将其渲染到画布元素上。我们首先加载较低分辨率的缩略图作为占位符，而较高分辨率的 jpeg 在后台下载。在 iOS6 中，高分辨率图像一旦加载就会超出 y 维度的纵横比。这是我作为测试创建的示例页面，它只是在缩略图和高分辨率图像之间切换：

http://www.video-monitoring.com/beachcams/jupiter/canvas.htm

如果您在 iOS6 上对此进行测试，您会看到高分辨率图像被压扁。

这是javascript代码：

        var imgCanvas;
    var imgContext;
    var downloader = new Image();
    var w = 400;
    var h = 300;
    var hq = true;
    var lqUrl = "http://www.video-monitoring.com/beachcams/jupiter/pics/s2/sep0112k/s211403_.jpg";
    var hqUrl = "http://www.video-monitoring.com/beachcams/jupiter/pics/s2/sep0112k/s211403w.jpg";

    window.onload = function () {
        imgCanvas = document.getElementById('canvas');
        imgContext = imgCanvas.getContext('2d');
        downloader.onload = imageOnLoad;
        downloader.src = hqUrl;
    }


    function imageOnLoad() {
        imgContext.clearRect(0, 0, w, h);
        imgContext.drawImage(downloader, 0, 0, w, h)
    }

    function btnClick() {
        hq = !hq;
        if (hq) downloader.src = hqUrl;
        else downloader.src = lqUrl;
    }

这是html：

    <input type="button" name='changeres' id='changeres' onclick="btnClick()" value='Change Resolution' />
<canvas width="2000px" height="1000px"  id="canvas">

</canvas>

所以我的问题是 iOS6 发生了什么变化，现在渲染不正确？我正在做的事情不是标准的吗？它可以在所有其他浏览器上正确呈现。它适用于iOS5。这是 webapp 的生产版本：http: //www.video-monitoring.com/beachcams/jupiter/slideshow.htm

4

0 回答 0