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 = 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打不开

vue页面直接使用base64位图片

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

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