FileReader生成图片dataurl的分析

时间 2019-11-30

标签 filereader 生成图片 dataurl 分析繁體版

原文原文链接

目录javascript

File API及FileReader简介

参考资料html

1.[File接口][https://developer.mozilla.org/zh-CN/docs/Web/API/File]html5

2.[FileReader接口][https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader]java

3.[FileList接口][https://developer.mozilla.org/zh-CN/docs/Web/API/FileList]api

4.[DataTransfer接口][https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer]浏览器

总结:异步

1.File接口提供文件信息,并容许网页js访问其中内容函数

2.File对象的来源多是:ui

input元素上选择文件后返回的 FileList对象(InuputElement.files)
自由拖放操做生成的 DataTransfer 对象
来自 HTMLCanvasElement上的 mozGetAsFile() API

3.FileList对象: File对象的一个列表this

访问方法: FileList[index] 或 FileList.item(index)

4.FileReader对象容许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容,使用 File或 Blob对象指定要读取的文件或数据.

5.FileReader对象的属性,方法,事件处理:

属性

FileReader.error(只读): 表示在读取文件时发生的错误

FileReader.readyState(只读): 表示FileReader读取状态的数字

常量名	值	含义
EMPTY	0	还没有加载任何数据
LOADING	1	数据正在加载中
DONE	2	已完成所有加载请求

FileReader.result(只读): 上一次读取的文件的内容(仅在读取操做完成后才有效，数据的格式取决于使用哪一个方法来启动读取操做--这是用FileReader将图片转换为dataurl的关键)

方法

FileReader.abort(): 停止读取,返回时readyState设为DONE
FileReader.readAsArrayBuffer(): 读取指定Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer数据对象
FileReader.readAsDataURL(): 读取指定Blob中的内容, 一旦完成, result 属性中将包含一个data:URL格式字符串表示所读内容
FileReader.readAsText(): 读取指定Blob中的内容, 一旦完成, result 属性中将包含一个字符串表示所读内容

事件

事件	触发时机
FileReader.onabort	读取被中断
FileReader.onerror	读取出错
FileReader.onload	读取成功
FileReader.onloadstart	开始读取时
FileReader.onloadend	读取完毕(成功/失败)
FileReader.onprogress	读取过程当中

注:FileReader继承自EventTarget，因此全部这些事件也能够经过addEventListener方法使用。

结合补充知识进行代码分析

<input type="file" value="" onchange="BuildDataUrl(this)" style="border:1px solid black;width:300px">

用input元素(type为file),经过选择文件获取File对象列表并为之绑定onchange事件.当选择文件时,input输入域内容改变,调用dataurl的产生函数BuildDataUrl()

function BuildDataUrl(source){
            var file = source.files[0]; //经过input的files属性获取选择的文件对应的File对象
            if(window.FileReader){ //浏览器支持检测
                var fr = new FileReader(); //构造一个FileReader对象fr
                fr.onloadend = function(e){ //为fr对象绑定onloadend事件(当文件读取完毕时触发,此时result已经获取了加载内容)
                    document.getElementById("txtBase64").value=e.target.result; //e.target等同于this
                    document.getElementById("imgView").src=e.target.result;
                };
                fr.readAsDataURL(file); //以data:URL格式读取选择的文件,读取完毕时触发fr的onloadend事件
            }
        }

修改尝试: 拖曳图片到网页完成转换

1.实质: 修改File对象的来源及输入方式

2.知识补充:

[DataTransfer接口][https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer]

[html拖放API][https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API]

[html5拖放][http://www.w3school.com.cn/html5/html_5_draganddrop.asp]

总结:

1.DataTransfer对象: 在进行拖放操做时,用来保存,经过拖放动做,拖动到浏览器的数据。它能够保存一项或多项数据、一种或者多种数据类型。

咱们用到的属性: files--拖动文件时的有效文件列表(不涉及文件拖动时,此列表为空)

2.DataTransfer对象的获取: 在拖动事件的事件对象event中的dataTransfer属性中保存

3.拖放操做涉及的步骤:

设置元素为可拖放(draggable 属性设置为 true)
拖动什么 - ondragstart 和 setData()设置被拖数据
放到何处 - ondragover(须要取消事件的默认操做)
进行放置及数据处理 - ondrop(须要取消事件的默认操做)

3.咱们本次尝试只涉及到最后两步,代码以下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>DataUrlBuilder</title>
</head>

<body>
    <p>利用HTML5的FileReader生成dataurl</p>
    
    <div style="width:300px;height:100px;border:1px solid black;text-align:center;" ondragover="allowDrop(event)" ondrop="drop(event)">拖曳图片到此处完成转换</div>
    
    <img id="imgView" src="" style="width:300px" alt="图片预览">

    <textarea name="" id="txtBase64" cols="50" rows="30"></textarea>
    
    <script type="text/javascript">
        function BuildDataUrl(source){
            var file = source.files[0];
            if(window.FileReader){
                var fr = new FileReader();
                fr.onloadend = function(e){
                    document.getElementById("txtBase64").value=this.result;
                    document.getElementById("imgView").src=this.result;
                };
                fr.readAsDataURL(file);
            }
        }

        function allowDrop(event){
            event.preventDefault();
        }

        function drop(event){
            event.preventDefault();
            BuildDataUrl(event.dataTransfer);
        }
    </script>
</body>

</html>

4.代码分析:

div元素设置被拖动文件的放置区
- 绑定事件ondragover来容许文件的放置(取消事件默认行为)
- 绑定事件ondrop来进行文件放置后的数据转处理
img元素设置图片的预览区
script元素--js代码:
- 函数BuildDataUrl()保持不变
- 函数allowDrop()--ondragover事件的触发函数
- 函数drop()--ondrop事件的触发函数: 经过event.dataTransfer属性获取DataTransfer对象,并以之做为参数调用BuildDataUrl函数

FileReader生成图片dataurl的分析

相关代码及html(来源:百度百科)

File API及FileReader简介

结合补充知识进行代码分析

修改尝试: 拖曳图片到网页完成转换