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 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
jQuery多项选项卡的实现思路附样式及代码
Jun 03 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
Javascript中神奇的this
Jan 20 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
vue+render+jsx实现可编辑动态多级表头table的实例代码
Apr 01 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
用vue写一个日历
Nov 02 Javascript
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生成图片验证码、点击切换实例
2014/06/25 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
2013/09/10 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
JavaScript轻松创建级联函数的方法示例
2017/02/10 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
2019/09/27 Javascript
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python中正则的使用指南
2016/12/04 Python
Python实现的计算器功能示例
2018/04/26 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
对python中return与yield的区别详解
2020/03/12 Python
Python 串口通信的实现
2020/09/29 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
九年级历史教学反思
2014/01/27 职场文书
买房协议书
2014/04/11 职场文书
建材投资建议书
2014/05/16 职场文书
企业安全生产检查制度
2015/08/06 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
CSS3实现三角形不断放大效果
2021/04/13 HTML / CSS