第js圖片上傳中file、bolb、base64圖片之間的相互轉(zhuǎn)化JS上傳圖片

我們要清楚，圖片的展示方式有三種：分別為file(文件流)、bolb(本地流)、base64(二進(jìn)制流)

File接口提供有關(guān)文件的信息，并允許網(wǎng)頁中的JavaScript訪問其內(nèi)容。

通常情況下，F(xiàn)ile對象是來自用戶在一個元素上選擇文件后返回的FileList對象,也可以是來自由拖放操作生成的DataTransfer對象，或者來自HTMLCanvasElement上的mozGetAsFile()API。在Gecko中，特權(quán)代碼可以創(chuàng)建代表任何本地文件的File對象，而無需用戶交互

File對象是特殊類型的Blob，且可以用在任意的Blob類型的context中。比如說，F(xiàn)ileReader,URL.createObjectURL(),createImageBitmap(),及XMLHttpRequest.send()都能處理Blob和File。

Blob對象表示一個不可變、原始數(shù)據(jù)的類文件對象。指向的是本地的臨時地址，Blob表示的不一定是JavaScript原生格式的數(shù)據(jù)。File接口基于Blob，繼承了blob的功能并將其擴展使其支持用戶系統(tǒng)上的文件。

base64

Base64是一組相似的二進(jìn)制到文本（binary-to-text）的編碼規(guī)則，使得二進(jìn)制數(shù)據(jù)在解釋成radix-64的表現(xiàn)形式后能夠用ASCII字符串的格式表示出來。Base64這個詞出自一種MIME數(shù)據(jù)傳輸編碼。如果是圖片的base64，可以是可以用來壓縮

他們之間是可以相互轉(zhuǎn)化的，上傳圖片一般會拿到blob和file

壓縮我們選用canvas來進(jìn)行壓縮，toDataURL方式會把圖片自動轉(zhuǎn)成base64

使用canvas壓縮圖片*代碼

exportfunctiontranslate(imgData,callback){

varimg=newImage();

img.src=imgData.tempFilePaths[0];

img.onload=function(){

varthat=this;

varh=that.height;//保證壓縮后的高度一樣

varw=that.width;//保證壓縮后的寬度一樣

varcanvas=document.createElement('canvas');//創(chuàng)建canvas

varctx=canvas.getContext('2d');//2d格式

//創(chuàng)建寬高屬性，并給canvas新的屬性節(jié)點

varanw=document.createAttribute("width");

anw.nodeValue=w;

varanh=document.createAttribute("height");

anh.nodeValue=h;

canvas.setAttributeNode(anw);

canvas.setAttributeNode(anh);

ctx.drawImage(that,0,0,w,h);//繪畫到canvas里面

varquality=0.1;//可以從0到1的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會使用默認(rèn)值0.92。其他參數(shù)會被忽略

varbase64=canvas.toDataURL('image/jpeg',quality);//轉(zhuǎn)換成base64

canvas=null;

varres=dataURLtoFile(base64,imgData.tempFiles[0].name);

callback(res);

base64轉(zhuǎn)file*代碼

functionbase64ToFile(dataurl,filename){//將base64轉(zhuǎn)換為文件

vararr=dataurl.split(','),

mime=arr[0].match(/:(.*);/)[1],

bstr=atob(arr[1]),

n=bstr.length,

u8arr=newUint8Array(n);

while(n--){

u8arr[n]=bstr.charCodeAt(n);

returnnewFile([u8arr],filename,{type:mime});

base64轉(zhuǎn)blob*代碼

functionbase64toBlob(dataurl){//base64轉(zhuǎn)blob

vararr=dataurl.split(','),

mime=arr[0].match(/:(.*);/)[1],

bstr=atob(arr[1]),

n=bstr.length,

u8arr=newUint8Array(n);

while(n--){

u8arr[n]=bstr.charCodeAt(n);

returnnewBlob([u8arr],{type:mime});

blob轉(zhuǎn)base64*代碼

functionblobToBase64(blob,callback){//blob轉(zhuǎn)base64

letreader=newFileReader();

reader.onload=function(e){callback(e.target.result);}

reader.readAsDataURL(blob);

除了以上的方法也可以使用canvas轉(zhuǎn)化成base64

blob轉(zhuǎn)file*代碼

方法一：

functionblobToFile(blob,fileName,type){//blob轉(zhuǎn)file

letfiles=newwindow.File([blob],fileName,{type:type})

returnfiles

方法二：

functionblobToFile(blob,fileName){//blob轉(zhuǎn)file

blob.lastModifiedDate=newDate();

=fileName;

returnblob;

file轉(zhuǎn)bse64*代碼

functionfileToBase64（file）{//file轉(zhuǎn)bse64

letreader=newFileReader();

reader.rea