JS中通过url动态获取图片大小的方法小结(两种方法)


Posted in Javascript onOctober 31, 2018

很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的坑了,我们必须先获取图片大小,计算比例再对图片进行缩放。

查阅资料,我总结了两种通过url获取图片大小的方法:

1.预加载获取图片大小

var imgLoad = function (url, callback) {
  var img = new Image();
  img.src = url;
  if (img.complete) {
    callback(img.width, img.height);
  } else {
    img.onload = function () {
      callback(img.width, img.height);
      img.onload = null;
    };
  };
};

此方法必须等待图片加载完毕才能获取尺寸,速度超慢,图片会先出现原本大小,一段时间后才进行缩放,体验差

2.封装的方法imgReady

var imgReady = (function () {
  var list = [], intervalId = null,
  // 用来执行队列
  tick = function () {
    var i = 0;
    for (; i < list.length; i++) {
      list[i].end ? list.splice(i--, 1) : list[i]();
    };
    !list.length && stop();
  },
  // 停止所有定时器队列
  stop = function () {
    clearInterval(intervalId);
    intervalId = null;
  };
  return function (url, ready, load, error) {
    var onready, width, height, newWidth, newHeight,
    img = new Image();
    img.src = url;
    // 如果图片被缓存,则直接返回缓存数据
    if (img.complete) {
      ready.call(img);
      load && load.call(img);
      return;
    };
    width = img.width;
    height = img.height;
    // 加载错误后的事件
    img.onerror = function () {
      error && error.call(img);
      onready.end = true;
      img = img.onload = img.onerror = null;
    };
    // 图片尺寸就绪
    onready = function () {
      newWidth = img.width;
      newHeight = img.height;
      if (newWidth !== width || newHeight !== height ||newWidth * newHeight > 1024) {
      // 如果图片已经在其他地方加载可使用面积检测
        ready.call(img);
        onready.end = true;
      };
    };
    onready();
    // 完全加载完毕的事件
    img.onload = function () {
      // onload在定时器时间差范围内可能比onready快
      // 这里进行检查并保证onready优先执行
      !onready.end && onready();
      load && load.call(img);
      // IE gif动画会循环执行onload,置空onload即可
      img = img.onload = img.onerror = null;
    };
    // 加入队列中定期执行
    if (!onready.end) {
      list.push(onready);
      // 无论何时只允许出现一个定时器,减少浏览器性能损耗
      if (intervalId === null) intervalId = setInterval(tick, 40);
    };
  };
})();

方法调用:

imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
  alert('size ready: width=' + this.width + '; height=' + this.height);
});

方法二体验下好很多,速度也很快,建议使用。

总结

以上所述是小编给大家介绍的JS中通过url动态获取图片大小的方法小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
vue interceptor 使用教程实例详解
Sep 13 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
vue 实现上传组件
May 31 Vue.js
React列表栏及购物车组件使用详解
Jun 28 Javascript
微信小程序实现留言功能
Oct 31 #Javascript
微信小程序签到功能
Oct 31 #Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 #Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 #Javascript
微信小程序实现签到功能
Oct 31 #Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 #Javascript
微信小程序实现自动定位功能
Oct 31 #Javascript
You might like
php开启安全模式后禁用的函数集合
2011/06/26 PHP
php使用codebase生成随机数
2014/03/25 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
javascript头像上传代码实例
2019/09/28 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
Python获取系统默认字符编码的方法
2015/06/04 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Python中的默认参数实例分析
2018/01/29 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
初中女生自我鉴定
2013/12/19 职场文书
早餐连锁店计划书
2014/01/08 职场文书
回门宴答谢词
2014/01/13 职场文书
植物生产学专业求职信
2014/08/08 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python