在使用Javascript更改方向后，如何将图像文件上传到AWS S3？

Question

我正在使用图书馆Direct Upload to S3 - Signature V4上传照片。但是，在将这些文件上传到S3之前，我需要找到并更正照片的方向。

我已经在stackoverflow上提到了各种答案。 JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images。

在上传到S3之前，我坚持将base64图像保存回文件。这可能是一个愚蠢的小错误。但是，无法继续前进。以下脚本供参考。

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函数处理缩略图创建，应用水印得到增强，以处理方向，图像质量和文件大小。