js blob与base64互转、以及file和base64的相互转换
file和base64
1. file文件转换为base64，得到base64格式图片
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(){
console.log(reader.result); //获取到base64格式图片
};2. base64转换为file
function dataURLtoFile(dataurl, filename) {//将base64转换为文件
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});
}运用案例：
<input type="file" name="" id="imgfile">
<script>
var base64Img = '';
document.getElementById('imgfile').onchange = function(){
var fileReader = new FileReader();
fileReader.readAsDataURL(this.files[0]);
fileReader.onload = function(){
base64Img = fileReader.result;
console.log(dataURLtoFile(base64Img,'img11'))
}
}
function dataURLtoFile(dataurl, filename) {//将base64转换为文件
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});
}
</script>blob和base64
1. base64 转换为blob
function dataURItoBlob(base64Data) {
//console.log(base64Data);//data:image/png;base64,
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}2.blob流转换为base64
function blobToDataURI(blob, callback) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
callback(e.target.result);
}
}运用案例：
<input type="file" id="imgfile">
<\img src="" id="img" alt=""> //这里图片总是转义，暂且这么写，知道是img就行
<\img src="" id="img2" alt="">
<script>
document.getElementById('imgfile').onchange = function(){
reads(this.files[0],function(base64Data){ //获取图片的base64格式，显示
document.getElementById("img").src= base64Data;
var blob = dataURItoBlob(base64Data); //转换为blob格式
blobToDataURI(blob,function(result){ //blob格式再转换为base64格式
document.getElementById('img2').src = result;
})
});
}
function reads(_file,callback){
var reader = new FileReader();
reader.readAsDataURL(_file);
reader.onload = function(){
callback(reader.result);
};
}
function dataURItoBlob(base64Data) {
//console.log(base64Data);//data:image/png;base64,
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}
function blobToDataURI(blob, callback) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
callback(e.target.result);
}
}
</script>案例1：js将文件转成Base64编码字符串
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单的html5 File测试 for pic2base64</title>
<style> *{margin:0;padding:0;box-s} #txshow{width:300px;height:300px; border:none;}
</style>
<script>
window.onload = function () {
var input = document.getElementById("fielinput");
var txshow = document.getElementById("txshow");
if (typeof (FileReader) === 'undefined') {
result.innerHTML = "抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！";
input.setAttribute('disabled', 'disabled');
} else {
input.addEventListener('change', readFile, false);
txshow.onclick = function () { input.click(); }
}
}
function readFile() {
var file = this.files[0];
//判断是否是图片类型
/*if (!/image\/\w+/.test(file.type)) {
alert("只能选择图片");
return false;
}*/
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
txshow.src = this.result;
document.getElementById("data").innerText=this.result.substring(this.result.indexOf(',')+1);
}
}
</script>
</head>
<body>
<input type="file" id="fielinput" />
<img id="txshow" />
<p/>解析之后的base64数据：<p/>
<div id="data"></div>
</body>
</html>参考：https://blog.csdn.net/qq_34664239/article/details/94595508
https://www.cnblogs.com/webuserlast/p/4842498.html
