js圖片上傳中file、bolb、base64圖片之間的相互轉(zhuǎn)化
JS上傳圖片
我們要清楚，圖片的展示方式有三種：分別為file(文件流)、bolb(本地流)、base64(二進制流)
file
File 接口提供有關(guān)文件的信息，并允許網(wǎng)頁中的 JavaScript 訪問其內(nèi)容。
通常情況下， File 對象是來自用戶在一個 元素上選擇文件后返回的 FileList 對象,也可以是來自由拖放操作生成的 DataTransfer 對象，或者來自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，特權(quán)代碼可以創(chuàng)建代表任何本地文件的File對象，而無需用戶交互
File 對象是特殊類型的 Blob，且可以用在任意的 Blob 類型的 context 中。比如說， FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能處理 Blob 和 File。
blob
Blob 對象表示一個不可變、原始數(shù)據(jù)的類文件對象。指向的是本地的臨時地址，Blob 表示的不一定是JavaScript原生格式的數(shù)據(jù)。File 接口基于Blob，繼承了 blob 的功能并將其擴展使其支持用戶系統(tǒng)上的文件。
base64
Base64 是一組相似的二進制到文本（binary-to-text）的編碼規(guī)則，使得二進制數(shù)據(jù)在解釋成 radix-64 的表現(xiàn)形式后能夠用 ASCII 字符串的格式表示出來。Base64 這個詞出自一種 MIME 數(shù)據(jù)傳輸編碼。如果是圖片的base64，可以是可以用來壓縮
他們之間是可以相互轉(zhuǎn)化的，上傳圖片一般會拿到blob和file
圖片壓縮
壓縮我們選用canvas來進行壓縮，toDataURL方式會把圖片自動轉(zhuǎn)成base64
使用canvas壓縮圖片*代碼
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é)點
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ì)量。如果超出取值范圍，將會使用默認值 0.92。其他參數(shù)會被忽略
var base64 = canvas.toDataURL('image/jpeg', quality);//轉(zhuǎn)換成base64
canvas = null;
var res = dataURLtoFile(base64,imgData.tempFiles[0].name);
callback(res);
}
}
base64轉(zhuǎn)file*代碼
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});
}
base64轉(zhuǎn)blob*代碼
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 });
}
blob轉(zhuǎn)base64*代碼
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
blob轉(zhuǎn)file*代碼
方法一：
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;
};
file轉(zhuǎn)bse64*代碼
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圖片上傳blob轉(zhuǎn)file,blob轉(zhuǎn)base64,base64轉(zhuǎn)file,使用canvas壓縮圖片的知識請查看下面的相關(guān)鏈接
相關(guān)文章
這篇文章主要介紹了JavaScript如何操作css，幫助大家更好的進行前端開發(fā)，優(yōu)化網(wǎng)頁，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了js動態(tài)拼接正則表達式的兩種方法,需要的朋友可以參考下2014-03-03
js 調(diào)用本地exe的例子(支持IE內(nèi)核的瀏覽器)
js 調(diào)用本地exe程序.我實驗了一下 : 使用IE內(nèi)核的瀏覽器 都支持 火狐好像不行,感興趣的碰可以研究下2012-12-12
node.js+express+mySQL+ejs+bootstrop實現(xiàn)網(wǎng)站登錄注冊功能
這篇文章主要介紹了node.js+express+mySQL+ejs+bootstrop實現(xiàn)網(wǎng)站登錄注冊功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)留言板功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
微信小程序全局變量GLOBALDATA的定義和調(diào)用過程解析
這篇文章主要介紹了微信小程序全局變量GLOBALDATA的定義和調(diào)用過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了原生js實現(xiàn)貪吃蛇小游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
制作論壇用到的輸入框~想模仿百度之類的寫一個自動匹配字符2013-06-06
JavaScript 中的輸出數(shù)據(jù)多種方式
在 JavaScript 中，不像 Java 等語言，它沒有任何打印或者輸出方法的，在js中通過使用4種方式來輸出數(shù)據(jù)，本文通過實例代碼給大家詳細介紹，感興趣的朋友跟隨小編一起看看吧2022-03-03
這篇文章主要為大家詳細介紹了javascript回到頂部特效，具有一定的參考價值，感興趣的朋友可以參考一下2016-07-07