1. 首页
  2. 小程序

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

作者:MangoGoing
链接:https://segmentfault.com/a/1190000023257643

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:小程序中svg转base64图

链接:https://www.javascriptc.com/4320.html

« 学一学前端调试技巧
刷新»
Flutter 中文教程资源

相关推荐

QR code