Как загрузить файл изображения в AWS S3, после изменения ориентации с помощью Javascript?

Question

Я использую библиотеку Прямая загрузка на S3 - подпись V4 для загрузки фотографий.Однако у меня есть требование найти и исправить ориентацию фотографий до того, как эти файлы будут загружены на S3.

Я ссылался на различные ответы на stackoverflow вкл. Ориентация Exif на стороне клиента JS: поворот и зеркальное отображение изображений JPEG .

Я застрял при сохранении изображения base64 обратно в файл перед загрузкой в ​​S3.Это может быть глупой, маленькой ошибкой.Но не в состоянии прогрессировать дальше.Ниже приведен скрипт для справки.

if (filetype == 0) {
// getDataUrl(file, function (imgBase64) {
// });
window.loadImage(file, function (img) {
    if (img.type === "error") {
        console.log("couldn't load image:", img);
    } else {
        window.EXIF.getData(file, function () {
            var orientation = window.EXIF.getTag(this, "Orientation");
            console.log("orientation: ", orientation);
            if (orientation != 1) {
                resetOrientation(URL.createObjectURL(file), orientation, function (resetBase64Image) {
                    file = dataURLtoFile(resetBase64Image, file.name);
                    var orientation2 = window.EXIF.getTag(file, "Orientation");
                    console.log("orientation2: ", orientation2);
                });
            } 
        });
    }
});
}

form.find('input[name="Content-Type"]').val(file.type);
form.find('input[name="key"]').val((folder1.length ? (folder1 + '/' + subfolder ) : subfolder) + filename);

// Now submit form to S3.
data.submit();

и

function resetOrientation(srcBase64, srcOrientation, callback) {
var img = new Image();

img.onload = function () {
    var width = img.width,
        height = img.height,
        canvas = document.createElement('canvas'),
        ctx = canvas.getContext("2d");

    // set proper canvas dimensions before transform & export
    if (4 < srcOrientation && srcOrientation < 9) {
        canvas.width = height;
        canvas.height = width;
    } else {
        canvas.width = width;
        canvas.height = height;
    }

    // transform context before drawing image
    switch (srcOrientation) {
        case 2: ctx.transform(-1, 0, 0, 1, width, 0); break;
        case 3: ctx.transform(-1, 0, 0, -1, width, height); break;
        case 4: ctx.transform(1, 0, 0, -1, 0, height); break;
        case 5: ctx.transform(0, 1, 1, 0, 0, 0); break;
        case 6: ctx.transform(0, 1, -1, 0, height, 0); break;
        case 7: ctx.transform(0, -1, -1, 0, height, width); break;
        case 8: ctx.transform(0, -1, 1, 0, 0, width); break;
        default: break;
    }

    // draw image
    ctx.drawImage(img, 0, 0);

    // export base64
    callback(canvas.toDataURL());
};

img.src = srcBase64;
}       

function dataURLtoFile(dataurl, filename) {

var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
    u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {type:mime});
}

Проблема в том, что файл с исправленной ориентацией не загружен.Вместо этого загруженный файл продолжает иметь ориентацию 6 или 8.

На сайт будут загружены только файлы JPEG.

Пожалуйста, помогите.

Answer 1

Я не смог найти жизнеспособное решение для этого.

Итак, мне пришлось выбрать обработку на стороне сервера для решения проблем с ориентацией изображения.

Изначально я использовал функцию phpчтобы проверить ориентацию из exif-данных

   $exif = @exif_read_data($file['tmp_name']);
      if (!empty($exif['Orientation'])) {
        switch ($exif['Orientation']) {
            case 3:
            $degrees = 180;
            break;
            case 6:
            $degrees = -90;
            break;
            case 8:
            $degrees = 90;
            break;
            default:
            $degrees = 0;
        } // switch $exif
      } //if (empty(exif))

, затем с помощью PHP-функций imagecreatefromjpeg, imagerotate и imagejpeg изображение сохраняется на S3.Однако это значительно увеличило размер изображения.Итак, существующая Lambda, Java-функция, которая обрабатывает создание миниатюр, применяет водяной знак, улучшена для обработки ориентации, качества изображения и размера файла.