js获取图片原始宽高

使用HTML5属性 (naturalWidth, naturalHeight）获取

提示：适用于Firefox/IE9/Safari/Chrome/Opera浏览器

	var img = document.getElementById("imgDom")
	var width = img.naturalWidth
	var height = img.naturalHeight

使用Image对象异步获取

	let image = new Image();
	image.onload = function () {
	    var width=img.width
		var height=img.height
	};
	image.onerror = function () {
	    console.log("获取失败")
	};
	image.src = "./1.png";

兼容的写法

    // async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。
    // await 是在等待一个Promise的异步返回
    // 得到图片原始的宽高
    async function getImageSize(img) {
        if (img.naturalWidth) {
            // 适用于Firefox/IE9/Safari/Chrome/Opera浏览器
            return {
                width: img.naturalWidth,
                height: img.naturalHeight
            }
        } else {
            return await getImageSizeByUrl(img.src);
        }
    }
    // 使用Image对象获取图片真实宽高
    function getImageSizeByUrl(url) {
        return new Promise(function (resolve, reject) {
            let image = new Image();
            image.onload = function () {
                resolve({
                    width: image.width,
                    height: image.height
                });
            };
            image.onerror = function () {
                reject(new Error('error'));
            };
            image.src = url;
        });
    }

调用方式

	var img = document.getElementById("imgDom")
	getImageSize(img).then(res=>{
		console.log(res.width,res.height)
	})