最近iOS6で壊れたhtml5 webappがあります。高解像度の jpeg 画像を取得し、canvas 要素にレンダリングします。高解像度の 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で動作します。Web アプリケーションの製品バージョンは次のとおりです: http://www.video-monitoring.com/beachcams/jupiter/slideshow.htm