ユーザーがモバイル デバイスのカメラで写真を撮り、それを HTML5 キャンバスに表示できるモバイル Web アプリケーションを開発しました。この Web アプリケーションを iOS 7 の iPhone 5C で実行すると、画像が垂直方向に大きく歪んで表示され、意図した 100% ではなくキャンバスの約 20% を占めるようになります。
これは、Safari の画像サブサンプリングに関連している可能性があります。これは、iOS の以前のバージョンやその他のデバイスでも垂直方向のスクイッシュを引き起こしましたが、上記の問題ほど深刻ではありません。この問題に対処するために、megapix-image.js という名前の jquery プラグインが作成されました。このプラグインは、iOS 6 を実行している iPhone4 および iPad で動作し、画像が正しく表示されるように、この垂直方向のつぶれを修正します。megapix-image.js は iPhone 5/iOS 7 と互換性がないようです (画像ファイルは変換されません)。
iOS 7 では、iPhone 4 で見られた垂直方向の押しつぶしの問題が完全に修正されましたが、iPhone 5/5C では問題がさらに悪化したようです。
この問題の解決策はありますか?
解決:
<script type="text/javascript" src="~/Scripts/megapix-image.js"></script>
<script>
var mpImg = new MegaPixImage(file);
var mpImg.render(srcImage, {maxWidth: 960, maxHeight: 960});
</script>
ここで、file は fileInput コントロールからのファイルであり、srcImage は修正された画像です。