HTML5 实现图片预览和查看原图

更新日期: 2020-05-20阅读: 3.4k标签: 图片

html5从一开始就给开发者很多的期待,提供众多新的api,不用再想以前一样,为了实现某个功能写很多的代码。在以前,如果要实现图片预览会怎么做呢,因为为了安全的原因,web端的js是不能读取文件的本地真实路径的,那么只能将图片上传到服务器上,然后再拿到图片的链接,这样才能实现图片预览。而服务器呢,比如有两个文件夹,一个是临时文件夹,一个是正式文件夹,临时文件夹会定时进行清理,正式文件夹是用户确认使用的图片存储的位置。


1. fileReader

现在HTML5提供的API不再让图片预览那么麻烦,FileReader提供了很多的方法来进行图片预览和文本读取,同时也提供了一整套完整的事件来捕获文件的状态,如下:

FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。

方法名参数描述
readAsBinaryStringfile将文件读取为二进制编码
readAsTextfile[, encoding]按照格式将文件读取为文本,encode默认为UTF-8
readAsDataURLfile将文件读取为DataUrl
abort(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事件,若读取的文件个数大于零,那么就进行下一步的操作:

<input type="file" id=‘upimg‘ />
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表示<div id=‘show‘></div>,用来展示图片预览的
    if(!/image\/\w+/.test(file.type)){
        show.innerHTML = "请确保文件为图像类型";
        return false;
    }
    // onload是异步操作
    reader.onload = function(e){
        show.innerHTML = ‘<img src="‘+e.target.result+‘" alt="img">‘;
    }
    reader.readAsDataURL(file);
}

现在,就可以在页面上看到图片了。审查元素后我们能够看到,图片地址是个base64的字符串,如:‘data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sA......‘

2.2 读取多张图片

多张图片和单张图片的处理过程很相似,但是也还是有区别的,因为reader.onload()是一个异步的操作,进行下一步的操作时必须在这个方法里

<input type="file" id=‘upimg‘ multiple />
// 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表示<div id=‘show‘></div>,用来展示图片预览的
        if(!/image\/\w+/.test(file.type)){
            show.innerHTML = "请确保文件为图像类型";
            return false;
        }
        reader.onload = function(e){
            html += ‘<img src="‘+e.target.result+‘" alt="img">‘;
            i++;
            func(); //选取下一张图片
        }
        reader.readAsDataURL(file);
    }
    func();
}

2.3 拖拽拉去图片

拖拽事件,采用的是HTML5中的drag和drop,本文不着重介绍这两个方法,仅仅是讲解如何使用。

首先,我们设置一块拖拽区域,告诉用户应该把图片拖拽到什么位置:

<style>
    .drag{ width: 400px;height: 100px;border: 1px dotted #333; text-align: center; line-height: 100px; color: #aaa; display: inline-block;}
    .drag_hover{background: #FAD6F9;}
</style>
<span class=‘drag‘ id="drag">拖拽区域</span>

然后,我们给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 真是个好东西,还有着很多的东西等着我们去挖掘。“蹿腾吧,程序员”!

原文地址:https://www.cnblogs.com/homehtml/p/12975922.html

链接: https://fly63.com/article/detial/9220

原生Js对文件类型的判断,判断文件是图片,视频等格式

在我们开发中,会遇到这样的场景:1.服务器返回Json数据,根据数据类型来显示是图片还是视频。2.前端上传文件,需要指定文件类型才能上传到服务器。这时候就需要使用Js来判断对应文件的类型

前端图片懒加载的实现,采用Lazy Load 图片延迟加载提高用户体验

对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

web前端图片加载优化,从图片模糊到清晰的实现过程

在网页图片显示的时候,会发现许多网站采用了先模糊,然后在慢慢清晰的过程,这样的加载用户体验是比较好的,那么如何实现呐?默认加载2张图片,一张缩略图,一张原图,当打开网页的时候默认只显示缩略图

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

js实现图片局部放大效果

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。

网站图片优化的重要性与技巧方案

网站图片优化技巧:1、图片名包括关键词,2、Alt标签包括关键词,3、图片周边文本包括关键词,4、GLF和JPGE图画优化,5、在图片链接中运用锚文本关键字

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

原生js 生成海报图_利用canvas合成图片的实现方法

目前浏览器对html5的支持越来越好,我们现在不用服务器端,直接在前端利用canvas就可以进行图片的合成了。下面就介绍下如何通过原生js 来生成海报图

网页中默认图片的几种解决方式

现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,这里的alt属性是为了当图片加载失败时告诉用户图片信息的 ,能不能美化一下呢?下面给出几种方式

h5移动端禁止长按图片保存

在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。使用 pointer-events:none、全局属性、加一层遮罩层

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!