svg转base64编码Java_⼩程序中svg转base64图
应⽤场景
有些需要将固定模板和后端返回的图⽚结合的图⽚，即需要动态修改某张图⽚的某⼀部分内容的时候，可以将svg代码当成模板，然后将外链图⽚⽤变量表⽰，拿到后端数据后⽤后端给的图⽚url替换掉svg代码的图⽚链接变量，然后将svg代码转成base64，⼩程序等应⽤中图⽚的链接可以是图⽚base64
应⽤步骤定义svg模板，可以直接打开svg⽂件，将⾥⾯的代码复制，并把外链部分⽤变量表⽰，如下，我把svg⾥⾯的图⽚⽤{{image}}表⽰了。
svg图⾼能预警:svg中外链的图⽚链接不能直接跟svg代码⼀起base64，需要单独将外链图⽚地址base64后替换到变量位置，然后再把svg代码整个base64后才能正常使⽤！图⽚url转base64urlTobase64(url){
return new Promise((resolve)=>{
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 = st.place('{{image}}',avatarBase64);
//⼿动加上base64图⽚的前缀
let iconPath = 'data:image/svg+xml;base64,' + Base64.btoa(unescape(encodeURIComponent(svgHtml)));
...
此时的iconPath就是合成后的svg图了
});
效果图
外⾯⼀圈是svg模板，中间原图是后端返回的图⽚

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。