简单的 snapdom 页面截图 - 社区

» 欢迎您，客人：登录 | 注册 | 找回密码 | 微博 |

社区 → 脚本中心 → 浏览：帖子主题

* 帖子主题：简单的 snapdom 页面截图

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：2826
发帖：230 篇
来自：保密
注册：2023-12-09 09:36:49
造访：2026-05-05 13:56:22

[ 第 1 楼 ] 449

<svg width="400" height="300">
<foreignObject width="400" height="300">
<style>
.snap{ background-color: #123456; color: #abcdef; height: 300px }
</style>
<div class="snap">
	<div>你好，这是一张 SVG 图片</div>
	<img src="http://bbs.fengyun.org/Upload/JsAspBBS/2204/01/112044.461.jpg" width="400" />
</div>
</foreighObject>
</svg><br /><input type="button" value="通过 IMG 标签显示" onclick="toImg()" />
<input type="button" value="转换成 webp 格式" onclick="downImg()" />
<div class="preview"></div>
<script type="text/javascript">
// 适配 img 标签
async function toImg() {
	var svg = document.querySelector("svg").cloneNode(true);
	var imgs = svg.querySelectorAll("foreignObject img");
	// 所有图片需要转成 base64 模式加载
	for(var x of imgs) {
		var blob = await fetch(x.src).then(res => res.blob());
		var base64Url = await new Promise(ok => {
			var reader = new FileReader;
			reader.readAsDataURL(blob);
			reader.onloadend = () => ok(reader.result);
		});
		x.src = base64Url;
	}
	var svgUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(svg));
	var img = new Image;
	img.src = svgUrl;
	await img.decode();
	var snap = document.querySelector(".preview");
	snap.innerHTML = "";
	return snap.appendChild(img);
}
// 下载图片
async function downImg() {
	var img = await toImg();
	var cvs = document.createElement("canvas");
	cvs.width = img.width;
	cvs.height = img.height;
	var ctx = cvs.getContext("2d");
	ctx.drawImage(img, 0, 0);
	var blob = await new Promise(ok => cvs.toBlob(ok, "image/webp"));
	var a = document.createElement("a");
	a.href = URL.createObjectURL(blob);
	a.download = "img.webp";
	a.click();
}
</script>

[您可以先修改代码再运行]

2025-09-24 10:15:35

IP：已设置保密

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：2826
发帖：230 篇
来自：保密
注册：2023-12-09 09:36:49
造访：2026-05-05 13:56:22

[ 第 2 楼 ] 450

注意，利用 img 标签显示 svg 图片，仅支持 data:xml/svg 这种格式的 URL，否则在 canvas 绘制时会提示“被污染”（如无绘制要求则不受影响）。
另外，foreignObject 的 img.src 必须使用 base64Url 模式（样式中的 backgroundImage也需要转），否则 img 加载该 svg 时会不显示图片内容。

2025-09-24 10:16:03

IP：已设置保密

pojin (ID: 1)

头衔：论坛坛主

等级：究级天王[荣誉]

积分：2826
发帖：230 篇
来自：保密
注册：2023-12-09 09:36:49
造访：2026-05-05 13:56:22

[ 第 3 楼 ] 451

snapdom 其实就是将需要截图的节点和每个元素的实际样式全部复制到了 svg 的 foreignObject 中，然后检查里面所有的 img 标签和 backgroundImage 并下载转成 base64。

2025-09-25 10:10:55

IP：已设置保密

快速回复主题

账号/密码

用户：没有注册？密码：

评论内容