рабатывал проект в PhoneGap, пытаясь построить для Android и iOS. Основная идея заключается в том, чтобы получить доступ к сохраненному изображению в телефонной библиотеке, сохранить это изображение в элемент HTML img и затем нарисовать этот элемент img на холсте. Оттуда пользователь может масштабировать и поворачивать изображение.

У меня не было проблем с Android. Я протестировал использование эмуляторов и устройств и протестировал широкий спектр устройств (с разным соотношением пикселей, плотностей и т. Д.), И полученные преобразования холста всегда дают ожидаемый результат.

Версия iOS, с другой стороны, не была столь успешной. Масштабирование / вращение холста выглядит нормально, пока я не масштабирую холст немного больше его исходного размера (примерно на 4-5 пикселей больше, чем оригинал). После увеличения размера холста изображение, нарисованное на холсте, изменится. Вместо того, чтобы теперь видеть все изображение, я обычно получаю небольшую часть изображения (обычно верхний левый угол), нарисованную по всему холсту.

Мой холст в HTML:

<canvas id="sourceImgCanvas" width="200" height="200" style="z-index:1; position:absolute; left:5%; top:100px;"></canvas>

Изображение, которое я получаю из телефонной библиотеки, почти всегда слишком велико для экрана телефона. Я уменьшаю изображение и записываю коэффициент сжатия изображения (drawRatio равно 1, если масштабирование не произошло, больше 1, если изображение было уменьшено до размера экрана). PhoneGap обрабатывает захват изображения из телефонной библиотеки, и я просто использую imageURI, возвращенный из фотографии, и устанавливаю его в элемент imgPhonegap Camera API:

// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) 
{
    sourceImage = document.getElementById('sourceImg');
    sourceImage.src = imageURI;

    //signal that user can manipulate photo with touch inputs
    b_editPhotoAllowed = true;
}

Чтобы масштабировать холст, у меня есть стрелка в правом нижнем углу холста. После перетаскивания он записывает, как далеко он находится от верхнего левого угла холста, и устанавливает высоту / ширину холста в зависимости от расстояния.

//Calls when user is dragging the arrow resize button.  Updates the source image size
function ResizeSourceImage() {
    var horizontalDistanceFromTopLeft = parseFloat(ovalCanvas.style.left) + ovalCanvas.width - endX;
    var verticalDistanceFromTopLeft = parseFloat(ovalCanvas.style.top) + ovalCanvas.height - endY;

    //update canvas size with new length
    sourceImgCanvas.width = originalSrcImgWidth - horizontalDistanceFromTopLeft;
    sourceImgCanvas.height = originalSrcImgHeight - verticalDistanceFromTopLeft;

    //re-draw based on new size
    sourceImgContext.drawImage(sourceImg, 0, 0, pictureWidth * drawRatio * drawRatioMod, pictureHeight * drawRatio * drawRatioMod, 0, 0, sourceImgCanvas.width, sourceImgCanvas.height);
}

Вышеуказанный drawRatio - это соотношение, которое я сохраняю при изменении размера изображения (код здесь не показан; он довольно длинный, но простой.)

drawRatioMod это значение, которое я установил при экспериментировании, и это основной вопрос моего вопроса. На андроид ставлюdrawRatioMod = 1 так что на рисунок это не влияет. На iPhone4 / iPad (устройства, с которыми я могу тестировать) я установилdrawRatioMod = 0.5, Это решило некоторые первоначальные проблемы, с которыми я столкнулся при работе с холстом html5 на iOS: поскольку разрешение iPhone4 фактически в два раза больше размера экрана, я уменьшил длину / ширину исходного изображения, которое нужно нарисовать, наполовину.

ВышесказанноеResizeSourceImage() Функция вызывается каждый раз, когда пользователь перемещает инструмент изменения размера стрелки, таким образом, обновляя размер холста. Изображение корректно подстраивается под новый размер холстатолько если я уменьшу. Если масштабировать холст более чем на 5-6 пикселей, холст больше не рисует все исходное изображение; вместо этого холст рисует только верхний левый угол изображения на всем холсте.

Я занимался этой проблемой в течение нескольких дней, и мне не повезло. Первоначально я думал, что это как-то связано с соотношением пикселей устройства (доступно через Javascriptwindow.devicePixelRatio), но я тестировал на нескольких устройствах Android с различными соотношениями и никогда не имел такого результата.

Я чувствую, что я очень близок к решению, так как изображение отображается неправильно только при увеличении на iOS. Любые указатели / советы с благодарностью! Я пробовал несколько исправлений, связанных сwindow.devicePixelRatio но симулятор iPhone4 на моем iPad всегда возвращает значение pixelRatio, равное 1 (что кажется неправильным), и мне не повезло с такими исправлениями.

Ура! (Я попытался опубликовать простой код, касающийся масштабирования и рисования холста. Если вы хотите увидеть дополнительный код, я могу опубликовать больше; надеялся получить пост, не похожий на Великую китайскую стену :))