1、Base64轉二進制文件流
方法一：
/**
* Base64字符串轉二進制流
* @param {String} dataurl Base64字符串(字符串包含Data URI scheme，例如：data:image/png;base64, )
*/
function dataURLtoBlob(dataurl) {
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,
});
}調用示例：
let dataurl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = dataURLtoBlob(dataurl);方法二：
/**
* Base64字符串轉二進制流
* @param {String} base64 Base64字符串(字符串不包含Data URI scheme)
* @param {String} type 文件類型(例如：image/png)
*/
function base64toBlob(base64, type) {
// 將base64轉為Unicode規(guī)則編碼
let bstr = atob(base64),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n); // 轉換編碼后才可以使用charCodeAt 找到Unicode編碼
}
return new Blob([u8arr], {
type,
})
}調用示例：
let dataurl = 'iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = base64toBlob(dataurl, 'image/png');?2、Base64轉File
方法一：
/**
* Base64字符串轉File文件
* @param {String} dataurl Base64字符串(字符串包含Data URI scheme，例如：data:image/png;base64, )
* @param {String} filename 文件名稱
*/
function dataURLtoFile(dataurl, filename) {
let arr = dataurl.split(',');
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename, {
type: mime
});
}調用示例：
let dataurl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let file = dataURLtoFile(dataurl, '文件名稱');方法二：
/**
* Base64字符串轉File文件
* @param {String} base64 Base64字符串(字符串不包含Data URI scheme)
* @param {String} filename 文件名稱
* @param {String} type 文件類型(例如：image/png)
*/
function base64toFile(base64, filename, type) {
// 將base64轉為Unicode規(guī)則編碼
let bstr = atob(base64);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n); // 轉換編碼后才可以使用charCodeAt 找到Unicode編碼
}
return new File([u8arr], filename, {
type: type
});
}調用示例：
let dataurl = 'iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let file = base64toFile(dataurl, '文件名稱', 'image/png');補充：
3、圖片轉Base64
/**
* 圖片轉換為base64
* @param {Object} img 圖片對象
*/
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;
}調用示例：
let img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
// 圖片地址
img.src = 'https://img2.baidu.com/it/u=1987571340,2982374133&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500';
img.onload = () => {
// 獲得Base64
let base64Str = getBase64Image(img);
console.log(base64Str)
}4、二進制流轉Base64
方法一：
/**
* 二進制流轉Base64(字符串包含Data URI scheme)
* @param {Object} data 二進制流
* @param {String} type 文件類型(例如：image/png)
*/
function getDataURL(data, type) {
return new Promise((resolve, reject) => {
const blob = new Blob([data], {
type
});
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
}調用示例：
/**
* Base64轉二進制流
* @param {String} dataurl Base64字符串(字符串包含Data URI scheme，例如：data:image/png;base64, )
*/
function getBlob(dataurl) {
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 {
data: u8arr,
type: mime
};
}// 獲得二進制流（就不調接口了，先用Base64轉成二進制流進行測試）
let dataurl =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = getBlob(dataurl);
// 二進制流轉Base64
getDataURL(blob.data, blob.type).then((base64) => {
console.log(base64);
});方法二：
/**
* 二進制流轉Base64(字符串不包含Data URI scheme)
* @param {Object} data 二進制流
*/
function getBase64(data) {
let base64 = btoa(new Uint8Array(data).reduce((data, byte) => data + String.fromCharCode(byte), ''));
return base64;
}調用示例：
// 獲得二進制流（就不調接口了，先用Base64轉成二進制流進行測試）
let dataurl =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = getBlob(dataurl);
// 二進制流轉Base64
let base64 = getBase64(blob.data);
console.log(base64);5、補充
5.1?atob()
atob()?對經過 base-64 編碼的字符串進行解碼。你可以使用?window.btoa()?方法來編碼一個可能在傳輸過程中出現問題的數據，并且在接受數據之后，使用 atob() 方法再將數據解碼。例如：你可以編碼、傳輸和解碼操作各種字符，比如 0-31 的 ASCII 碼值。?
使用：文章來源地址http://www.zghlxwxcb.cn/news/detail-445170.html
let encodedData = window.btoa("Hello, world"); // 編碼5.2?btoa()
btoa()?方法可以將一個二進制字符串（例如，將字符串中的每一個字節(jié)都視為一個二進制數據字節(jié)）編碼為?Base64?編碼的 ASCII 字符串。你可以使用這個方法來對可能遇到通信問題的數據進行編碼，然后使用?atob()?方法來對數據進行解碼。例如，你可以對 ASCII 中的控制字符（值為 0 到 31 的字符）進行編碼。
使用：
const encodedData = btoa('Hello, world'); // 編碼字符串
const decodedData = atob(encodedData); // 解碼字符串5.3?charCodeAt()
charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼，返回值是 0 - 65535 之間的整數，表示給定索引處的 UTF-16 代碼單元。
字符串中第一個字符的位置為 0， 第二個字符位置為 1，以此類推。
使用：
var str = "Hello, world";
var code = str.charCodeAt(0);5.4?fromCharCode()
fromCharCode() 可接受一個指定的 Unicode 值，然后返回一個字符串。
注意：該方法是 String 的靜態(tài)方法，字符串中的每個字符都由單獨的 Unicode 數字編碼指定。使用語法： String.fromCharCode()。文章來源：http://www.zghlxwxcb.cn/news/detail-445170.html
使用：
var str = "Hello, world";
var code = str.charCodeAt(0);
var result = String.fromCharCode(code);到了這里，關于Base64轉二進制文件流以及轉File、圖片轉Base64、二進制流轉Base64的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
