背景
有朋友了解了我上篇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这三个函数，其使用方法和细节这里不展开赘述。
