Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[js] 第61天 写一个方法获取图片的原始宽高 #256

Open
haizhilin2013 opened this issue Jun 15, 2019 · 7 comments
Open

[js] 第61天 写一个方法获取图片的原始宽高 #256

haizhilin2013 opened this issue Jun 15, 2019 · 7 comments
Labels
js JavaScript

Comments

@haizhilin2013
Copy link
Collaborator

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

zhangylei commented Jun 15, 2019 •
edited
Loading 

    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
Copy link

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

@wenyejie
Copy link

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

@haizhilin2013 haizhilin2013 added the js JavaScript label Jun 18, 2019
@zhangkuibao
Copy link

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

@Alex-Li2018
Copy link 

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;
        });
    }

@smile-2008
Copy link 

    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;
        });
    }

@xiaoqiangz
Copy link 

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;
    });
}

这两个api学习了，真不知道

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
js JavaScript
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@smile-2008 @wenyejie @haizhilin2013 @xiaoqiangz @zhangylei @forever-z-133 @Alex-Li2018 @zhangkuibao