小程序中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图了
});