我正在尝试从 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:-URI，因为 data:-URI 需要将整个对象作为字符串序列化到内存中，并使用 1/3 的额外内存使用（因此，如果您有一个 1MB 大小的图像，您现在需要 额外的 1.33MB 仅用于 data: URI 字符串，而对象 URL 通常只是一个简短的 GUID）。
  • 创建数据 URI 也是同步的，并且会阻塞 UI 线程 - 您可以通过从大图像或视频创建 data: URI 轻松冻结 Chrome 选项卡。
  • 而 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;
        
    } );
}