如題：最近在做項目發(fā)現(xiàn)頁面上有些圖片是動態(tài)獲取的，也就是后臺給我們返回圖片的存放地址，一般都是放在服務器上的某個位置，我們直接拿到渲染一下就行了，（前提是不存在跨域問題），

但是由于項目特殊性，后臺使用了Python 渲染出來的圖片是svg格式的圖片，并且是矢量圖，不太好轉成 png這種圖片，不可以直接存放地址，所以想到了用base64 不也行嗎。。

例如：

 <div class="scatter" id="scatter" > 
      <img :src="inputImg" alt="" :style="{width:widthImg,height:heightImg}">
 </div>


//下面 直接使用vue 語法

// 接口獲取到的 字段直接賦值即可

  this.inputImg = 'data:image/svg+xml;base64,' + res.data.body.data

這種后臺數(shù)據(jù)返回格式如下：

上面后臺數(shù)據(jù)返回的是svg格式的 矢量圖 ，為了更加清晰，不失真， 采用這種方法，所以我們對應的寫好他的后綴，因為是xml格式所以這么寫? 'data:image/svg+xml;base64,'

既然有svg這種圖片，也就存在png，jpg，jpeg等格式的圖片，我們只需要確定后臺使用的邏輯和方法返回對應的格式就行，jpeg格式：??this.imgUrl='data:image/jpeg;base64,'+res.data.data，

其它的圖片應該也都類似，跨域問題自行解決。

那么展示出來的圖片如何下載到本地呢？

解決方法：圖片數(shù)據(jù)以 Base64 編碼的字符串形式嵌入到 HTML 或 Js中，那么想要將這張圖片保存到本地，就需要將該 Base64 編碼的字符串轉換為二進制數(shù)據(jù)，并將其存儲為一個文件?？梢灾苯邮褂胊 標簽，也可以使用 按鈕或者其它標簽，下面我是用了 餓了么ui的? el-button 按鈕

代碼：

<el-button type="primary" size="mini"  @click="updown">下載結果</el-button>


//對應的方法
updown(){
    var objimg='' 
   //這里objimg 表示圖片顯示的路徑  一般都是data:image/jpeg;base64,iVBORw0KGgoAAAANS
   const byteCharacters = atob(objimg.split(',')[1])
   const byteNumbers = new Array(byteCharacters.length)
   for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i)
   }
   const byteArray = new Uint8Array(byteNumbers)
    //區(qū)分是什么類型的 svg 或者是png 格式 切記不同類型后綴不同。使用錯誤可能會下載圖片打不開
    var blobs=''
    if(this.active=='first' || this.active=='second' ||                
      this.active=='third'){
      blobs = 'image/svg+xml'
     }
     if(this.active=='four'){
          blobs = 'image/png'
     } 
     this.downLong=false
       let url = window.URL.createObjectURL(
              new Blob([byteArray], { type: blobs })
       );
       let link = document.createElement("a"); //創(chuàng)建a標簽
       link.style.display = "none"; //將a標簽隱藏
       link.href = url; //給a標簽添加下載鏈接
       link.setAttribute("download", '運行結果圖片' ); 
       document.body.appendChild(link);
       link.click(); //執(zhí)行a標簽
}

要注意的就是： 先把圖片路徑拿到，去解析成對應的類型，我們只解析 “base64,” 后面的字符串，所以先用split分割一下，后面都是根據(jù)不同類型生成不同的下載后綴，就可以了。

當然可以直接使用 a 標簽來表示，這里是舉例png格式的，其它格式參考上面的方法基本一樣。

<a :href="downloadUrl" download="image.png">下載圖片</a>

//方法
downloadUrl() {
      // 將 Base64 編碼的字符串轉換為二進制數(shù)據(jù)
      var objimg='' 
     //這里objimg 表示圖片顯示的路徑  一般都是  data:image/jpeg;base64,iVBORw0KGgoAAAANS
      const byteCharacters = atob(objimg.split(',')[1])
      const byteNumbers = new Array(byteCharacters.length)
      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i)
      }
      const byteArray = new Uint8Array(byteNumbers)

      // 創(chuàng)建 Blob 對象并將其轉換為 URL
      const blob = new Blob([byteArray], { type: 'image/png' })
      return URL.createObjectURL(blob)
    }

知識點：atob 是 js函數(shù) 里的解析base64 字符串的方法。它還有個兄弟btoa 是 編輯成base64格式的。

? ? ? ? charCodeAt()是字符串方法，用于檢索字符串中特定位置的字符的Unicode 值。

? ? ? ? Uint8Array 是一個數(shù)組他表示，8位無符號整數(shù)，長度是1個字節(jié)。文章來源地址http://www.zghlxwxcb.cn/news/detail-490306.html

到了這里，關于前端 img圖片如何 展示 base64 格式（并且下載到本地）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！