Это возможно, но не рекомендуется.
Для начала вам нужно получить данные exif для правильного поворота изображения, если оно исходит от мобильного телефона. Затем вам нужно проверить тип файла и преобразовать его во что-то, что вы можете загрузить через ajax. Для этого вам потребуется браузер, который может обрабатывать «toDataURL» на объекте canvas:
function supportsToDataURL() {
var c = document.createElement("canvas");
var data = c.toDataURL("image/jpeg");
return (data.indexOf("data:image/jpeg") == 0)
}
Как только вы получите файл, мне нравится рендерить его в мегапикселях: мегапиксельная библиотека
Прослушайте событие загрузки изображения следующим образом:
var img = new Image()
img.onload = function() {
// do some stuff like rendering image to a canvas
}
var mpImg = new MegaPixImage(file);
mpImg.render(img, { quality: 1, maxWidth: 1024 });
Затем вы можете записать изображение на холст:
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = sourceWidth;
canvas.height = sourceHeight;
ctx.drawImage(img, 0, 0, sourceWidth, sourceHeight);
var url = canvas.toDataURL();
// or if you want a specific file type
var jpeg = canvas.toDataURL("image/jpeg");
var png = canvas.toDataURL("image/png");
ПРИМЕЧАНИЕ: некоторые версии Android могут поддерживать «toDataURL», но не полную спецификацию. Они могут отображать только png-файлы и т. Д. Это только одна из многих проблем, с которыми вам придется столкнуться при совместимости браузеров при рендеринге изображений.
Поверьте мне, я потратил около 16 часов на создание инструмента обрезки и настройки изображений для мобильного веб-приложения, и это непростая задача.
Лучшим решением было бы выбрать пользователя, преобразовать его в base64 и загрузить через ajax. Затем преобразуйте вещи на стороне сервера и (при необходимости) отправьте что-нибудь обратно пользователю, которого они могут просматривать.
Я работаю над плагином, позволяющим загружать изображения с мобильных устройств, и я добавлю сюда ссылку, когда это будет сделано.