简单的 snapdom 页面截图 - 風雲論壇

» 欢迎您，客人：登录 | 注册 | 微博 |

風雲論壇 → 脚本中心 → 浏览：帖子主题

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

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1854
发帖：77 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2025/8/30 23:45:47

[ 第 1 楼 ]

<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="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/8/30 16:38:12

IP：已设置保密

風雲 (ID: 3)

头衔：论坛版主

等级：大天使

积分：1854
发帖：77 篇
来自：保密
注册：2022/3/30 15:28:53
造访：2025/8/30 23:45:47

[ 第 2 楼 ]

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

2025/8/30 16:45:16

IP：已设置保密

快速回复主题

账号/密码

用户：没有注册？密码：

评论内容