Размер изображения увеличивается после использования функции canvas.transform?

Question

На самом деле я пытаюсь установить ориентацию моего изображения, используя EXIF configuration при загрузке изображения, используя следующий код javascript

Function, чтобы получить ориентацию моего image is:

function getOrientation(file, callback) {
var reader = new FileReader();

reader.onload = function(event) {
    var view = new DataView(event.target.result);

    if (view.getUint16(0, false) != 0xFFD8) return callback(-2);

    var length = view.byteLength,
        offset = 2;

    while (offset < length) {
        var marker = view.getUint16(offset, false);
        offset += 2;

        if (marker == 0xFFE1) {
            if (view.getUint32(offset += 2, false) != 0x45786966) {
                return callback(-1);
            }
            var little = view.getUint16(offset += 6, false) == 0x4949;
            offset += view.getUint32(offset + 4, little);
            var tags = view.getUint16(offset, little);
            offset += 2;

            for (var i = 0; i < tags; i++)
                if (view.getUint16(offset + (i * 12), little) == 0x0112)
                    return callback(view.getUint16(offset + (i * 12) + 8, little));
        }
        else if ((marker & 0xFF00) != 0xFF00) break;
        else offset += view.getUint16(offset, false);
    }
    return callback(-1);
};

reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
};

И для преобразования изображения я использовал это function

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;

}

Но после преобразования размер изображения увеличился с 4,27 МБ до 22 МБ

HTML код

 <input name="imagefile[]" type="file" id="takePictureField" accept="image/*"
                                               onchange="uploadPhotos(this)"/>

А Script используется

window.uploadPhotos = function (element) {
   var file = element.files[0];
   alert("File Size is " +  file.size + "----" + file.size  / (1024 * 1024) + "MB")
if (file.type.match(/image.*/)) {
        getOrientation( file, ( orientation )=>{
        var reader = new FileReader();
        reader.onload = function (readerEvent) {
            resetOrientation( readerEvent.target.result, orientation, ( resetBase64Image)=>{
**//Here size of the image increases unexpectedly to very large value**
})
reader.readAsDataURL(file);
 })
    }

    else {
        alert("Unsupported format")
    }
};

Это занимает много времени и браузер зависает в течение почти 5 секунд, и мне нужно также отправить эти base64 данные на сервер, который будет потреблять много network данных.

Ссылка дляизображение https://imagebin.ca/v/4FdwTpIlW6Sz

Это изображение было повернуто после загрузки также на этом сайте. Я столкнулся с той же проблемой. Поэтому я использовал приведенный выше код для загрузки оригинала ориентация .

Как решить эту проблему?Есть ли другой способ создать преобразованное изображение?