小程序中svg转base64图

MangoGoing 2020/7/17 14:09:38

应用场景有些需要将固定模板和后端返回的图片结合的图片,即需要动态修改某张图片的某一部分内容的时候,可以将svg代码当成模板,然后将外链图片用变量表示,拿到后端数据后用后端给的图片url替换掉svg代码的图片链接变量,然后将svg代码转成base64,小程序等应用中图片的…

应用场景

有些需要将固定模板和后端返回的图片结合的图片,即需要动态修改某张图片的某一部分内容的时候,可以将svg代码当成模板,然后将外链图片用变量表示,拿到后端数据后用后端给的图片url替换掉svg代码的图片链接变量,然后将svg代码转成base64,小程序等应用中图片的链接可以是图片base64

应用步骤

  • 定义svg模板,可以直接打开svg文件,将里面的代码复制,并把外链部分用变量表示,如下,我把svg里面的图片用{{image}}表示了。

image.png

高能预警:

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模板,中间原图是后端返回的图片
image.png

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[小程序中svg转base64图]http://www.zyiz.net/tech/detail-144073.html

上一篇:记一次小程序开发的踩坑之旅

下一篇:把 B 站的视频弹幕搬到小程序中,这项技术可以轻松搞定

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程