Я использую Phonegap, чтобы позволить пользователю выбрать фотографию из своей библиотеки, а затем отредактировать ее.
Когда я получаю фотографию с помощью Phonegap, я сохраняю изображение в элементе html img, который уже находится на моей странице:
sourceImage = document.getElementById('smallImage');
sourceImage.style.display = 'block';
sourceImage.src = "data:image/jpeg;base64," + imageData;
Конечно, когда загружается фотография, она может быть больше экрана телефона, поэтому я уменьшаю ее в своем элементе img. Я изменяю фактическую ширину и высоту элемента img, а не свойства css, и изображение корректно отображается на экране (около 288 x 200, а не исходное 1024 x 768). Итак, мой элемент img теперь отображает изображение (в качестве предварительного просмотра), и когда пользователь переходит к следующему экрану, изображение рисуется на холсте, поэтому его можно изменить:
sourceImage.onload = function(){
myCanvas.drawImage(sourceImage, 0, 0);
}
Изображение отображается правильно, однако оно рисует исходное изображение 1024 x 768, полученное из библиотеки, а не измененное уменьшенное изображение в фактическом элементе img, который я отображаю на странице. Я предполагаю, что это связано с тем фактом, что фактический image.src ссылается на изображение размером 1024 x 768, хотя я уменьшаю его.
Я не нашел поддержки для изменения размера изображений перед сохранением их в пробеле. Кто-нибудь знает, как я могу изменить этот размер изображения src, чтобы, когда я смог уменьшить его, прежде чем рисовать на холсте? (Имейте в виду, что пользователь загружает изображения на лету из своей библиотеки. Я бы предпочел иметь решение на стороне клиента, но я не смог его найти).