使用原生JavaScript代码将HTML保存为图片

2024-01-02 11:09:14

背景

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

文章来源:https://blog.csdn.net/qq_36694133/article/details/135333767
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。