一般来说前端展示图片会通过三种方式: 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)
blob 转 base64
原理: 利用fileReader
的readAsDataURL
,将blob
转为base64
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('base64', res)
})
base64 转 Blob
原理: Uint8Array
,ArrayBuffer
构造
function base64toBlob(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 });
}
或者
function baseToBlob (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
}
//需要你手动去掉data:image/png;base64,
使用:
let base64Str = "data:image/png;base64,iVBORw0KGgoA.....AAANSUhEUgAA"
dataURLtoBlob(base64Str)
或者,利用fetch(推荐)
fetch(`data:${type};base64,${base64}`).then(res => res.blob())
字符串 和 base64 之间互转
原理:atob
和 btoa
文章来源:https://www.toymoban.com/news/detail-426758.html
let str = btoa("Dsgsg1234567890-=[];'m,,./")
console.log(str) //RHNnc2cxMjM0NTY3ODkwLT1bXTsnbSwsLi8=
console.log(atob(str)) //Dsgsg1234567890-=[];'m,,./
而且大部分浏览器都支持 除了 IE9-btoa 方法不支持中文和特殊字符,否则会报错
所以保险起见,在转换之前还是 encodeURIComponent/encodeURI
一下吧, 当然别忘了在 atob
后,再 decodeURIComponent/decodeURI
回来。文章来源地址https://www.toymoban.com/news/detail-426758.html
到了这里,关于js实现base64,url,blob之间的相互转换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!