使用GrabzIt JavaScript API是放置图像,DOCX或PDF屏幕截图以及 视频到GIF动画的转换 和更多 into您的网站。 只需要 GrabzIt JavaScript库,一行JavaScript代码和一些GrabzIt魔术!
默认情况下,一旦创建捕获,它将在您的软件包确定的时间内保留在我们的服务器上的缓存。 然后,如果使用与先前缓存的屏幕截图相同的参数来调用GrabzIt的JavaScript API,则将返回该参数,以防止不必要地使用您的屏幕截图余量。 可以通过使用 缓存参数.
要开始使用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,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>
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>
首先,您必须选择以下三种方法之一来指示要转换的内容。
然后选择这些方法中的一种或多种,以指定要如何创建捕获。
这个JavaScript代码库是完全开源的! 如果您想查看或改进源代码,可以在 GitHub上.