底部的代码应该绘制图像的裁剪部分，保持纵横比。
但是，在iOS 6和iOS 7上（仅在iPad mini和iPad视网膜上试用过），它会垂直挤压图像。
我知道在处理大图像时这是一个已知的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>