После некоторой изнурительной отладки, я думаю, я обнаружил ошибку в реализации iPad Safari canvas.drawImage(). Конкретно это перегрузка:
void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
При разрезании изображения и его уменьшении кажется, что Safari иногда забывает разрезать изображение и просто масштабирует все изображение. Это происходит случайным образом, но я смог последовательно воспроизводить его на iPad после очистки кэша сафари. Вот код:
<script>
draw = function() {
var ctx = document.getElementById('cc').getContext('2d');
var timg = new Image()
timg.onload = function() {
ctx.fillStyle = 'rgb(100,100,100)';
ctx.fillRect(0,0,256,256);
ctx.drawImage(timg, 0,0, 128, 128, 0, 0, 63,63);
ctx.drawImage(timg, 0,0, 128, 128, 128, 0, 65,65);
};
timg.src = "http://amirshimoni.com/ipadbug1/1234.jpg";
};
</script>
<body onload="draw();">
<canvas id="cc" width="256" height="128"></canvas>
</body>
Вы можете запустить его здесь или посмотреть вывод с iPad здесь .
Эта ошибка, похоже, не существует ни в одном другом браузере, включая настольный Safari. Похоже, оно исчезнет, если вы обновите страницу на iPad.
Я что-то не так делаю с drawImage()?
Может кто-нибудь выяснить, почему это происходит, и если есть конкретные значения, которых я мог бы просто избежать, чтобы этого не произошло ... или какой-то другой обходной путь?