I'm trying to get the height of the image from base64

Question

I'm trying to get the height of the image from base64. Here's my code,

let reader = new FileReader()
reader.readAsDataURL(file);
reader.onloadend = function() {
    let img = document.createElement('img');
    img.src = reader.result; //data:image/png;base64,...
    console.log(img.height);
}

and looking on log it return 0.

How to get the height of the image in that way?

Full code

function handleDrop(e) {
    var dt = e.dataTransfer
    var files = dt.files

    handleFiles(files)
}

function handleFiles(files) {
    files = [...files]
    files.forEach(previewFile)
}

function previewFile(file) {
    let reader = new FileReader()

    reader.readAsDataURL(file);
    reader.onload = function() {
        let img = document.createElement('img');
        let div = document.createElement('div');

        img.src = reader.result;
        div.appendChild(img);

        document.getElementById('gallery').appendChild(div);
    }
}

dropArea.addEventListener('drop', handleDrop, false)

`readAsDataURL` waaaaay more expensive than `createObjectURL`. — Dai, Dec 06 '20 at 05:00
What is `file`, exactly? Is it *already* a Base64-encoded file, or a binary file? — Dai, Dec 06 '20 at 05:01
You need to use the `load` event of the `HTMLImageElement`, not the `FileReader`. — Dai, Dec 06 '20 at 05:03
Try changing to just "load" event instead of 'onloadend'. Get into these possible duplicated suggestions: - https://stackoverflow.com/a/26934286 - https://stackoverflow.com/a/6150397 — Jose Cordero, Dec 06 '20 at 05:05
Does this answer your question? [JS - get image width and height from the base64 code](https://stackoverflow.com/questions/17774928/js-get-image-width-and-height-from-the-base64-code) — Dai, Dec 06 '20 at 05:06
Actually the code snippets are already working. i just need height out that — Fil, Dec 06 '20 at 05:08
the given link was visited by me before i asked. when i tried. in my case it just return 0 — Fil, Dec 06 '20 at 05:14
I updated the question with full code.. so that you may have clear view what I am trying to do — Fil, Dec 06 '20 at 05:20

score 4 · Accepted Answer · answered Dec 06 '20 at 05:11

Where-possible you should use createObjectURL instead of using data:-URIs in scripts because a data:-URI requires serializing the entire object into memory as a string with 1/3rd extra memory usage (so if you have a 1MB-sized image, you now need an additional 1.33MB just for the data: URI string, whereas an object URL is usually just a short GUID).
- Creating data URIs is also synchronous and blocks the UI thread - you can easily freeze a Chrome tab by creating a data: URI from a large image or video.
- Whereas createObjectURL is very, very cheap - the only catch is you need to watch the lifetime of the URL and make sure you use revokeObjectURL.

Change your code to this.

Note that FileReader is not needed at all.

async function printImageDimensions( file ) {
    
    if( !file ) return;
    if( !( file instanceof File ) ) return;

    //

    const img = document.createElement( 'img' );
    
    const objUrl = URL.createObjectURL( file );
    try {
        
        const dim = await loadImageAsync( img, objUrl );

        console.log( "Width: %d, Height: %d", dim.w, dim.h );
    }
    finally {
        URL.revokeObjectURL( objUrl );
    }
}

function loadImageAsync( img, url ) {
    
    return new Promise( ( resolve, reject ) => {
        
        function onLoad() {
            const ret = { w: img.naturalWidth, h: img.naturalHeight };
            resolve( ret );
        }

        function onError() {
            reject( "Load failed." );
        }

        img.addEventListener( 'load', onLoad );
        img.addEventListener( 'error', onError );

        img.src = url;
        
    } );
}

Tried `reader.createObjectURL(file);` i got error saying not a function — Fil, Dec 06 '20 at 05:15
I updated the question with full code.. so that you may have clear view what I am trying to do — Fil, Dec 06 '20 at 05:20
@Fil It's `URL.createObjectURL`, not `reader.createObjectURL`, and as I said, you don't need `FileReader` at all. — Dai, Dec 06 '20 at 05:27

I'm trying to get the height of the image from base64

1 Answers1