html5中将图片的绝对路径转换成文件对象
html5中將圖片的絕對(duì)路徑轉(zhuǎn)換成文件對(duì)象
將圖片的絕對(duì)路徑轉(zhuǎn)換成base64編碼，請(qǐng)看這篇文章
我們先來理解基本知識(shí)點(diǎn)：
1.?理解HTML5中的FileList對(duì)象與file對(duì)象。
在HTML5中，FileList對(duì)象表示用戶選擇的文件列表。通過添加multipe屬性，file控件內(nèi)允許一次選擇多個(gè)文件。控件內(nèi)的每一個(gè)用戶選擇的文件都是一個(gè)
file對(duì)象，而FileList對(duì)象則是file對(duì)象的列表。代表用戶選擇的所有文件。我們先來看一個(gè)簡單的demo，看下file文件對(duì)象有哪些屬性。如下代碼：
2.?理解Blob對(duì)象
要點(diǎn)：在HTML5中，新增一個(gè)Blob對(duì)象，代表原始二進(jìn)制數(shù)據(jù)，其實(shí)file對(duì)象也是繼承了Blob對(duì)象。
Blob對(duì)象有兩個(gè)屬性，size屬性表示一個(gè)Blob對(duì)象的字節(jié)長度，type屬性表示Blob的MIME類型，如果是未知類型，則返回一個(gè)空字符串。
請(qǐng)看如下代碼：
<!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>文件字節(jié)長度: <span id="size"></span></p><p>文件類型：<span id="type"></span></p></div><script>function showFileType() {var file;// 獲取用戶選擇的第一個(gè)文件 file = document.getElementById('file').files[0];var size = document.getElementById('size');var type = document.getElementById('type');// 顯示文件字節(jié)的長度 size.innerHTML = file.size;// 顯示文件的類型 type.innerHTML = file.type;// 打開控制臺(tái) 查看返回的file對(duì)象 console.log(file);}</script></body> </html>注意：Blob和File是可以同時(shí)使用的，可以使用FileReader從Blob中讀取數(shù)據(jù)。
下面是一段絕對(duì)路徑的圖片地址轉(zhuǎn)換為base64編碼的圖片，然后將base64編碼的圖片轉(zhuǎn)換成blob對(duì)象。代碼如下：
<!DOCTYPE html> <html><head><title>將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob</title></head><body><script>/** * 將以base64的圖片url數(shù)據(jù)轉(zhuǎn)換為Blob * @param urlData * 用url方式表示的base64圖片數(shù)據(jù) */ function convertBase64UrlToBlob(base64){ var urlData = base64.dataURL;var type = base64.type;var bytes = window.atob(urlData.split(',')[1]); //去掉url的頭，并轉(zhuǎn)換為byte//處理異常,將ascii碼小于0的轉(zhuǎn)換為大于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}); }/* * 圖片的絕對(duì)路徑地址 轉(zhuǎn)換成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中，新增一個(gè)Blob對(duì)象，代表原始二進(jìn)制數(shù)據(jù)，其實(shí)file對(duì)象也是繼承了Blob對(duì)象。因此我們可以使用圖片的絕對(duì)地址轉(zhuǎn)換成文件對(duì)象。
? 因此我們可以使用絕對(duì)地址的圖片轉(zhuǎn)換成file文件對(duì)象，詳細(xì)的demo可以看我git上圖片上傳控件，該插件先是圖片上傳支持，然后突然發(fā)現(xiàn)到編輯頁面的時(shí)候，需要顯示默認(rèn)的圖片，也可以同時(shí)支持在默認(rèn)顯示圖片的情況下繼續(xù)上傳新圖片，或者刪除所有的圖片，但是開發(fā)人員給我的只有圖片的絕對(duì)地址，所以就一直想通過圖片的絕對(duì)地址如何轉(zhuǎn)換成file對(duì)象，如果不轉(zhuǎn)成file對(duì)象的話，使用這句代碼的時(shí)候 var reader = new FileReader(); 會(huì)報(bào)錯(cuò)，因此可以使用我們上面
講的blob對(duì)象先轉(zhuǎn)換成blob對(duì)象，然后就可以使用文件操作對(duì)象 fileReader。
詳細(xì)的代碼，請(qǐng)看我git上的 圖片上傳控件(https://github.com/tugenhua0707/html5UploadImage)
, 效果查看 https://tugenhua0707.github.io/html5UploadImage/index.html
總結(jié)
以上是生活随笔為你收集整理的html5中将图片的绝对路径转换成文件对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python语言所使用的特殊含义符号_P
- 下一篇： 语音识别(ASR)论文优选：端到端ASR