美文网首页
给一个图片url获取它的宽高

给一个图片url获取它的宽高

作者: 前端阿良古 | 来源:发表于2019-12-04 16:47 被阅读0次

问题:

已知img的url为 http://ww1.sinaimg.cn/large/006onK1Rgy1g9ksszfv9kj308c08caa5.jpg ,求它的宽高

解决方案

const img = new Image(); // 等价于 document.createElement('img')
img.src = 'http://ww1.sinaimg.cn/large/006onK1Rgy1g9ksszfv9kj308c08caa5.jpg';
console.log(`width: ${img.width}, height: ${img.height}`);

缺陷:图片是异步加载的,如果该图片已经加载过的,就会输出正确的数据;如果第一次加载,用上面的方法第一次输出会输出错误的0(控制台运行一下以上代码试试?)

改善

配合onload等图片资源加载完再获取数据

const img = new Image();
img.src = 'http://ww1.sinaimg.cn/large/006onK1Rgy1g9ksszfv9kj308c08caa5.jpg';
img.onload = function () {
  console.log(`width: ${img.width}, height: ${img.height}`);
}

相关文章

网友评论

      本文标题:给一个图片url获取它的宽高

      本文链接:https://www.haomeiwen.com/subject/onylgctx.html