Я работаю над приложением Webworks, где мне нужно изменить размер изображения для загрузки на сервер. Я использую JQuery Mobile, приложение должно работать на OS6 и выше. Пользователь может либо использовать камеру, либо выбрать изображение с устройства. Соответствующий код выглядит следующим образом:Изменение размера с помощью HTML5 Canvas - Distortion
function handleOpenedFile(fullPath, blobData) {
var image = new Image();
image.src = fullPath; //path to image
image.onload = function() {
var resized = resizeMe(image); // send it to canvas
//Do stuff with the DataURL returned from resizeMe()
};
}
function resizeMe(img) {
var canvas = document.createElement('canvas');
var width = Math.round(img.width/2);
var height = Math.round(img.height/2);
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
return canvas.toDataURL("image/jpeg", 0.8);
}
Затем я использую Base64 в DataURL для загрузки на сервер. Изображения становятся масштабируемыми, но они выглядят искаженными. Части изображения смещены, и цвета выглядят странно. Это не масштабирование как таковое, которое испортило изображение, поскольку оно появляется искаженным, если вы рисуете его на холсте без какого-либо масштабирования.
Я искал и SO, и форумы BB Dev широко, не повезло.
Кто-нибудь есть идеи, как исправить это или предложить альтернативное предложение для изменения размера изображения для загрузки?
Человек, о человек. Этот вопрос был противным для меня. iOS 6 вышел осенью прошлого года, добавив возможность захвата с камеры/камеры. Мне также потребовалось изменить размер с помощью Canvas. Изменение размера холста вызывало серьезные проблемы при выполнении изменения размера/вращения. Отправляй сообщение: http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios. В конце концов, я написал небольшую библиотеку, в которой исправлены проблемы, похожие на это (но до этого вышло): https://github.com/stomita/ios-imagefile-megapixel. –
Извините, ноутбук умер, прежде чем я смог представить свой гораздо более релевантный комментарий. В iOS проблема произошла только из-за подвыборки на больших изображениях. Быстрый поиск в Google показывает, что на ежевике, по крайней мере, у одного человека были проблемы с большими изображениями http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/Problem-JavaScript-amp-Canvas-cannot-process -Большие-изображения-GT/TD-п/2128847. Вы можете загрузить небольшое изображение (например, 100 х 100 пикселей) на свое устройство, выбрать это изображение и посмотреть, есть ли у него такие же проблемы. –
Спасибо за ваши предложения, я посмотрел на эту ветку форума BB и опробовал эту мегапиксельную библиотеку без успеха. Решение, которое я нашел, я ответил на свой вопрос. – Iyashu5040