1

下部のコードは、縦横比を維持しながら、画像のトリミングされた部分を描画する必要があります。

ただし、iOS 6 と iOS 7 (iPad mini と iPad retina でのみ試した) では、画像が縦方向に圧縮されます。

これは、大きな画像を扱う場合の iOS6 の既知のバグであることは知っていますが、これは小さな画像でも発生するようで、問題の画像は 669 x 500 しかなく、iOS7 では...

一見したところ、画像をトリミングせずにキャンバスにクリッピング長方形を設定し、スケーリングと回転を使用して画像全体を描画し、画像を逆変換することでこれを回避できますが、それが常に機能するかどうかはわかりません...

また、スケーリング係数が 0.5 を超えると問題が発生しないことに気付きました。これは、このスケーリングの問題を引き起こしているのが Apple のサブサンプリング アルゴリズムであることを示しています。画像サイズが非常に重要であることに注意してください。669x500 では失敗しますが、驚くべきことに 670x500 では機能します! 奇数の幅は失敗するようですが、偶数の幅は正常に機能します。

誰にもこれに対する解決策がありますか？megapix-image js ライブラリを使用することもできますが、多数の小さな画像を描画する必要があるため、かなり遅くなります。

ありがとう、ピーター

<html>
<body>
    Left and right image should be the same, but on iOS, the left image is vertically squeezed
    <br/>
    <canvas id="canvas" width="980" height="709"></canvas>
</body>
<script>
    var img = document.createElement('img');
    img.onload = function () {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        // The scaling problem does not occur when scale is larger than 0.5
        var scale = 0.4;

        // Cropping it this way does not work on iOS, but works on all other browsers
        context.drawImage(img, 0, 0, 500, 500, 0, 0, 500 * scale, 500 * scale);

        // Cropping the image using a clipping rect seems to do the job on iOS, but might be slower.
        context.beginPath();
        context.rect(400, 0, 500 * scale, 500 * scale);
        context.clip();
        context.drawImage(img, 0, 0, img.width, img.height, 400, 0, img.width * scale, img.height * scale);
    };
    // The problem occurs for 669x500, it works for 670x500!
    img.src = "http://lorempixel.com/669/500/";
</script>
</html>
4

0 に答える 0