Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式
- url 转 base64
- Blob 转 url
- Blob 转 base64
- base64 转Blob
- base64 转 url
一般来说前端展示图片会通过三种方式： url、base64、blob
1.url: 一般来说，图片的显示还是建议使用url的方式比较好。
let url = "http://xxxxxx"2.base64： 如果图片较大，图片的色彩层次比较丰富，则不适合使用这种方式，因为其Base64编码后的字符串非常大，会明显增大HTML页面，影响加载速度。如果图片像loading或者小图标，小图片这样的，大小极小，但又占据了一次HTTP请求，而很多地方都会使用。则非常适用“base64:URL图片”技术进行优化了！
let base64Str = "data:image/png;base64,iVBORw0KG.....AAAAElFTkSuQmCC"3.blob: 当后端返回特定的图片二进制流的时候，前端用blob容器接收二进制流，再通过 URL.createObjectURL(blob)生成一个临时blob展示地址
关系图
url 转 base64
原理： 利用canvas.toDataURL的API转化成base64
function urlToBase64(url) {
return new Promise((resolve, reject) => {
let image = new Image();
image.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
// 将图片插入画布并开始绘制
canvas.getContext("2d").drawImage(image, 0, 0);
// result
let result = canvas.toDataURL("image/png");
resolve(result);
};
// CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
image.setAttribute("crossOrigin", "Anonymous");
image.src = url;
// 图片加载失败的错误处理
image.onerror = () => {
reject(new Error("urlToBase64 error"));
};
});
}使用
let imgUrL = `http://XXX.jpg`;
urlToBase64(imgUrL).then((res) => {
// 转化后的base64图片地址
console.log("base64", res);
});blob 转 url
原理： 利用URL.createObjectURL为blob对象创建临时的URL
var url = URL.createObjectURL(blob);
//或者
let binaryData = [];
binaryData.push(blob);
let url = URL.createObjectURL(new Blob(binaryData));blob 转 base64
原理： 利用fileReader的readAsDataURL，将blob转为base64
export function blobToBase64 (blob) {
return new Promise((resolve, reject) => {
const fileReader = new FileReader()
fileReader.onload = (e) => {
resolve(e.target.result)
}
// readAsDataURL
fileReader.readAsDataURL(blob)
fileReader.onerror = () => {
reject(new Error('blobToBase64 error'))
}
})
}
使用
blobToBase64(blob).then(res => {
// 输出图片base64
console.log(res)
}).catch(err => {
console.log(err)
})base64 转 Blob
原理： Uint8Array，ArrayBuffer构造
export function base64ToBlob (base64) {
let bstr = window.atob(base64),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: base64})
}
//或者
//需要你手动去掉data:image/png;base64,
function base64ToBlob (b64) {
const byteCharacters = atob(b64);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: "image/jpeg" });
return blob;
}
使用：
let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA"
base64ToBlob(base64Str)
//或者
let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA";
let ba64 = base64Str.split(',')[1];
base64ToBlob(ba64);base64 转 Url
原理：先将base64转成Blob，再将Blob转成Url文章来源：https://www.toymoban.com/news/detail-774081.html
function base64ToUrl(base) {
//需要手动去掉data:image/png;base64,
//base64-->blob
const byteCharacters = atob(base);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: "image/jpeg" });
//blob-->url
let binaryData = [];
binaryData.push(blob);
let url = URL.createObjectURL(new Blob(binaryData));
return url;
}使用：文章来源地址https://www.toymoban.com/news/detail-774081.html
let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA";
let ba64 = base64Str.split(",")[1];
base64ToUrl(ba64);到了这里，关于js实现base64、url和blob之间相互转换的三种方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
