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 相关文章推荐
js 图片等比例缩放代码
May 13 Javascript
JavaScript对象创建及继承原理实例解剖
Feb 28 Javascript
js数组的操作详解
Mar 27 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 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
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
javascript获取dom的下一个节点方法
2014/09/05 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
2018/04/13 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
微信小程序位置授权处理方法
2019/06/13 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
python数值基础知识浅析
2019/11/19 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
社区学习雷锋活动总结
2014/04/25 职场文书
模具专业自荐信
2014/05/29 职场文书
教师业务学习材料
2014/12/16 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
在js中修改html body的样式
2021/11/11 Javascript