base64转图片及互转

目录

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 =newArray(byteCharacters.length);for(var i =0; i < byteCharacters.length; i++){
        byteNumbers[i]= byteCharacters.charCodeAt(i);}var byteArray =newUint8Array(byteNumbers);var blob =newBlob([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 =newBlob([data],{type:"image/jpg"});//类型一定要写！！！returnnewPromise((resolve, reject)=>{const reader =newFileReader();
        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打不开

vue页面直接使用base64位图片

<img :src=" 'data:image/png;base64,' + base64的地址 ">

将后台给返回的base64直接拼接的img的:src上
前面加固定的前缀 data:image/png;base64,