CODEWITHSUNDEEP
base64
Claes Gustavsson
Claes Gustavsson

Reputation: 5669

Load-image.js base64 image gets 10 times as large as a filereader base64 image?

Im using load-image.js as below to get the base64 with the right orientation when you use an iPhone. And it works, it converts the image to base64 but if I upload an image that is 70k, then it will be 701k when it is an base64 image?

If I use just the fileReader then it is 70k as an image and 70k as base64!

So how can I make it smaller - lighter using load-image.js?

This is how I use load-image.js now

var file='';
file = document.getElementById('file-input').files[0],
        options = {
            canvas: true,
            maxWidth: 600,
        };

    if (!file) {
        return;
    }

    // Use the "JavaScript Load Image" functionality to parse the file data
    loadImage.parseMetaData(file, function(data) {
        // Get the correct orientation setting from the EXIF Data
        if (data.exif) {
            options.orientation = data.exif.get('Orientation');
        }
        // Load the image from disk and inject it into the DOM with the correct orientation
        loadImage(
            file,
            function(canvas) {
                var imgDataURL = canvas.toDataURL();

So the base64 in imgDataURL is what I use and thats gets so much larger in file size! I use the load-image.all.min.js file.

All I want is to convert an image to base64 and that it has the right orientation from the beginning when I do it on an iPhone.

Any input really appreciated, thanks.

EDIT: I just realized that the uploaded image is a .jpg file and when uploaded with just filereader it is still a .jpg file in base64, but load-image is changing it to a .png image. So thats the problem I guess. So how can I make it to a .jpg with load-image?

Upvotes: 0

Views: 690

Answers (1)

LSerni
LSerni

Reputation: 57388

Once base64'ed, anything becomes approximately 33% larger.

So it cannot be that a 70K image is a 70K base64 stream, unless something got lost in transit, or you're checking the image after receiving and base64-decoding. Every 3 bytes become 4 base64 characters, so 70K must become 93K at least.

Now - what could make an image 10x bigger? load-image.js has a scaling feature. Are you sure the image you're sending is the same size, in pixels, on arrival as it was on departure? Or possibly it has to do with the canvas resolution:

aspectRatio: Crops the image to the given aspect ratio (e.g. 16/9). Setting the aspectRatio also enables the crop option.

pixelRatio: Defines the ratio of the canvas pixels to the physical image pixels on the screen. Should be set to window.devicePixelRatio unless the scaled image is not rendered on screen. Defaults to 1 and requires canvas: true.

UPDATE: to send images in a given format and quality, specify them explicitly:

    var imgDataURL = canvas.toDataURL('image/jpeg', 1.0);

The default might be browser dependent. I'm successfully uploading JPEG files in Firefox. Unless you've some override set somewhere...?

Upvotes: 1

Related Questions