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实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
javascript中类的定义方式详解(四种方式)
Dec 22 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
分享PHP入门的学习方法
2007/01/02 PHP
php之Memcache学习笔记
2013/06/17 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JavaScript模拟实现继承的方法
2015/03/30 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
Vue-router 类似Vuex实现组件化开发的示例
2017/09/15 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
python二分法实现实例
2013/11/21 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
瀑布模型都有哪些优缺点
2014/06/23 面试题
英语专业毕业生自荐信
2013/10/28 职场文书
外国语学院毕业生自荐信
2013/10/28 职场文书
学前班教师的自我鉴定
2013/12/05 职场文书
农民入党思想汇报
2014/01/03 职场文书
保护母亲河倡议书
2014/04/14 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL