How to upload an image file to AWS S3, after changing the orientation using Javascript?

Question

I'm using the library Direct Upload to S3 - Signature V4 to upload photos. However, I have a requirement to find and correct the orientation of photos, before these files are uploaded to S3.

I have referred various answers on stackoverflow incl. JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images .

I'm stuck at saving base64 image back to file, before uploading to S3. It may be a silly, small mistake. But, unable to progress any further. Here below the script for reference.

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();

and

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});
}

The problem is orientation corrected file is not uploaded. Instead the uploaded file continues to have orientation 6 or 8.

Only jpeg files will be uploaded to the site.

Please help.

Answer 1

I couldn't find a viable solution for this.

So, I had to opt for server side processing to handle image orientation issues.

Initially, I had used a php function to check orientation from exif data

   $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))

then using PHP functions imagecreatefromjpeg , imagerotate and imagejpeg the image is saved to S3. However, this bumped up the image size significantly. So, an existing Lambda, Java function that's handling thumbnail creation, applying watermark is enhanced to handle orientation, image quality and file size.