快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器。
我们一步一步进入这个过程。
一、简陋的获取图片方式
/ 图片地址 后面加时间戳是为了避免缓存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 打印 alert('width:'+img.width+',height:'+img.height);
执行:
宽高都是0的这个结果很正常,因为图片的相关数据都没有被加载前它的宽高默认就是0
于是可以这么优化!
二、onload后在打印
// 图片地址 后面加时间戳是为了避免缓存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 加载完成执行 img.onload = function(){ // 打印 alert('width:'+img.width+',height:'+img.height); };
执行:
通过onload就能获取到图片的宽高了。但onload大一点的图通常都比较慢,不实用,但只要图片被浏览器缓存,那么图片加载几乎就不用等待即可触发onload,我们要的是占位符。所以有些人通过缓存获取也可以这么写。
三、通过complete与onload一起混合使用
为了测试缓存效果,注意以下测试图片的url都不加时间戳
// 图片地址 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg'; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 判断是否有缓存 if(img.complete){ // 打印 alert('from:complete : width:'+img.width+',height:'+img.height); }else{ // 加载完成执行 img.onload = function(){ // 打印 alert('from:onload : width:'+img.width+',height:'+img.height); }; }
第一次执行,永远是onload触发
你再刷新,几乎都是缓存触发了
从缓存里读取图片的宽高不用说,非常方便快捷,今天我们要解决的是没有缓存而又快速的相比onload更快的方式去获取图片的宽高。我们常常知道有些图片虽然没有完全down下来,但是已经先有占位符,然后一点一点的加载。既然有占位符那应该是请求图片资源服务器响应后返回的。可服务器什么时候响应并返回宽高的数据没有触发事件,比如onload事件。于是催生了第四种方法
四、通过定时循环检测获取
看看以下例子,为了避免从缓存里读取数据,每一次请求都带时间戳:
// 图片地址 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg?'+Date.parse(new Date()); // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 定时执行获取宽高 var check = function(){ document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : width:'+img.width+',height:'+img.height+'</div>'; }; var set = setInterval(check,40); // 加载完成获取宽高 img.onload = function(){ document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : width:'+img.width+',height:'+img.height+'</div>'; // 取消定时获取宽高 clearInterval(set); };
FireFox
IE7 8 9 10
Chrome
通过以上测试,我们发现定时检测图片宽高的方式要比onload快多了,打印的行数越多表示onload时间越长,40毫秒执行一次,基本100毫秒内就 能获取图片的宽高,chrome甚至在第一次循环的时候就已经获得数据。从以上数据来分析,其实我们可以在定时函数里判断只要图片的宽高都大于0就表示已 经获得正确的图片宽高。我们把时间打上,来看看通过定时获取宽高或者onload获取宽高所需要多少时间。
代码:
// 记录当前时间戳 var start_time = new Date().getTime(); // 图片地址 var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time; // 创建对象 var img = new Image(); // 改变图片的src img.src = img_url; // 定时执行获取宽高 var check = function(){ // 只要任何一方大于0 // 表示已经服务器已经返回宽高 if(img.width>0 || img.height>0){ var diff = new Date().getTime() - start_time; document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : width:'+img.width+',height:'+img.height+', time:'+diff+'ms</div>'; clearInterval(set); } }; var set = setInterval(check,40); // 加载完成获取宽高 img.onload = function(){ var diff = new Date().getTime() - start_time; document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : width:'+img.width+',height:'+img.height+', time:'+diff+'ms</div>'; };
FireFox:
IE
Chrome
这是一张2560 * 1600大小的图片,各浏览器执行结果都能看到通过快速获取图片大小的方法几乎都在200毫秒以内,而onload至少五秒以上,这差别之大说明快速获取图片宽高非常实用。
相关推荐
目前我们常用的获取图片实际宽度高度的方法,要么是在DOM中写入,要么就是等图片加载完毕后才开始获取,用户体验极其不好,今天特意整理一个办法,可以让javascript在html加载完毕后就可以立即获取img文件的头数据...
9. **前端框架和库**: 现在有许多成熟的前端库可以帮助我们快速实现图片裁切功能,如`cropper.js`、`react-cropper`等。这些库已经封装了大部分复杂的逻辑,开发者只需按照API调用即可。 10. **响应式设计**: 如果...
8. **图片尺寸处理**: 另一个优化策略是提前获取图片的尺寸信息,如宽高,这样即使图片未加载,布局也不会受到影响。 通过以上技术,我们可以实现一个高效的JavaScript延迟加载图片解决方案。在压缩包中的`demo`...
为了实现图片的等比例缩放,我们需要首先获取图片的原始宽度和高度。然后根据指定的最大宽度或最大高度来计算新的宽度和高度,并更新图片元素的样式属性。 **2.2 示例代码** ```javascript function DrawImage(img...
另外,为了提高用户体验,可以添加一些额外功能,如固定宽高比、旋转、缩放等。 总结一下,JavaScript图片切割效果的实现涉及HTML5 Canvas、事件监听、坐标计算以及数据转换等多个方面。ImgCropper作为一款工具,...
在进行图片上传前,需要实现图片的预览以及获取图片的尺寸信息。在JavaScript中,可以通过创建一个`Image`对象来实现。实例化一个`Image`对象后,可以通过设置其`src`属性来加载图片,一旦图片加载完成,`Image`对象...
cropper.js 是一个轻量级的JavaScript图片裁剪库,它提供了强大的图片裁剪、旋转和缩放功能。库的核心是基于HTML5的Canvas元素,它能够直接在浏览器中处理图片,无需依赖Flash或其他插件。cropper.js支持响应式布局...
- **固定比例**:可以设置固定的宽高比,确保裁剪出的图片保持特定的形状,如正方形或宽屏比例。 - **固定尺寸**:可以限制裁剪区域的大小,确保裁剪结果符合特定的尺寸要求。 - **远程图片裁剪**:支持加载网络...
对于颜色识别,我们需要使用`canvas`上的`getImageData()`方法,它能够获取图片的像素数据,这些数据包含着每个像素的颜色信息。 二、颜色识别原理 颜色识别的基本原理是遍历图片的每一个像素,分析其RGB(红绿蓝)...
Cropper.js是一个强大的、灵活的JavaScript图片裁剪库,配合其相应的Cropper.css文件,能够帮助开发者创建出具有高度自定义性的图片裁剪体验。 一、Cropper.js简介 Cropper.js是一款基于HTML5 canvas的纯...
cropper.js是一款轻量级、高性能的图片裁剪插件,它提供了丰富的API和事件,能够帮助开发者轻松地在网页上实现图片的自由裁剪、旋转、缩放等操作。该库具有良好的兼容性,支持大部分现代浏览器,包括Chrome、Firefox...
通过获取`canvas`元素并调用`toDataURL`方法将生成的二维码转换为图片数据,然后将其作为`<img>`标签的`src`属性值即可展示为图片格式。 ```javascript var canvas = qrcode.find('canvas').get(0); $('#imgOne')....
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它通过封装了大量常用功能,使开发者可以轻松地编写具有复杂交互功能的网页。其中一个常见的应用场景是在用户上传图片之前获取图片的尺寸和文件大小,以确保...
使用WebcamJS时,开发者需要在页面上设置一个div元素作为摄像头预览的容器,然后通过JavaScript初始化WebcamJS对象,设置参数如宽高、质量、是否允许旋转等。初始化完成后,可以调用Webcam.attach()方法将摄像头画面...
总结来说,jQuery.Jcrop是一款强大且易于集成的JavaScript图片裁剪插件,能够帮助开发者快速实现图片裁剪功能,同时提供了丰富的配置选项和回调机制,以适应各种应用场景。无论你是前端新手还是经验丰富的开发者,...
例如,可以设置它们的背景颜色为半透明黑色,宽高与图片容器相同,并分别定位在两侧。 ```css .left-mask, .right-mask { position: absolute; top: 0; width: 50%; height: 100%; background-color: rgba(0,...
3. **比例锁定**:支持设定固定比例裁剪,确保裁剪后的图片保持原始宽高比。 4. **坐标获取**:Jcrop可以获取用户选择的坐标和尺寸,方便用于服务器端的图片处理。 **二、Jcrop的使用步骤** 1. **引入资源**:在...
**jQuery Jcrop是一款非常实用的JavaScript图片裁剪工具,它为网页开发人员提供了一种简单易用的方法来实现用户交互式的图像裁剪功能。在网页上,用户可以自由选择图片的裁剪区域,从而实现自定义尺寸的图片生成。**...
3. 初始化插件:通过JavaScript调用`$.fn.photoClip`方法,配置相应的参数,如图片URL、裁剪区域的宽高比等。 4. 监听事件:设置裁剪完成后的回调函数,获取裁剪结果并处理。 示例代码: ```html <!DOCTYPE html> ...
这可以通过JavaScript生成随机数,从服务器获取或选择一组预定义的图片URL,并将其赋值给图片元素的`src`属性来实现。 8. **性能优化**:在处理大量图片时,需要注意性能优化,例如使用事件委托减少事件绑定,使用...