npm 包 html2canvas-proxy 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们难免要将页面或某些元素截图保存或分享，而 html2canvas 是一个非常好用的工具。但在某些场景下，可能由于浏览器安全限制，html2canvas 无法获取 DOM 节点导致截图失败。针对这个问题，有一款 npm 包 html2canvas-proxy 可以解决。

html2canvas-proxy 简介

html2canvas-proxy 是一个可用于绕过浏览器安全限制的工具，可以让 html2canvas 正常工作。它的原理是将 html2canvas 发送到一个代理服务器，由服务器代为截图，再通过 xmlhttprequest 将结果返回给前端。

安装和使用

npm install html2canvas-proxy --save

在使用上，只需调用如下代码即可：

import html2canvas from 'html2canvas-proxy';

html2canvas(document.body).then(canvas => {
  // do something with the canvas
});

其中 html2canvas-proxy 的默认代理服务器为 https://html2canvas-proxy.stuq.org/，如果需要使用自定义的代理服务器，可以进行如下配置：

html2canvas.proxy = 'http://my-proxy-server.com:8080';

配置选项

除了自定义代理服务器地址外，html2canvas-proxy 还提供了以下配置选项：

imageTimeout：设置超时时间，单位为 ms，默认为 15000（15 秒）
canvasProxyUrl：设置代理服务器地址，若不指定则默认为 https://html2canvas-proxy.stuq.org/
ignoreElements：设置需要忽略的元素，值为 CSS 选择器，例如：'iframe, .no-screenshot'

示例代码：

html2canvas(document.body, {
  imageTimeout: 10000, // 10s
  canvasProxyUrl: 'https://my-proxy-server.com/',
  ignoreElements: 'iframe, .no-screenshot'
}).then(canvas => {
  // do something with the canvas
});

指导意义

html2canvas-proxy 不仅解决了 html2canvas 不能跨域截图的问题，同时也提供了更为灵活的配置选项，使得截图结果更符合需求。其原理也启发我们，在前端开发中遇到安全限制或无法实现的场景时，可以寻找相应的库或工具来解决。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/168309