Fe-interview: [js] 第61天 写一个方法获取图片的原始宽高

[haizhilin2013]

第61天 写一个方法获取图片的原始宽高

[gengxinGB]

    function loadImageAsync(url) {
        return new Promise(function(resolve, reject) {
            var image = new Image();

            image.onload = function() {
                var obj = {
                    w: image.naturalWidth,
                    h: image.naturalHeight
                }
                resolve(obj);
            };

            image.onerror = function() {
                reject(new Error('Could not load image at ' + url));
            };
            image.src = url;
        });
    }

[forever-z-133]

除了 onload 和 append 还有其他方法吗

[wenyejie]

如果有用过七牛等云图片工具, 可以直接通过参数控制
如果是成系统的图片管理, 可以直接在url中加入相关参数来识别
还有如果有缓存可以直接complete中获取到, 这样比onload快多了

[TheMayy]

补充一个知识点：
H5中img标签新增了两个属性naturalWidth和naturalHeight可以获取图片的原始尺寸

[Alex-Li2018]

function loadImageAsync(url) {
        return new Promise(function(resolve, reject) {
            var image = new Image();

            image.onload = function() {
                var obj = {
                    w: image.naturalWidth,
                    h: image.naturalHeight
                }
                resolve(obj);
            };

            image.onerror = function() {
                reject(new Error('Could not load image at ' + url));
            };
            image.src = url;
        });
    }

[MrZ2019]

    function loadImageAsync(url) {
        return new Promise(function(resolve, reject) {
            var image = new Image();

            image.onload = function() {
                var obj = {
                    w: image.naturalWidth,
                    h: image.naturalHeight
                }
                resolve(obj);
            };

            image.onerror = function() {
                reject(new Error('Could not load image at ' + url));
            };
            image.src = url;
        });
    }