时间戳

首页 > 解决方案 > 我正在尝试从 base64 获取图像的高度

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

问题描述

我正在尝试从 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)

标签： javascript

解决方案

  • 在可能的情况下，您应该在脚本中使用createObjectURL而不是使用-URI，因为-URI 需要将整个对象作为字符串序列化到内存中，并使用 1/3 的额外内存使用（因此，如果您有一个 1MB 大小的图像，您现在需要一个额外的1.33MB仅用于URI 字符串，而对象 URL 通常只是一个简短的 GUID）。 data:data:data:
    • 创建数据 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;
        
    } );
}

推荐阅读