base64转图片
转换下载到本地
var base64 = this.imgSrc.toString(); // imgSrc 就是base64图片地址
var byteCharacters = atob(
base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")//去掉data:image/png;base64
);
var byteNumbers = new Array(byteCharacters.length);
for (var i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
var blob = new Blob([byteArray], {
type: undefined,
});
var aLink = document.createElement("a");
aLink.download = "图片名称.jpg"; //这里写保存时的图片名称
aLink.href = URL.createObjectURL(blob);
aLink.click();
图片转base64
transitionBase64(){
const url =
"https://img0.baidu.com/it/u=73689209,3130028231&fm=253&fmt=auto&app=138&f=JPEG";
axios
.get(url, {
responseType: "blob", //一定要传！！！
})
.then((res) => {
// console.log(res.data, "二进制流");
this.getBase64(res.data).then((binary) => {
console.log("base64图地址",binary, );
this.imgSrc = binary;
});
});
},
// 二进制流转换为base64 格式。
getBase64(data) {
const blob = new Blob([data], { type: "image/jpg" }); //类型一定要写！！！
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
},
-
请求头 responseType: “blob” 一定要转。否则格式不对
-
const blob = new Blob([res.data], { type: “image/jpg” })
的type一定要写。否则转后的base64打不开文章来源：https://www.toymoban.com/news/detail-596078.html
vue页面直接使用base64位图片
<img :src=" 'data:image/png;base64,' + base64的地址 ">
将后台给返回的base64直接拼接的img的:src上
前面加固定的前缀 data:image/png;base64,文章来源地址https://www.toymoban.com/news/detail-596078.html
到了这里，关于base64转图片及互转的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
