使用readAsDataURL方法预览图片

简介: 使用FileReader接口的readAsDataURL方法实现图片的预览。 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。

    使用FileReader接口的readAsDataURL方法实现图片的预览。

 在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性。

   这种方法的缺点是:必须要先把图片上传到服务器。那么问题来了,如果上传的图片很大,而网速又很慢,这就需要等待很久预览图片才会显示出来了,而且,如果用户预览图片后发现不太满意,想重新选择一张图片,这时候还要把已经上传到服务器上的图片给删除掉。

自从有了HTML5的FileReader对象以后,预览图片变得简单多了,不再需要后台的配合,并且JS操作本地文件已经成为了可能。这种方法的思路是:通过FileReader.prototype.readAsDataURL()方法把图片文件转成base64编码,然后把base64编码替换到预览图片的src属性即可。如果想要了解更多关于FileReader对象的,可以看一下这里:FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

 

下面是使用FileReader进行图片预览的简单demo:

<html> 

<head> 

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

<meta name="format-detection" content="telephone=no,email=no,adress=no">

<title>通过filereader接口读取文件</title> 

<script type="text/javascript"> 

var inputElement = document.querySelector('.head-portrait');

inputElement.addEventListener('change', readAsDataURL);

function readAsDataURL() { 

   //判断浏览器是否支持filereader

    if(typeof FileReader=='undifined') { 

        result.innerHTML="<p>抱歉,你的浏览器不支持 FileReader</p>"; 

        return false; 

    } 

var file= inputElement.files[0]; 

//判断获取的是否为图片文件

    if(!/image\/\w+/.test(file.type)) { 

        alert("请确保文件为图像文件"); 

        return false; 

    } 

    var reader=new FileReader(); 

    reader.readAsDataURL(file); 

reader.onload=function(e) { 

//result为base64数据

        var imgData = this.result;  

           imgShow.setAttribute('src', imgData); 

    }    

</script> 

</head> 

 <div>

<img class="imgshow"  />

<input type="file" class="head-portrait" accept="image/*" />

</div>

<body> 

</body> 

</html>  

 

相关文章
|
9天前
|
JavaScript 容器
富文本的图片添加点击放大功能
思路:富文本加载后,dom出全部img元素,然后各自单独添加点击事件
70 3
|
6月前
|
Android开发
安卓图片预览实现
安卓图片预览实现
27 0
uniapp上传预览大图-带删除按钮-摄像机-相册
uniapp上传预览大图-带删除按钮-摄像机-相册
【图片操作】给图片添加滤镜
现在我们都喜欢给图片添加滤镜,现在很多相机也自带了许多滤镜。我们可以在拍照的时候选择需要的滤镜。但是有时候我们需要给大量图片添加同样的滤镜,这个时候手动添加就非常麻烦了。为了方便,我们可以使用程序来帮我们完成添加滤镜的操作。
198 0
|
Python
【图片操作】批量生成缩略图
在我们日常生活中,缩略图很大程度减少了我们内存的使用。如果我们看一张图片就必须加载完成后才能看,那么我们就会发现很多应用都变慢了很多,而且流量也消耗的很快。今天我们就来看看Python生成缩略图的操作。
290 0
|
图形学
PPT制作三大技巧:图标 、图片背景透明和自动函数
PPT制作三大技巧:图标 、图片背景透明和自动函数
246 0
PPT制作三大技巧:图标 、图片背景透明和自动函数
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理
|
存储 小程序 API
小程序实现图片上传,预览以及图片base64位处理
小程序实现图片上传,预览以及图片base64位处理
442 0
小程序实现图片上传,预览以及图片base64位处理
|
Web App开发 数据安全/隐私保护 索引
文档预览功能使用技巧(4)---图片水印
智能媒体管理提供了文档预览功能,通过快速搭建文章的介绍,详细描述了使用“文档转换 + JS 前端渲染引擎”实现文档预览的过程,本文将介绍预览功能中的 图片水印(wmType=2 和 wmValue=url 参数)技巧。
2104 0