JavaScript使用readAsDataURL读取图像文件


Posted in Javascript onMay 10, 2017

FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件。使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料;而缺点便是,网页的大小可能会变大。它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件。

参考以下使用readAsDataURL读取图像文件范例:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
  <title> </title>
  <script type = "text/javascript" >
    function ProcessFile( e ) { 
      var file = document.getElementById('file').files[0];
      if (file) {
        
        var reader = new FileReader();
        reader.onload = function ( event ) { 
          var txt = event.target.result;
          document.getElementById("result").innerHTML = txt;
          };
       }
      reader.readAsDataURL( file );
      }
    function contentLoaded () {
      document.getElementById('file').addEventListener( 'change' ,
ProcessFile , false );
    }
    window.addEventListener( "DOMContentLoaded" , contentLoaded , false );
  </script>
</head>
<body>
  请选取一个图像文件: <input type = "file" id = "file" name = "file" />
  <div id = "result"> </div>
</body>
</html>

 

readAsDataURL方法会使用base-64进行编码,编码的资料由data字串开始,后面跟随的是MIME type,然后再加上base64字串,逗号之后就是编码过的图像文件的内容。
使用Img显示图像文件 

若想要将读取出来的图像文件,直接显示在网页上,您可以透过JavaScript建立一个<img>标签,再设定src属性为Data URL,再将<img>标签加入DOM之中,例如以下范例所示:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) { 
var file = document.getElementById('file').files[0];
if ( file ) {
 
var reader = new FileReader();
reader.onload = function ( event ) { 
var txt = event.target.result;
var img = document.createElement("img");
img.src = txt;
document.getElementById("result").appendChild( img );
};
}
reader.readAsDataURL( file );
}
function contentLoaded() {
document.getElementById('file').addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded" , contentLoaded , false );
</script>
</head>
<body>
请选取一个图像文件: <input type = "file" id = "file" name = "file" />
<div id = "result"> </div>
</body>
</html>

读取部分文件

有时想要读取的文件太大,想要分段进行读取;或者只想要读取文件部分的内容,这时您可以将文件切割,根据浏览器的不同,可以使用以下方法:
webkitSlice:适用于支持Webkit引擎的浏览器,如Chrome。
mozSlice:适用于Firefox。
这两个方法要传入开始的位元组索引,以及结尾的位元组索引,索引以0开始。以下程式范例以FileReader对象的readAsBinaryString方法来读取文件,只读取文件的第三个位元组读取到第六个位元组:

<!DOCTYPE html>
<html xmlns ="http://www.w3.org/1999/xhtml" >
<head>
<title> </title>
<script type = "text/javascript" >
function ProcessFile( e ) {
var file = document.getElementById( 'file' ).files[0];
if ( file ) {
var reader = new FileReader ();
reader.onload = function ( event ) {
var txt = event.target.result;
document.getElementById( "result" ).innerHTML = txt;
};
}
if ( file.webkitSlice ) {
var blob = file.webkitSlice( 2, 4 );
} else if ( file.mozSlice ) {
var blob = file.mozSlice( 2, 4 );
}
reader.readAsBinaryString( blob );
}
function contentLoaded() {
document.getElementById( 'file' ).addEventListener( 'change' ,
ProcessFile , false );
}
window.addEventListener( "DOMContentLoaded", contentLoaded , false );
</script>
</head>
<body>
<input type = "file" id = "file" name = "file" />
<div id = "result" > </div>
</body>
</html>

请注意:

不同的浏览器对于HTML 5的支持程度不同,上述程式码可在chrome正常执行,不见得可以在其它浏览器中正确的执行。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
this和执行上下文实现代码
Jul 01 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
Jun 24 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 Javascript
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
angular.js指令中的controller、compile与link函数的不同之处
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
May 10 #Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 #Javascript
JavaScript通过filereader接口读取文件
May 10 #Javascript
关于vue-router路径计算问题
May 10 #Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 #Javascript
Bootstrap table使用方法总结
May 10 #Javascript
You might like
PHP脚本的10个技巧(2)
2006/10/09 PHP
PHP入门学习笔记之一
2010/10/12 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
JS自动缩小超出大小的图片
2012/10/12 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
React 使用browserHistory项目访问404问题解决
2018/06/01 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
python开发之函数定义实例分析
2015/11/12 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
Python实现FM算法解析
2019/06/18 Python
python实现大文件分割与合并
2019/07/22 Python
flask 实现token机制的示例代码
2019/11/07 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python利用socket模块开发简单的端口扫描工具的实现
2021/01/27 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
纽约手袋品牌:KARA
2018/03/18 全球购物
Currentbody法国:健康与美容高科技产品
2020/08/16 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
财务会计人员岗位职责
2013/11/30 职场文书
大学生职业生涯规划书前言
2014/01/09 职场文书
新员工欢迎词
2014/01/12 职场文书
离婚答辩状范文
2015/05/22 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
python爬取某网站原图作为壁纸
2021/06/02 Python
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
详细介绍python操作RabbitMq
2022/04/12 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android