DOM元素截图工具 - 指定区域导出图片

DOM 元素截图是指将网页中指定的 HTML 元素渲染为图片的过程。它利用 html2canvas 库遍历目标元素的 DOM 树和 CSS 样式，在 Canvas 画布上重新绘制，最终导出为 PNG、JPEG 或 WebP 等格式的图片。与普通浏览器截图不同，它可以精确截取某个特定元素，忽略页面其他部分。

常见原因包括：
① 跨域图片——如果元素中包含来自其他域名的图片，浏览器安全策略会阻止 Canvas 读取像素数据，导致图片区域空白。可尝试勾选「允许跨域污染」选项，或确保图片服务器返回正确的 CORS 头。
② 未加载完成的资源——如 Web 字体、延迟加载的图片等，建议在资源加载完毕后再截图。
③ iframe 内容——html2canvas 无法捕获跨域 iframe 内部的内容。
④ CSS 兼容性——部分 CSS 属性（如 filter、backdrop-filter、mix-blend-mode）支持有限。

提高「缩放」参数即可获得更高分辨率的图片。默认缩放为 2x，意味着图片的实际像素是元素尺寸的 2 倍，适合视网膜屏幕查看。设置为 3x 或更高可以获得更清晰的图片，但文件体积也会增大。对于需要打印的场景，建议使用 3x-5x 的缩放比例。

PNG：无损压缩，支持透明背景，适合包含文字、图标、UI 界面的截图，文件较大。
JPEG：有损压缩，不支持透明，适合照片类内容，文件小。可通过质量参数平衡画质与体积。
WebP：现代格式，同时支持无损和有损压缩，支持透明，文件通常比 PNG 小 30% 以上。但部分旧浏览器可能不支持查看，建议在兼容性允许的情况下优先使用。

html2canvas 默认可以渲染 在 DOM 中存在但不可见 的元素（如 display:none 或 visibility:hidden 的元素），但渲染结果可能不准确。建议在截图前临时将元素设为可见（如移除 display:none），截图完成后再恢复。对于屏幕外但正常渲染的元素（如通过绝对定位移出视口），html2canvas 通常可以正常处理。

浏览器自带截图（如 Chrome DevTools 的截图功能）截取的是渲染后的像素画面，与用户看到的完全一致。而本工具基于 html2canvas 重新绘制元素，在某些复杂 CSS 场景下可能略有差异。但本工具的优势在于：可以精确到元素级别、支持程序化调用、可在任何浏览器中使用、可以设置缩放和背景色等参数，灵活性更高。