js中base64、url和blob之间相互转换的3种方式(详细代码)
作者：世界太过浮夸
这篇文章主要给大家介绍了关于js中base64、url和blob之间相互转换的3种方式,Blob和File是用来表示二进制数据的,而Base64则是一种编码方式,用来把二进制数据编码成可读的字符串,需要的朋友可以参考下
url转换为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'));
};
})
}调用：
urlToBase64(url).then(res=> {
// 转化后的base64图片地址
console.log('base64', res)
});blob 转 url
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('base64', res)
})base64 转 Blob
function 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 });
}blob转 File
function blobToFile(blob, name) {
return new File([blob], name + '.png', { type: blob.type });
}总结
到此这篇关于js中base64、url和blob之间相互转换的3种方式的文章就介绍到这了,更多相关js base64、url和blob相互转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！