捕获和转换Web的工具

使用JavaScript拍摄网站截图

JavaScript API
诊断面板 可以帮助您调试代码!

使用GrabzIt JavaScript API是放置图像,DOCX或PDF屏幕截图以及 视频到GIF动画的转换 和更多 into您的网站。 只需要 GrabzIt JavaScript库,一行JavaScript代码和一些GrabzIt魔术!

默认情况下,一旦创建捕获,它将在您的软件包确定的时间内保留在我们的服务器上的缓存。 然后,如果使用与先前缓存的屏幕截图相同的参数来调用GrabzIt的JavaScript API,则将返回该参数,以防止不必要地使用您的屏幕截图余量。 可以通过使用 缓存参数.

入门

要开始使用Javascript API,请按照以下步骤操作:

  1. 获得免费 应用程序密钥.
  2. 免费下载 JavaScript库 并尝试 演示应用.
  3. 阅读以下概述,了解有关GrabzIt的JavaScript API如何工作的基础知识。

为了防止其他人复制您的JavaScript代码并窃取所有GrabzIt帐户资源,您必须 授权哪些域 可以使用您的应用程序密钥。

最简单的例子

要开始下载 GrabzIt JavaScript库 并包括 grabzit.min.js 您想要捕获显示的网页中的库或包含对CDN版本的引用 grabzit.min.js 库如下所示。 然后包括以下代码,以将屏幕快照添加到网页的body标签。 您将需要更换 APPLICATION KEY 和你的 应用密钥 并替换 https://www.tesla.com 与您要为其截屏的网站。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com").Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").Create();
</script>

然后,稍等片刻,图像将自动显示在页面顶部,而无需重新加载网页。 即使此图像是在浏览器中生成的,您仍然可以使用 这些技术 save 在您自己的服务器上捕获 如果你希望。

如果要将GrabzIt用作ES6模块,则可以使用此 技术,除了GrabzIt如何包含在JavaScript中之外,它的工作方式与此处详述的完全相同。

自定义屏幕截图

尽管需要应用程序密钥和URL或HTML参数,但所有其他 参数 是可选的。 对于所需的每个可选参数,通过以以下格式将参数的值附加为JSON字典的形式添加参数。

例如,如果您想要一个 PNG 格式的宽 400 像素和高 400 像素的屏幕截图,并希望在截取屏幕截图前等待 10 秒,您可以执行以下操作。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"width": 400, "height": 400, "format": "png", "delay": 10000}).Create();
</script>

由于JavaScript API可以轻松访问网页的HTML,因此它也是捕获网页的理想选择 动态网页内容 或内容 登录背后.

创建PDF等

要创建其他类型的捕获,例如PDF,DOCX,CSV,JSON或Excel电子表格,只需指定所需的格式,即可自动创建它。 例如,在下面的示例中,我们分别从URL和HTML创建DOCX和PDF文档,然后将它们自动下载到用户浏览器。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "pdf", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertURL("https://www.tesla.com", 
{"format": "docx", "download": 1}).Create();
</script>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>",
{"format": "docx", "download": 1}).Create();
</script>

重要的是要记住 下载参数 可用于自动下载任何类型的捕获文件,例如DOCX,PDF,PNG,JPG或CSV。

将屏幕截图添加到元素

AddTo 下面的方法接受元素或DOM元素的ID作为HTML文档中的位置,以向其中添加图像或PDF捕获。 在下面的示例中,屏幕截图将添加到 insertCode 格。

最后通过所有必需的 参数 作为JSON字典 ConvertURL or ConvertHTML 方法。 在下面的示例中,延迟设置为1000ms,格式设置为PNG。 但是,如果不需要任何其他选项,则完全不需要指定此参数。

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com", {"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="insertCode"></div>
<script type="text/javascript">
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>", 
{"delay": 1000, "format": "png"}).AddTo("insertCode");
</script>
</body>
</html>

将捕获转换为数据URI

DataURI 下面的方法接受回调函数,一旦呈现,屏幕快照或捕获的base64数据URI将被传递给此函数,从而使您的JavaScript应用程序可以进一步控制捕获。

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.yahoo.com").DataURI(callback);
</script>
</body>
</html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@/grabzit.min.js"></script>
</head>
<body>
<div id="datauri" style="width:100%;word-break:break-all"></div>
<script type="text/javascript">
function callback(dataUri)
{
    document.getElementById('datauri').innerHTML = dataUri;
}
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").DataURI(callback);
</script>
</body>
</html>

GrabzIt方法

首先,您必须选择以下三种方法之一来指示要转换的内容。

然后选择这些方法中的一种或多种,​​以指定要如何创建捕获。

这个JavaScript代码库是完全开源的! 如果您想查看或改进源代码,可以在 GitHub上.