今天小编跟大家讲解下有关HTML5 实现图片预览和查看原图 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 实现图片预览和查看原图 的相关资料,希望小伙伴们看了有所帮助。
html5从一开始就给开发者很多的期待 提供众多新的API 不用再想以前一样 为了实现某个功能写很多的代码。在以前 如果要实现图片预览会怎么做呢 因为为了安全的原因 web端的js是不能读取文件的本地真实路径的 那么只能将图片上传到服务器上 然后再拿到图片的链接 这样才能实现图片预览。而服务器呢 比如有两个文件夹 一个是临时文件夹 一个是正式文件夹 临时文件夹会定时进行清理 正式文件夹是用户确认使用的图片存储的位置。
1. fileReader
现在html5提供的API不再让图片预览那么麻烦 FileReader提供了很多的方法来进行图片预览和文本读取 同时也提供了一整套完整的事件来捕获文件的状态 如下:
FileReader接口的方法FileReader接口有4个方法 其中3个用来读取文件 另一个用来中断读取。无论读取成功或失败 方法并不会返回读取结果 这一结果存储在result属性中。方法名参数描述readAsBinaryStringfile将文件读取为二进制编码readAsTextfile[, encoding]按照格式将文件读取为文本 encode默认为UTF-8readAsDataURLfile将文件读取为DataUrlabort(none)终端读取操作
FileReader接口事件FileReader接口包含了一套完整的事件模型 用于捕获读取文件时的状态。事件描述onabort中断onerror出错onloadstart开始onprogress正在读取onload成功读取onloadend读取完成 无论成功失败2. 使用 fileReader 读取图片
从上面的表格中 我们可以大致了解fileReader提供哪些方法和事件 不过本文主要是讲解图片的读取 那么我们就是用readAsDataURL()就可以了。不过 在进行这一切之前 我们必须检测当前的浏览器是否支持html5的fileReader 别进行了一系列的处理和操作 结果js报错 说fileReader没有定义。就好像对一个女孩儿又亲又啃 马上要提枪上马了 结果发现这是个纯爷们。if(!(window.FileReader && window.File && window.FileList && window.Blob)){
show.innerhtml = ‘您的浏览器不支持fileReader‘;
upimg.setAttribute(‘disabled‘, ‘disabled‘);
return false;
}
好的 让我们先看下demo演示:【狠狠点击这里】2.1 读取单张图片
使用input[type=file]控件读取文件 然后监听这个控件的change事件 若读取的文件个数大于零 那么就进行下一步的操作:
var upimg = document.querySelector(‘#upimg‘);
upimg.addEventListener(‘change‘, function(e){
var files = this.files;
if(files.length){
// 对文件进行处理 下面会讲解checkFile()会做什么
checkFile(this.files);
}
});
现在我们只能选取一张图片 针对选取的这张图片 我们使用fileReader进行图片的处理// 图片处理
function checkFile(files){
var file = files[0];
var reader = new FileReader();
// show表示
if(!/image\/\w+/.test(file.type)){
show.innerhtml = "请确保文件为图像类型";
return false;
}
// onload是异步操作
reader.onload = function(e){
show.innerhtml = ‘‘;
}
reader.readAsDataURL(file);
}
现在 就可以在页面上看到图片了。审查元素后我们能够看到 图片地址是个base64的字符串 如:‘data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sA......‘2.2 读取多张图片
多张图片和单张图片的处理过程很相似 但是也还是有区别的 因为reader.onload()是一个异步的操作 进行下一步的操作时必须在这个方法里
// change事件没有改动
// 图片处理
function checkFile(files){
var html=‘‘, i=0;
var func = function(){
if(i>=files.length){
// 若已经读取完毕 则把html添加页面中
show.innerhtml = html;
}
var file = files[i];
var reader = new FileReader();
// show表示
if(!/image\/\w+/.test(file.type)){
show.innerHTML = "请确保文件为图像类型";
return false;
}
reader.onload = function(e){
html += ‘‘;
i++;
func(); //选取下一张图片
}
reader.readAsDataURL(file);
}
func();
}
2.3 拖拽拉去图片
拖拽事件 采用的是HTML5中的drag和drop 本文不着重介绍这两个方法 仅仅是讲解如何使用。
首先 我们设置一块拖拽区域 告诉用户应该把图片拖拽到什么位置:
.drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}
.drag_hover{background: #FAD6F9;}
拖拽区域
然后 我们给drag区域绑定上拖拽事件var drag = document.getElementById(‘drag‘);
drag.addEventListener(‘dragenter‘, function(e){
// 拖拽鼠标进入区域时
this.className = ‘drag_hover‘;
}, false);
drag.addEventListener(‘dragleave‘, function(e){
// 拖拽鼠标离开区域时
this.className = ‘‘;
}, false);
drag.addEventListener(‘drop‘, function(e){
// 当鼠标执行‘放’的动作时 执行读取文件操作
var files = e.dataTransfer.files;
this.className = ‘‘;
if (files.length != 0) {
checkFile(files);
};
e.preventDefault();
}, false)
drag.addEventListener(‘dragover‘, function(e){
// 当对象拖动到目标对象时触发
e.dataTransfer.dragEffect = ‘copy‘;
e.preventDefault();
}, false);
这里有个需要注意的地方:需要给dragover和drop添加阻止默认事件 否则浏览器会采用file:///的方式打开文件。drop事件执行后就是进行checkFile() 后续的操作与使用input[type=file]的操作一样。
3. 点击查看原图
当我们点击图片查看原图时 需要知道图片的原始尺寸。可能你会想到使用img.width和img.height 对 这个确实能获取到图片的长和宽 但是 这个长和宽是经过css修饰后的 不是图片原始的尺寸。如果要获取图片的原始尺寸 我们可以在js中创建一个imgs对象 然后把那张图片的地址给了这个imgs对象 然后获取imgs对象的尺寸 这样就能获取到图片的原始尺寸了。var imgs = new Image();
imgs.src = img.src; // 给新的img对象链接
console.log(imgs.width, imgs.height);
而在HTML5中 我们不用再那么麻烦的创建一个无用的img对象了 直接使用给出的属性即可。console.log(img.naturalWidth); // 获取图片的原始的宽度
console.log(img.naturalHeight); // 获取图片的原始的高度
获取到图片的原始尺寸后 就能做出‘查看原图’的效果了。
4. 总结
HTML5 真是个好东西 还有着很多的东西等着我们去挖掘。“蹿腾吧 程序员”!