JavaScript 文件流轉換與使用

時間 2019-11-12

標籤 javascript 文件轉換使用欄目 JavaScript 简体版

原文原文鏈接

談起文件流處理，通常你們都不會太在乎前端的文件類型數據處理，今天咱們來談一談前端如何處理文件類型數據。在這裏不得不提早相關文件流的操做對象及接口。

內置文件流接口： Blob（文件流接口定義）
內置文件流對象： File（單文件，繼承於接口Blob，故可以使用Blod的方法級）和 FileList（多文件集合）
內置文件流讀取對象： FileReader（單文件讀取）

2. 什麼狀況下使用文件對象處理數據，以及文件流如何使用。

使用狀況： ①.<input type="file"/> 上傳文件是處理文件。

②.canvas將圖片轉換Bold數據類型或DataURL數據類型

③.圖片，多媒體文件壓縮使用

如何使用：

案例一: 上傳圖片，在web端預覽使用DataURL方式預覽圖片。代碼以下：

<!DOCTYPE html>
<html>
<head>
  <title>圖片上傳預覽</title>
</head>
<body>
  <input type="file" class="upload" />
  <img class="previewImg" src=""/>
</body>
</html>

複製代碼

(function(){
    var dataUrl;
    var file = document.querySelector('input.upload').files[0];
    var fr = new FileReader();
    fr.readAsDataURL(file); //讀取文件內容，讀取完成,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容。
    // fr.readAsBinaryString(file) 讀取文件內容，讀取完成，result屬性中將包含所讀取文件的原始二進制數據。
    // fr.readAsText(file) 讀取文件內容,讀取完成,result屬性中將包含一個字符串以表示所讀取的文件內容。
    // fr.readAsArrayBuffer(file) 讀取文件內容,讀取完成,result 屬性中保存的將是被讀取文件的 ArrayBuffer 數據對象.
    fr.onload(function(){ //文件讀取成功回調
        dataUrl = fr.result;  //result屬性爲data:URL格式,與讀取方式有關
        document.querySelector('img.previewImg').src = dataUrl 
    });
})複製代碼

案例二: web端轉換img標籤圖片格式爲bold數據類型或DataURL數據類型

<!DOCTYPE html>
<html>
<head>
  <title>圖片上傳預覽</title>
</head>
<body>
  <img class="left-img" src="./images/AAA.png"/>
  <img class="right-img" src=""/>  
</body>
</html>


複製代碼

(function(){
   /**
    *採用canvas繪圖時要考慮到圖片跨越問題，具體解決方案見下連接
    *（https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image）
    * 本文不涉及跨越問題
    */
    var image = document.querySelector('img.left-img');
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height= image.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage( img, 0, 0 );
    console.log(canvas.toBlob());//轉換成bold類型
    console.log(canvas.toDataURL());//轉換成dataURL類型
})複製代碼

案例三: 上傳圖片並壓縮轉換成bold數據類型或DataURL數據類型

<!DOCTYPE html>
<html>
<head> 
  <!-- referrer策略設置，該設置可以使圖片跨越訪問 -->
  <meta name="referrer" content="no-referrer" />
  <title>圖片上傳預覽</title>
</head>
<body>
  <input type="file" class="upload" />
  <img class="previewImg" src=""/>
</body>
</html>複製代碼

(function(){
   /**
    * 採用canvas繪圖時要考慮到圖片跨越問題，若以上meta沒解決跨越問題，具體解決方案見下連接
    *（https://developer.mozilla.org/zh-CN/docs/Web/HTML/CORS_enabled_image）
    * 本文不涉及跨越問題
    */
    var dataUrl,
    image = new Image();
    fillle = document.querySelector('input.upload').files[0],
    fr = new FileReader();
    fr.readAsDataURL(file); //讀取文件內容，讀取完成,result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容。
    fr.onload(function(){ //文件讀取成功回調
        dataUrl = fr.result;  //result屬性爲data:URL格式,與讀取方式有關
        image.src = dataUrl;
    });
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height= image.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage( img, 0, 0 );
    canvas.toBlob(function(blob) {
        console.log(blob)  //轉換成bold類型
    },"image/jpeg", 0.8);
    var DataURL = canvas.toDataURL.toDataURL("image/jpeg", 0.8);
    document.querySelector('img.previewImg').src = DataURL;
    console.log(DataURL)  //轉換成DataURL 類型
})複製代碼

相關標籤/搜索

轉換

流轉

換用