在前端开发中，我们难免要将页面或某些元素截图保存或分享，而 html2canvas 是一个非常好用的工具。但在某些场景下，可能由于浏览器安全限制，html2canvas 无法获取 DOM 节点导致截图失败。针对这个问题，有一款 npm 包 html2canvas-proxy 可以解决。
html2canvas-proxy 简介
html2canvas-proxy 是一个可用于绕过浏览器安全限制的工具，可以让 html2canvas 正常工作。它的原理是将 html2canvas 发送到一个代理服务器，由服务器代为截图，再通过 xmlhttprequest 将结果返回给前端。
安装和使用
--- ------- ----------------- ------
在使用上，只需调用如下代码即可：
------ ----------- ---- -------------------- -------------------------------------- -- - -- -- --------- ---- --- ------ ---
其中 html2canvas-proxy 的默认代理服务器为 https://html2canvas-proxy.stuq.org/，如果需要使用自定义的代理服务器，可以进行如下配置：
----------------- - ----------------------------------
配置选项
除了自定义代理服务器地址外，html2canvas-proxy 还提供了以下配置选项：
imageTimeout：设置超时时间，单位为 ms，默认为 15000（15 秒）canvasProxyUrl：设置代理服务器地址，若不指定则默认为https://html2canvas-proxy.stuq.org/ignoreElements：设置需要忽略的元素，值为 CSS 选择器，例如：'iframe, .no-screenshot'
示例代码：
-------------------------- - ------------- ------ -- --- --------------- ------------------------------- --------------- -------- --------------- -------------- -- - -- -- --------- ---- --- ------ ---
指导意义
html2canvas-proxy 不仅解决了 html2canvas 不能跨域截图的问题，同时也提供了更为灵活的配置选项，使得截图结果更符合需求。其原理也启发我们，在前端开发中遇到安全限制或无法实现的场景时，可以寻找相应的库或工具来解决。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/168309