html5中將圖片的絕對路徑轉換成檔案物件
將圖片的絕對路徑轉換成base64編碼,請看這篇文章
我們先來理解基本知識點:
1. 理解HTML5中的FileList物件與file物件。
在HTML5中,FileList物件表示使用者選擇的檔案列表。通過新增multipe屬性,file控制元件內允許一次選擇多個檔案。控制元件內的每一個使用者選擇的檔案都是一個
file物件,而FileList物件則是file物件的列表。代表使用者選擇的所有檔案。我們先來看一個簡單的demo,看下file檔案物件有哪些屬性。如下程式碼:
<!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型別,如果是未知型別,則返回一個空字串。
請看如下程式碼:
<!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物件。程式碼如下:
<!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物件。因此我們可以使用圖片的絕對地址轉換成檔案物件。
因此我們可以使用絕對地址的圖片轉換成file檔案物件,詳細的demo可以看我git上圖片上傳控制元件,該外掛先是圖片上傳支援,然後突然發現到編輯頁面的時候,需要顯示預設的圖片,也可以同時支援在預設顯示圖片的情況下繼續上傳新圖片,或者刪除所有的圖片,但是開發人員給我的只有圖片的絕對地址,所以就一直想通過圖片的絕對地址如何轉換成file物件,如果不轉成file物件的話,使用這句程式碼的時候 var reader = new FileReader(); 會報錯,因此可以使用我們上面
講的blob物件先轉換成blob物件,然後就可以使用檔案操作物件 fileReader。
詳細的程式碼,請看我git上的 圖片上傳控制元件(https://github.com/tugenhua0707/html5UploadImage)
, 效果檢視 https://tugenhua0707.github.io/html5UploadImage/index.html