html svg转换成canvas,生成图片base64地址

今天做小程序时发现小程序不支持svg标签,网页上的图标是 html5 的 svg 标签,没有字体源文件,通过 search 看到有人给出了解决方案,这里整理一下,方便自己或者有需要的朋友开箱即用。 这里用到了 canvg.js 这个goole发布的插件,原理是把 svg 转成canvas,再利用canvas的toDataURL,输出图片的base64地址。 canva.js 需要依赖于rgbcolor.js。这个应该都比较容易下载到。 附上下载地址:https://github.com/canvg/canvg 下面是demo: <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>html svg转换成canvas,生成图片base64地址</title> <!--[if IE]> <script type="text/javascript" src="flashcanvas.js"></script> <![endif]--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"></script> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script> <script type="text/javascript"> var context; var redraw = false; function resize() { var c = document.getElementById('container'), custom = true; if (!custom) { c.style.width = (window.innerWidth || document.body.clientWidth) + 'px'; c.style.height = (window.innerHeight || document.body.clientHeight) + 'px'; } else { c.