选择安装方式

根据你的项目环境选择安装方式：1. 使用npm/yarn（推荐）：在项目目录运行 `npm install snapdom` 或 `yarn add snapdom`。2. 使用CDN：在HTML文件中添加 `<script src="https://unpkg.com/snapdom@latest/dist/snapdom.js"></script>`。

对于新手，建议先使用CDN方式快速体验，再根据项目需要迁移到npm。

创建测试文件

创建一个简单的HTML文件（如`index.html`），包含一个要捕获的`<div>`元素（给它一个`id`或`class`）和基本的样式。引入SnapDOM（根据上一步选择的方式）。

示例：`<div id="capture" style="background: lightblue; padding: 20px;">Hello SnapDOM!</div>`

使用快捷方式捕获为PNG

在`<script>`标签或单独的JS文件中，使用快捷方法`snapdom.toPng(el)`将目标元素捕获为PNG图片。`el`可以是DOM元素或CSS选择器字符串。

示例代码：`const img = await snapdom.toPng('#capture'); document.body.appendChild(img);` 注意这是异步操作。

使用下载快捷方式

尝试使用`snapdom.download(el, options?)`方法，一键将捕获的元素下载为文件。可以指定`filename`和`format`。

示例：`await snapdom.download('#capture', { format: 'png', filename: 'my-capture' });`

使用可复用捕获模式

学习使用`snapdom(el, options?)`创建可复用捕获对象。这在需要将同一元素导出为多种格式（如同时需要PNG和JPG）时更高效。

示例：`const capture = await snapdom('#capture'); const png = await capture.toPng(); const jpg = await capture.toJpg();`

探索常用配置选项

阅读README中的Options表格，尝试在捕获时传入`options`对象。从简单的开始，如`scale`（缩放）、`backgroundColor`（背景色）、`quality`（JPG/WebP质量）。

示例：`await snapdom.toPng('#capture', { scale: 2, backgroundColor: '#fff' });` 将捕获2倍大小、白色背景的图片。

处理外部资源与CORS问题

如果你的元素引用了外部字体（如Google Fonts）或图标，可能会遇到CORS问题导致样式丢失。理解README中关于`crossorigin`属性和`embedFonts`选项的说明。

解决方案：为外部`<link>`或`<script>`标签添加`crossorigin="anonymous"`，或在options中设置`embedFonts: true`。

导出为不同格式（SVG, Canvas, Blob）

尝试使用`snapdom.toSvg()`, `snapdom.toCanvas()`, `snapdom.toBlob()`等方法，理解它们返回的不同数据类型及其用途（如SVG用于矢量缩放，Canvas用于像素操作）。

Blob常用于上传到服务器，Canvas常用于进一步的图像处理或合成。

使用过滤与排除功能

学习使用`exclude`或`filter`选项来排除捕获中不想要的元素（如广告、敏感信息）。理解`excludeMode`是隐藏还是移除。

示例：`exclude: ['#ad-banner']` 将移除id为`ad-banner`的元素。

调试与查看限制

浏览README的“Limitations”部分，了解当前版本的已知限制（如Safari对`::-webkit-scrollbar`的处理）。当捕获结果不符合预期时，这里是第一个排查点。

大部分渲染问题都与CORS或复杂的CSS特性（如CSS Grid、自定义属性）有关。