FileReader生成圖片dataurl的分析

時間 2019-11-30

標籤 filereader 生成圖片 dataurl 分析简体版

原文原文鏈接

目錄javascript

相關代碼及html(來源:百度百科)

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

<body>
    <p>利用HTML5的FileReader生成dataurl</p>
    <input type="file" value="" onchange="BuildDataUrl(this)" style="border:1px solid black;width:300px">
    <br>
    <textarea name="" id="txtBase64" cols="50" rows="30"></textarea>
    <img id="imgView" src="" style="width:300px">
    <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=e.target.result;
                    document.getElementById("imgView").src=e.target.result;
                };
                fr.readAsDataURL(file);
            }
        }
    </script>
</body>

<html>

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函數

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。