Я использую инструмент для редактирования изображений для пользователей, чтобы загрузить свои изображения и настроить: http://foliotek.github.io/Croppie/
Я могу сократить строку base64, отправив ее через пару функций. Затем я пытаюсь вставить это в скрытое поле и отправить форму.
$('#submit-update-business').on('click', function(e){
e.preventDefault();
// console.log(vanilla.get());
vanilla.result('canvas', 'viewport', 'png', 0).then(function(src){
var processed = Base64.encode(JSON.stringify(src));
$('#new_image').val(processed);
$('#update-business').submit();
});
});
Я знаю, что строка длинная, но я не могу придумать другого способа сделать это. Я также видел ответы, в которых предлагается отправлять форму через ajax, но, похоже, здесь есть те же подводные камни. Это на самом деле удается нормально работать в настольных браузерах. Это мобильные, которые имеют проблемы. Я могу ограничить размеры изображения до 3000×3000, но, к сожалению, телефоны, кажется, делают фотографии гораздо более высокого качества.
Инструмент, который я использую, Кроппи, имеет способ получать точки данных и масштабировать, но не ориентацию. Если есть способ сохранить эти данные, или использовать данные base64, и повторно визуализировать изображение, и каким-то образом использовать это изображение, чтобы изображение действительно проходило, это было бы здорово. Если есть решение, которое я могу использовать только для мобильных устройств, оно тоже подойдет, поскольку оно отлично работает на настольных ПК.
С постом ajax вместо отправки вам не нужно скрытое поле, если оно имеет ограничения длины в мобильном браузере. Затраты на кодирование Base64 также не нужны, если они вам не нужны на стороне сервера.
.post(
"/ajaxpostURL.php",
{
new_image: processed, // or new_image: src,
other_form_param_or_data: 'some_data'
}
);
Других решений пока нет …