背景
有朋友了解了我上篇svg绘制中国象棋棋盘后，想要将其使用代码保存下来，正好今天有时间，顺便给大家介绍一下我的解决方案。
代码
<!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> <br /> <button onclick="svgSave()">Svg保存</button> <button onclick="notSvgSave('jpeg')">Jpeg保存</button> <button onclick="notSvgSave('png')">Png保存</button> </body> </html> <script type="text/javascript"> function svgSave() { let svg = document.querySelector("svg").outerHTML; let src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))); let a = document.createElement("a"); a.href = src; a.download = "result.svg"; a.click(); } function notSvgSave(type) { let svg = document.querySelector("svg").outerHTML; let src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))); let img = document.createElement("img"); img.src = src; img.onload = () => { let canvas = document.createElement("canvas"); let cxt = canvas.getContext("2d"); canvas.width = img.width; canvas.height = img.height; cxt.drawImage(img, 0, 0, img.width, img.height); let url = canvas.toDataURL(`image/${type}`, 1.0); let a = document.createElement("a"); a.href = url; a.download = `result.${type}`; a.click(); } } </script>
解析
svg标签内代码从菜鸟教程第一课中拷贝而来。
svg直接下载方案：将其转为base64码，自建a标签并模拟点击进行下载
svg转jpeg或png再下载方案：将其转为base64码后，自建img标签并设置src为base64码，为img标签加载事件添加处理函数，函数内容为：将img图片绘制到一个自建canvas标签中，并转为jpeg或png的base64码，再自建a标签并模拟点击进行下载
有兴趣深入了解的小伙伴请重点学习 encodeURIComponent、unescape、btoa这三个函数，其使用方法和细节这里不展开赘述。
