JavaScript使用readAsDataURL读取图像文件

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

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

  1. `<!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建立一个标签，再设定src属性为Data URL，再将标签加入DOM之中，例如以下范例所示：

  1. `<!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方法来读取文件，只读取文件的第三个位元组读取到第六个位元组：

  1. <!DOCTYPE html>
  2. <html xmlns ="http://www.w3.org/1999/xhtml" >
  3. <head>
  4. <title> </title>
  5. <script type = "text/javascript" >
  6. function ProcessFile( e ) {
  7. var file = document.getElementById( 'file' ).files[0];
  8. if ( file ) {
  9. var reader = new FileReader ();
  10. reader.onload = function ( event ) {
  11. var txt = event.target.result;
  12. document.getElementById( "result" ).innerHTML = txt;
  13. };
  14. }
  15. if ( file.webkitSlice ) {
  16. var blob = file.webkitSlice( 2, 4 );
  17. } else if ( file.mozSlice ) {
  18. var blob = file.mozSlice( 2, 4 );
  19. }
  20. reader.readAsBinaryString( blob );
  21. }
  22. function contentLoaded() {
  23. document.getElementById( 'file' ).addEventListener( 'change' ,
  24. ProcessFile , false );
  25. }
  26. window.addEventListener( "DOMContentLoaded", contentLoaded , false );
  27. </script>
  28. </head>
  29. <body>
  30. <input type = "file" id = "file" name = "file" />
  31. <div id = "result" > </div>
  32. </body>
  33. </html>

请注意：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

JavaScript使用readAsDataURL读取图像文件的更多相关文章

  1. JS使用readAsDataURL读取图像文件

    JS使用readAsDataURL读取图像文件 FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片 ...

  2. FileReader对象的readAsDataURL方法来读取图像文件

     FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件.使用Dat ...

  3. 使用FileReader对象的readAsDataURL方法来读取图像文件

    使用FileReader对象的readAsDataURL方法来读取图像文件   FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL.Data URL是一项 ...

  4. 转载：使用FileReader对象的readAsDataURL方法来读取图像文件

    文章转载自:http://blog.okbase.net/jquery2000/archive/1296.html: FileReader对象的readAsDataURL方法可以将读取到的文件编码成D ...

  5. 用javascript设置和读取cookie的例子

    请看下面用javascript设置和读取cookie的简单例子,现在的问题是,如果要设置的是一个cookie集,比如在cookie1集中有uname,uid两组信息,应该如何写呢?cookie(&qu ...

  6. Python 读取图像文件的性能对比

    Python 读取图像文件的性能对比 使用 Python 读取一个保存在本地硬盘上的视频文件,视频文件的编码方式是使用的原始的 RGBA 格式写入的,即无压缩的原始视频文件.最开始直接使用 Pytho ...

  7. Win10系列：JavaScript写入和读取文件

    正如上面的内容中所提到的,文件保存选取器用于保存文件,通过Windows.Storage.Pickers命名空间中的FileSavePicker类的pickSaveFileAsync函数可以向指定的文 ...

  8. Javascript Ajax异步读取RSS文档

    RSS 是一种基于 XML的文件标准,通过符合 RSS 规范的 XML文件可以简单实现网站之间的内容共享.Ajax 是Asynchronous JavaScript and XML的缩写.通过 Aja ...

  9. 在JavaScript文件中读取properties文件的方法

    假设有JavaScript文件叫做:readproperties.js,这个文件需要读取config.properties这个配置文件,步骤如下: 1.  下载插件jquery.i18n.proper ...

随机推荐

  1. [BJOI2015]树的同构 && 树哈希教程

    题目链接 有根树的哈希 离散数学中对树哈希的描述在这里.大家可以看看. 判断有根树是否同构,可以考虑将有根树编码.而编码过程中,要求保留树形态的特征,同时忽略子树顺序的不同.先来看一看这个方法: 不妨 ...

  2. Keras学习笔记二：保存本地模型和调用本地模型

    使用深度学习模型时当然希望可以保存下训练好的模型,需要的时候直接调用,不再重新训练 一.保存模型到本地 以mnist数据集下的AutoEncoder 去噪为例.添加: file_path=" ...

  3. Windows上配置Mask R-CNN及运行示例demo.ipynb

    最近做项目需要用到Mask R-CNN,于是花了几天时间配置.简单跑通代码,踩了很多坑,写下来分享给大家. 首先贴上官方Mask R-CNN的Github地址:https://github.com/m ...

  4. win10 c++程序打包

    步骤如下: 1. 先动态编译连链接,生成exe: 2. 找到exe依赖的dll文件 使用Process Explore来获取所依赖的dll文件 打开procexp.exe,通过菜单View–Lower ...

  5. LC 833. Find And Replace in String

    To some string S, we will perform some replacement operations that replace groups of letters with ne ...

  6. react-native命令初始化项目后可借助webstrom快速运行与调试项目

    利用webstorm工具打开RN项目,点击 然后添加 然后进行配置 最后,点击apply ,OK完成 后期运行项目直接点击:

  7. oracle 查看数据库和表命令

    1.su – oracle 不是必需,适合于没有DBA密码时使用,可以不用密码来进入sqlplus界面. 2.sqlplus /nolog 或sqlplus system/manager 或./sql ...

  8. Xman冬令营writeup

    做题一时爽,期末火葬场,一晚上水了三题,跪求期末不挂,老老实实去复习.祝各位表哥冬令营玩的开心. 中二的成长之路 很容易发现图片本身就是个压缩包,里面还有个图片,但是加密了所以需要我们求出压缩包的密码 ...

  9. 七十四：flask信号之flask的内置信号

    flask所有的内置信号 1.template_rendered:模板渲染完成后的信号2.before_render_template:模板渲染之前的信号3.request_started:模板开始渲 ...

  10. 根据XML文件 生成 java类

    最近一直在做关于webservice 的项目,这种项目最麻烦的就是根据对方的要求产生XML,文档里面虽然有XML结构,但是要转化为java里面的实体实在费劲, 有个自动化的工具就好了,半自动化也好,省 ...