Javascript Load Image Library Как повернуть изображение и сохранить на сервере - PullRequest
Новая
       55

Javascript Load Image Library Как повернуть изображение и сохранить на сервере

0 голосов
/ 06 октября 2018

Вариант использования: пользователь заполняет html-форму, один из типов ввода - «файл», куда он может загрузить свою фотографию профиля.Как только они отправляют данные формы, включая изображение профиля, отправляются на сервер.

ПРОБЛЕМА: существуют проблемы с поворотом изображения при съемке с помощью мобильных телефонов.

Я пытался ее решитьс библиотекой https://github.com/blueimp/JavaScript-Load-Image/blob/master/README.md, но я могу только изменить способ отображения изображения на стороне клиента.Неизмененное изображение отправляется на сервер.

Код: 

loadImage.parseMetaData(file, function(data) {

                //default image orientation
                var orientation = 0;
                //if exif data available, update orientation
                if (data.exif) {
                    orientation = data.exif.get('Orientation');
                }

                // Load the image from disk and inject it into the DOM with the correct orientation
                var loadingImage = loadImage(
                    file,
                    function(canvas) {
                        //here's the base64 data result
                        var base64data = canvas.toDataURL('image/jpeg');
                        // create file preview from html template
                        var template = $('#imageTemplate').html();
                        var htmlPreview = $(template).clone();
                        //image is visible, no need to show filename $(htmlPreview).find('.fileName').text(e.target.fileName);
                        $(htmlPreview).find('img').attr('src',base64data);
                        $(htmlPreview).find('a').attr('href',base64data);

                    }, {auto fix orientation
                        canvas: true,
                        orientation: orientation
                    }
                );
            });

Изображение корректно отображается / поворачивается на стороне клиента перед загрузкой.Когда изображение загружается на сервер и затем отображается снова, никаких изменений не видно.Похоже, этот код не вносит никаких изменений в «входной файл», который фактически отправляется на сервер, а только в «img», который отображается пользователю перед загрузкой.Как я могу изменить изображение и отправить измененное на сервер?

...