js如何获取图片的真实宽高

背景：electron开发即时通讯，要发送图片，步骤：

1. 发送图片之前要预览图片
2. 点击发送图片按钮，构造消息，存储在本地，模仿接收消息，把消息发到消息流中
3. 展示消息在消息流中，根据消息的类型，判断是图片，展示图片组件
4. 加载图片组件，并开始上传图片，上传图片中有两个参数，w,h图片真实宽高
5. 发送的图片要获取真实的宽高
6. 根据真实的宽高，给定宽度最大，高度最大，算出需要在消息流里面展示的宽高。
7. 发送完消息，在消息流中看到图片上传进度后，把滚动条滚动到最底部

要了解图片src引用图片和DOM加载完成是不同步的，到第7个步骤的时候，src加载的图片也许还没有完成，那么此时滚动到底部就会发生错误，因为滚动条的高度是根据内容撑开的。

换个思路，能不能在第一步就获取到图片的真实宽高，构建消息体的时候带上。 可以的，预览图片onload方法中获取图片宽高，便解决了该问题。

js如何获取图片的真实宽高？

1. 通过图片的width和height属性，如果当前图片没有被设置过宽高的话。
2. 通过图片的naturalWidth, naturalHeight属性

// width,height
async function getImageSize(filePath) {
    return new Promise((resolve, reject) => {
        try {
            let image = new Image();
            image.onload = function () {
                resolve({width: this.width, height: this.height});
                this.removeAttribute('src');
                image = null;
            };
            image.onerror = error => {
                reject(error);
                image = null;
            };
            // 换成你自己的URL
            image.src = `file://${filePath}`;
        } catch (error) {
            reject(error);
        }
    });
}

预览图片的时候获取图片宽高， 给图片设置过宽高的，通过naturalWidth, naturalHeight属性获取图片原始宽高

<img class="img_single_box-img"
           @load="onImageLoaded($event, imgList[0])"
           :src="imgList[0].filePath"
           :alt="imgList[0].filename">

onImageLoaded(event, item) {
   const {naturalWidth, naturalHeight} = event.target;
   // set data coding
},

end