Webをキャプチャして変換するツール

JavaScriptでWebサイトのスクリーンショットを撮る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バージョンの参照を含めるWebページのライブラリ grabzit.min.js 以下に示すライブラリ。 次に、以下のコードを含めて、Webページのbodyタグにスクリーンショットを追加します。 交換する必要があります APPLICATION KEY あなたと アプリケーションキー そして交換 https://www.tesla.com スクリーンショットを撮りたいウェブサイトで。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/grabzit.min.js"></script>
<script>
GrabzIt("Sign in to view your Application Key").ConvertHTML("<html><body><h1>Hello World!</h1></body></html>").Create();
</script>

その後、しばらく待つだけで、Webページをリロードすることなく、画像がページの上部に自動的に表示されます。 この画像はブラウザで生成されますが、引き続き使用できます これらのテクニックに save 自分のサーバーでキャプチャ ご希望の場合。

代わりに、GrabzItをES6モジュールとして使用する場合は、これを使用できます 技術、GrabzItがJavaScriptにどのように含まれているかを除けば、ここで説明した方法とまったく同じように機能します。

スクリーンショットのカスタマイズ

アプリケーションキーとURLまたはHTMLパラメータが必要ですが、他のすべての パラメータ オプションです。 パラメーターを追加するには、必要なオプションのパラメーターごとに、パラメーターにその値をJSON辞書として次の形式で追加します。

たとえば、400pxの幅と400pxの高さのPNG形式のスクリーンショットが必要で、スクリーンショットが撮られるまで10秒待機する場合は、次のようにします。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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はWebページのHTMLに簡単にアクセスできるため、キャプチャするのにも理想的です 動的なWebページコンテンツ またはコンテンツ ログインの背後.

PDFなどの作成

PDF、DOCX、CSV、JSON、Excelスプレッドシートなどの別の種類のキャプチャを作成するには、目的の形式を指定するだけで、自動的に作成されます。 たとえば、以下の例では、それぞれDOCXおよびPDFドキュメントをURLおよびHTMLから作成していますが、これらはユーザーのブラウザーに自動的にダウンロードされます。

<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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@3.4.8/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@3.4.8/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を、画像またはPDFキャプチャを追加するHTMLドキュメント内の場所として受け入れます。 以下の例では、スクリーンショットがに追加されます insertCode DIV。

最後に必要なものを渡します パラメータ へのJSON辞書として ConvertURL or ConvertHTML メソッド。 以下の例では、遅延は1000msに、形式はPNGに設定されています。 ただし、他の追加オプションが必要ない場合は、このパラメーターを指定する必要はありません。

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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 以下のメソッドはコールバック関数を受け入れます。この関数は、JavaScriptアプリケーションがキャプチャをさらに制御できるようにレンダリングされると、スクリーンショットまたはキャプチャのbase64データURIを渡します。

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@grabzit/js@3.4.8/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@3.4.8/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メソッド

開始するには、次の3つの方法のいずれかを選択して、変換対象を指定する必要があります。

次に、これらの方法の1つ以上を選択して、キャプチャの作成方法を指定します。

  • UseSSL() -強制的に作る SSLを使用したリクエスト.
  • Encrypt() -暗号的に安全なキーでキャプチャを自動的に暗号化します。
  • AddPostVariable(name, value) -HTTP Postパラメーターとオプションの値を定義します。このメソッドを複数回呼び出して、複数のパラメーターを追加できます。 このメソッドを使用すると、GrabzItが強制的に HTTPポストを実行します.
  • AddTemplateVariable(name, value) -定義します カスタムテンプレート パラメータと値の場合、このメソッドを複数回呼び出して複数のパラメータを追加できます。
  • AddTo([element | element id]) -キャプチャを挿入します into指定された要素。
  • Create() -キャプチャを挿入します into bodyタグの先頭、またはHTMLタグのルートノードが存在しない場合。
  • CreateInvisible() -キャプチャは作成されますが、Webページには表示されません。
  • DataURI([callback function], [decrypt]) -コールバック関数の単一のパラメーターでキャプチャのbase64データURIを返します。 復号化パラメータがtrueの場合、暗号化されたキャプチャを自動的に復号化します。

このJavaScriptコードライブラリは完全にオープンソースです! ソースコードを表示または改善する場合は、次を参照してください。 GitHubの.