分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

通过url动态获取图片大小方法总结

发布时间:2023-09-06 02:20责任编辑:熊小新关键词:url

很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过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);});

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

通过url动态获取图片大小方法总结

原文地址:https://www.cnblogs.com/wangxiaoling/p/9881920.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved