小程序中svg轉base64圖

應用場景

有些須要將固定模板和後端返回的圖片結合的圖片，即須要動態修改某張圖片的某一部份內容的時候，能夠將svg代碼當成模板，而後將外鏈圖片用變量表示，拿到後端數據後用後端給的圖片url替換掉svg代碼的圖片連接變量，而後將svg代碼轉成base64，小程序等應用中圖片的連接能夠是圖片base64

應用步驟

• 定義svg模板，能夠直接打開svg文件，將裏面的代碼複製，並把外鏈部分用變量表示，以下，我把svg裏面的圖片用{{image}}表示了。

高能預警:

svg中外鏈的圖片連接不能直接跟svg代碼一塊兒base64，須要單獨將外鏈圖片地址base64後替換到變量位置，而後再把svg代碼整個base64後才能正常使用！

• 圖片url轉base64

  urlTobase64(url){
        return new Promise((resolve)=>{
            wx.request({
                url:url,
                responseType: 'arraybuffer', //最關鍵的參數，設置返回的數據格式爲arraybuffer
                success: res => {
                    //把arraybuffer轉成base64
                    let base64 = wx.arrayBufferToBase64(res.data);
                    //不加上這串字符，在頁面沒法顯示
                    base64　= 'data:image/jpeg;base64,' + base64;
                    console.log("base64 length:"+base64.length);
                    //打印出base64字符串，可複製到網頁校驗一下是不是你選擇的原圖片呢
                    resolve(base64)
                }
            })
        })
    }```

• 安裝js-base64
  npm install --save js-base64
• 替換變量，base64 svg代碼

this.urlTobase64(user_avatar)).then((avatarBase64) => {
    let svgHtml = this.const.svgTemplate.mapPosMarker.replace('{{image}}',avatarBase64);
    //手動加上base64圖片的前綴
    let iconPath = 'data:image/svg+xml;base64,' + Base64.btoa(unescape(encodeURIComponent(svgHtml))); 
    ...
    此時的iconPath就是合成後的svg圖了
});

效果圖

外面一圈是svg模板，中間原圖是後端返回的圖片