🖥️ Chrome 扩展截图功能完整开发指南

Chrome 扩展截图 整体功能设计 🎯

1. 功能流程

• 用户点击特定插件按钮入口，激活截图模式
• 进入全屏截图交互界面
• 用户通过鼠标拖拽选择截图区域

2. 截图交互逻辑

1. 监听鼠标按下事件

   • 记录起始坐标点
   • 创建一个透明的选择框

2. 鼠标移动时

   • 实时绘制选择框
   • 动态计算选择区域大小
   • 根据鼠标移动方向调整选择框位置和尺寸

3. 鼠标松开时

   • 确定最终截图区域坐标
   • 计算选择区域的宽高
   • 触发截图捕获

3. 关键点

• 屏幕高度计算：首先计算用户的屏幕高度，以确定可见区域。

• 获取首屏幕截图位置：

  • 使用起始坐标点获取用户的首屏幕截图位置 比如用户起点高度在第二个屏幕（因 chrome.tabs.captureVisibleTab 只能截图当前选项卡的可见区域）。

• 获取未屏幕截图位置的索引：

  • 利用结束坐标点获取用户所需截图区域在整个页面中的位置范围。例如，用户希望截图的区域在页面的第2屏到第4屏之间。

• 滚动并拼接截图：

  • 通过滚动操作依次获取每个屏幕的截图，并将其拼接在一起。
  • 最后，根据用户选择的宽度、高度以及起始坐标（top、left等）裁剪出特定的截图区域。

注意事项

• 在其他网站上，务必禁用滚动动画，以防止截图内容拼接异常。

// 禁用滚动动画示例
document.documentElement.style.scrollBehavior = 'auto';

• 假如用户截取到了最后一个屏幕 也就是页面的尾部 要将此页面补全高度 为用户的屏幕高度
• 禁用页面的fixed

结语 🌈

如果你对这个Chrome扩展截图技术感兴趣，想深入探讨或者需要更详细的技术支持，欢迎随时私信我！👨‍💻✉️ 可以给你提供包，让你轻松实现截图功能