使用 html2canvas 实现截图功能
春节即将来临,为了确保节假日期间系统的稳定性,我们一如既往地将系统中的业务指标汇总到一个专门的值班系统页面中,并通过 ECharts 图表展示。这些指标包括接口调用次数、成功率、响应时间等重要数据。由于我们的部门负责多个系统,且这些系统之间往往没有直接关联,不同同事在值班时可能对其他系统的指标不太熟悉。因此,各系统负责人分别制定了各自的指标阈值,以便值班人员只需检查指标是否超限,即可判断系统的健康状况。
然而,当系统出现问题时,如何有效地将信息同步给其他同事却一直缺乏统一的标准。有些人喜欢用截图,有些则习惯复制系统信息。而由于监控看板页面可能很长,在不同分辨率的显示器上可能无法完全显示在一屏内。为了更快速、统一地将信息传达给其他同事,我决定为看板页面添加一个截图按钮。点击按钮时,页面会自动将整个看板页面截图并保存到剪贴板中。值班人员只需按 Ctrl + V 即可将截图粘贴到微信中分享。
于是,我开始寻找合适的工具,最终发现了 html2canvas 这个组件。它是一个功能强大的 JavaScript 库,可以直接在浏览器端将 DOM 元素渲染成 canvas 图像,而无需服务端支持。html2canvas 还支持大多数 CSS 样式,因此能够很好地保留页面的视觉效果。

