我要评论vue base64图片转网络url
src支持base64图片，正常base64图片可以直接复制到图片src，也可以将其转为url
// data
url: 'xxxxxxxx' // base64编码
imgurl: '' // 图片路径
// methods
base64imgtofile (dataurl, filename = 'file') {
const arr = dataurl.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const suffix = mime.split('/')[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new uint8array(n)
while (n--) {
u8arr[n] = bstr.charcodeat(n)
}
return new file([u8arr], `${filename}.${suffix}`, {
type: mime
})
},打印得到file文件，再转为png图片
const img = 'data:image/png;base64,' + img this.file = this.base64imgtofile(img) // 得到file对象 this.imgurl = window.webkiturl.createobjecturl(file) || window.url.createobjecturl(file) // imgurl图片网络路径
base64转url、url转base64
// url转base64
dataurltoblob(dataurl) {
return new promise((resolve, reject) => {
let 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);
}
resolve(new blob([u8arr], {type:mime}));
})
},
const images = await promise.all([
this.dataurltoblob(this.imageurl),
this.dataurltoblob(this.imageurl2),
])
// base64转url
dataurltobloburl(dataurl) {
return new promise((resolve, reject) => {
let 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);
}
let blob = new blob([u8arr], {type:mime});
let url = url.createobjecturl(blob);
resolve(url);
});
},
let url1 = await this.dataurltobloburl(this.imageurl);
let url2 = await this.dataurltobloburl(this.imageurl2);
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论