0

I am trying to implement a solution to rotate images with exif data before uploading to the server. So far I have implemented the following code thanks to this link: https://stackoverflow.com/a/40867559/4376500

However when I do the rotation, the returned image is a great deal larger than the original image. For example for a file that is 3mb it turns into something like 15mb. Based on this code below is there anything else i need to do? Thanks so much in advance as I've spent a long time trying to work this out

Reset Orientation Function (Rotates Image Based on Exif Orientation)

function exifResetOrientation(srcBase64, srcOrientation, callback) {
  var img = new Image();    
  img.src = srcBase64;
  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);

    console.log('Finished');
    // export blob
    callback(dataURLtoBlob(canvas.toDataURL("image/jpeg",1.0)));
  };
};

Supporting Function Convert dataURL to Blob for File saving

function dataURLtoBlob(dataurl) {
      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 Blob([u8arr], {type:mime});
    }
Ka Tech
  • 8,937
  • 14
  • 53
  • 78
  • 2
    You are generating a PNG file, which may indeed be way larger than the original JPEG one. In your call to `toDataURL` pass the correct MIME type of your image – Kaiido Aug 13 '20 at 08:04
  • ahh right I didn't realise it default to PNG. I'll try passing JPEG now and see if that works, thanks for the tip! – Ka Tech Aug 13 '20 at 09:28
  • Unfortunately tried canvas.toDataURL("image/jpeg",1.0) but still getting a file size 12mb vs original 1.5mb – Ka Tech Aug 13 '20 at 09:33
  • 1
    1 means no compression certainly the priginal one has compression, but anyway you will definitely loose quality or have bigger file, drawing to a canvas is loosy. – Kaiido Aug 13 '20 at 10:03
  • Good news instead of canvas.toDataURL("image/jpeg",1.0) I tried canvas.toDataURL('image/jpeg') and it worked! Slightly smaller than the original but I have no issue with that. If you want to make a formal answer I will accept. Thank you for saving me much headache! – Ka Tech Aug 13 '20 at 10:05

0 Answers0