Question

我有一个最近在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

ios6 canvas高分辨率y值

0 个答案: