html5將圖片的絕對路徑轉換成文件對象

時間 2019-11-18

標籤 html5 html 圖片絕對路徑轉換文件對象欄目 HTML5 简体版

原文原文鏈接

寫在前面：純屬根據某位大神的博客複製粘貼，由於工做須要用到這個，抄完就順便不要臉的抄襲了，其實只是想記錄一下，以便之後還能用到。
原文：https://blog.csdn.net/weixin_33957648/article/details/86251969html

基本知識點
1. 理解HTML5中的FileList對象與file對象。web

在HTML5中，FileList對象表示用戶選擇的文件列表。經過添加multipe屬性，file控件內容許一次選擇多個文件。控件內的每個用戶選擇的文件都是一個
file對象，而FileList對象則是file對象的列表。表明用戶選擇的全部文件。咱們先來看一個簡單的demo，看下file文件對象有哪些屬性。以下代碼：canvas

<!DOCTYPE html>
<html>
  <head>
    <title>filesystem:URL</title>
  </head>
  <body>
    <div>
      <label>選擇：</label>
      <input type='file' multiple id="file" />
      <input type="button" value="文件上傳" onClick="showFile()" />
    </div>
    <script>
      function showFile() {
        var files = document.getElementById('file').files;  // 返回全部被選擇的文件
        for (var i = 0, ilen = files.length; i < ilen; i++) {
          // 打印出單個文件對象的信息
          console.log(files[i]);
          /*  
           * 打印的信息以下：
           File {
            lastModified: 1457946612000
            lastModifiedDate: Mon Mar 14 2016 17:10:12 GMT+0800 (CST) {}
            name: "test.html"
            size: 796
            type: "text/html"
            webkitRelativePath: "" 
          */
          /*  若是上傳的是一張圖片的話，會返回以下信息的
            File {
              lastModified: 1466907500000
              lastModifiedDate: Sun Jun 26 2016 10:18:20 GMT+0800 (CST) {}
              name: "a.jpg"
              size: 23684
              type: "image/jpeg"
              webkitRelativePath: ""
            }
          */
          /*
           所以 若是須要判斷該上傳的文件是否是圖像文件的話，能夠根據type類型來判斷以下：
           var file = files[i];
           if (!/image\/\w+/.test(file.type)) {
              console.log('該文件不是圖像文件');
           } else {
              console.log('該文件是圖像文件');
           }

           可是若是隻讓傳圖片的話，能夠在image控件添加一個屬性 accept="image/*" 便可；咱們能夠以下寫代碼：
           <input type='file' multiple accept = 'image/gif,image/jpeg,image/jpg,image/png' />
           */
        }
      }
    </script>
  </body>
</html>

2. 理解Blob對象編碼

要點：在HTML5中，新增一個Blob對象，表明原始二進制數據，其實file對象也是繼承了Blob對象。
Blob對象有兩個屬性，size屬性表示一個Blob對象的字節長度，type屬性表示Blob的MIME類型，若是是未知類型，則返回一個空字符串。url

請看以下代碼：spa

<!DOCTYPE html>
<html>
  <head>
    <title>filesystem:URL</title>
  </head>
  <body>
    <div>
      <label>選擇文件：</label>
      <input type="file" id="file" />
      <input type="button" value="顯示文件信息" onClick="showFileType()" />
      <p>文件字節長度: <span id="size"></span></p>
      <p>文件類型：<span id="type"></span></p>
    </div>
    <script>
      function showFileType() {
        var file;
        // 獲取用戶選擇的第一個文件
        file = document.getElementById('file').files[0];
        var size = document.getElementById('size');
        var type = document.getElementById('type');
        // 顯示文件字節的長度
        size.innerHTML = file.size;
        // 顯示文件的類型
        type.innerHTML = file.type;

        // 打開控制檯 查看返回的file對象
        console.log(file);
      }
    </script>
    
  </body>
</html>

注意：Blob和File是能夠同時使用的，可使用FileReader從Blob中讀取數據。
下面是一段絕對路徑的圖片地址轉換爲base64編碼的圖片，而後將base64編碼的圖片轉換成blob對象。代碼以下：.net

<!DOCTYPE html>
<html>
  <head>
    <title>將以base64的圖片url數據轉換爲Blob</title>
  </head>
  <body>
    <script>
      /**  
       * 將以base64的圖片url數據轉換爲Blob  
       * @param urlData  
       * 用url方式表示的base64圖片數據  
       */  
      function convertBase64UrlToBlob(base64){ 
        var urlData =  base64.dataURL;
        var type = base64.type;
        var bytes = window.atob(urlData.split(',')[1]); //去掉url的頭，並轉換爲byte
        //處理異常,將ascii碼小於0的轉換爲大於0  
        var ab = new ArrayBuffer(bytes.length);  
        var ia = new Uint8Array(ab);  
        for (var i = 0; i < bytes.length; i++) {  
            ia[i] = bytes.charCodeAt(i);  
        }  
        return new Blob( [ab] , {type : type});  
      }
      /* 
       * 圖片的絕對路徑地址 轉換成base64編碼 以下代碼： 
       */
      function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return {
          dataURL: dataURL,
          type: "image/"+ext
        };
      }
      var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
      var image = new Image();
      image.crossOrigin = '';
      image.src = img;
      image.onload = function(){
        var base64 = getBase64Image(image);
        console.log(base64);
        /*
         打印信息以下：
         {
          dataURL: "data:image/png;base64,xxx"
          type: "image/jpg"
         }
         */
        var img2 = convertBase64UrlToBlob(base64);
        console.log(img2);
        /*
         打印信息以下：
         Blob {size: 9585, type: "image/jpg"}
         */
      } 
    </script>
  </body>
</html>

注意：在HTML5中，新增一個Blob對象，表明原始二進制數據，其實file對象也是繼承了Blob對象。所以咱們可使用圖片的絕對地址轉換成文件對象。code

所以咱們可使用絕對地址的圖片轉換成file文件對象，開發人員給個人只有圖片的絕對地址，因此就一直想經過圖片的絕對地址如何轉換成file對象，若是不轉成file對象的話，使用這句代碼的時候 var reader = new FileReader(); 會報錯，所以可使用咱們上面講的blob對象先轉換成blob對象，而後就可使用文件操做對象 fileReader。cdn