您好,登錄后才能下訂單哦!
這篇文章主要介紹“js中怎么實(shí)現(xiàn)file、bolb、base64圖片之間的相互轉(zhuǎn)化”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“js中怎么實(shí)現(xiàn)file、bolb、base64圖片之間的相互轉(zhuǎn)化”文章能幫助大家解決問(wèn)題。
我們要清楚,圖片的展示方式有三種:分別為file(文件流)、bolb(本地流)、base64(二進(jìn)制流)
File 接口提供有關(guān)文件的信息,并允許網(wǎng)頁(yè)中的 JavaScript 訪問(wèn)其內(nèi)容。
通常情況下, File 對(duì)象是來(lái)自用戶在一個(gè) 元素上選擇文件后返回的 FileList 對(duì)象,也可以是來(lái)自由拖放操作生成的 DataTransfer 對(duì)象,或者來(lái)自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中,特權(quán)代碼可以創(chuàng)建代表任何本地文件的File對(duì)象,而無(wú)需用戶交互
File 對(duì)象是特殊類型的 Blob,且可以用在任意的 Blob 類型的 context 中。比如說(shuō), FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能處理 Blob 和 File。
Blob 對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類文件對(duì)象。指向的是本地的臨時(shí)地址,Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。File 接口基于Blob,繼承了 blob 的功能并將其擴(kuò)展使其支持用戶系統(tǒng)上的文件。
Base64 是一組相似的二進(jìn)制到文本(binary-to-text)的編碼規(guī)則,使得二進(jìn)制數(shù)據(jù)在解釋成 radix-64 的表現(xiàn)形式后能夠用 ASCII 字符串的格式表示出來(lái)。Base64 這個(gè)詞出自一種 MIME 數(shù)據(jù)傳輸編碼。如果是圖片的base64,可以是可以用來(lái)壓縮
他們之間是可以相互轉(zhuǎn)化的,上傳圖片一般會(huì)拿到blob和file
壓縮我們選用canvas來(lái)進(jìn)行壓縮,toDataURL方式會(huì)把圖片自動(dòng)轉(zhuǎn)成base64
export function translate(imgData, callback) { var img = new Image(); img.src = imgData.tempFilePaths[0]; img.onload = function() { var that = this; var h = that.height; // 保證壓縮后的高度一樣 var w = that.width; // 保證壓縮后的寬度一樣 var canvas = document.createElement('canvas'); //創(chuàng)建canvas var ctx = canvas.getContext('2d'); //2d格式 // 創(chuàng)建寬高屬性,并給canvas新的屬性節(jié)點(diǎn) var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 繪畫到canvas里面 var quality = 0.1; //可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍,將會(huì)使用默認(rèn)值 0.92。其他參數(shù)會(huì)被忽略 var base64 = canvas.toDataURL('image/jpeg', quality);//轉(zhuǎn)換成base64 canvas = null; var res = dataURLtoFile(base64,imgData.tempFiles[0].name); callback(res); } }
function base64ToFile(dataurl, filename) { //將base64轉(zhuǎn)換為文件 var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, {type: mime}); }
function base64toBlob(dataurl) { //base64轉(zhuǎn)blob var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], { type: mime }); }
function blobToBase64(blob, callback) { //blob轉(zhuǎn)base64 let reader = new FileReader(); reader.onload = function (e) { callback(e.target.result); } reader.readAsDataURL(blob); }
除了以上的方法也可以使用canvas轉(zhuǎn)化成base64
方法一:
function blobToFile(blob, fileName, type) { //blob轉(zhuǎn)file let files = new window.File([blob], fileName, {type: type}) return files }
方法二:
function blobToFile(blob, fileName){ // blob轉(zhuǎn)file blob.lastModifiedDate = new Date(); blob.name = fileName; return blob; };
function fileToBase64(file){ //file轉(zhuǎn)bse64 let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { return e.target.result } }
關(guān)于“js中怎么實(shí)現(xiàn)file、bolb、base64圖片之間的相互轉(zhuǎn)化”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。