我正在尝试从 base64 获取图像的高度

Question

我正在尝试从 base64 获取图像的高度。 这是我的代码，

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

并查看日志返回 0。

如何以这种方式获得图像的高度？

完整代码

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)

Answer 1

• 在可能的情况下，您应该使用createObjectURL而不是使用data: -URIs 在脚本中，因为data: -URI 需要将整个 object 序列化为 memory 作为字符串，额外增加 1/3 的 ZCD69B4957F06CD8218D7BF3D61您现在需要额外的 1.33MB来data: URI 字符串，而 object URL 通常只是一个简短的 GUID）。
  • 创建数据 URI 也是同步的，并且会阻塞 UI 线程 - 您可以通过创建data:来自大图像或视频的 URI。
  • 而createObjectURL非常非常便宜 - 唯一需要注意的是您需要查看 URL 的生命周期并确保使用revokeObjectURL 。

将您的代码更改为此。

请注意，根本不需要FileReader 。

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