如何用JavaScript获取上传图片裁剪后尺寸及initialCroppedAreaPixels偶发undefined问题

核心原因 #

你使用的自动裁剪逻辑是异步执行的，会在裁剪完成后才向File对象注入initialCroppedAreaPixels属性，而你在img.onload回调中访问该属性的时机，早于部分图片的裁剪完成时间点，自然就会读取到undefined。

为什么打印完整File对象能看到属性 #

Chrome、Edge、Firefox等主流浏览器的开发者控制台，对引用类型（比如File对象）的打印是懒加载的：控制台输出的只是对象的引用快照，当你手动点击展开对象查看属性时，浏览器才会读取对象当前的最新属性值。此时异步裁剪逻辑已经执行完成，initialCroppedAreaPixels已经被赋值，所以你会看到该属性存在，和你打印时刻的实际值不一致。

为什么部分图片正常、部分异常 #

裁剪的执行耗时和图片的体积、分辨率、格式直接相关：小体积、低分辨率的常规格式图片裁剪速度快，在img.onload触发时已经完成裁剪、完成属性赋值，所以能正常读取；大体积、高分辨率或者特殊编码格式的图片裁剪耗时更长，img.onload触发时裁剪还未结束，属性还没注入，就会读取到undefined。

临时解决方案 #

如果你无法修改裁剪逻辑的源码，可以用轮询的方式等待属性注入完成：

var upload = document.getElementById("ImageUploader");
upload.onchange=function(event){
    let img = new Image()
    const targetFile = event.target.files[0]
    img.src = window.URL.createObjectURL(targetFile);
    
    img.onload = async () => {
        // 最多轮询3秒，每100ms检查一次
        let checkCount = 0
        const maxCheck = 30
        while (checkCount < maxCheck) {
            if (targetFile.initialCroppedAreaPixels) {
                // 拿到属性后执行后续逻辑
                console.log(targetFile.initialCroppedAreaPixels)
                break
            }
            await new Promise(resolve => setTimeout(resolve, 100))
            checkCount++
        }
        if (checkCount === maxCheck) {
            console.error('裁剪参数读取超时，请检查图片是否符合上传要求')
        }
    };
};

内容的提问来源于stack exchange，提问作者Sven