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@/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>

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

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

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

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

たとえば、幅400px、高さ400pxのPNG形式のスクリーンショットが必要で、スクリーンショットが撮られるまで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はWebページのHTMLに簡単にアクセスできるため、キャプチャするのにも理想的です 動的なWebページコンテンツ またはコンテンツ ログインの背後.

PDFなどの作成

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

<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を、画像またはPDFキャプチャを追加するHTMLドキュメント内の場所として受け入れます。 以下の例では、スクリーンショットがに追加されます insertCode DIV。

最後に必要なものを渡します パラメータ への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 以下のメソッドはコールバック関数を受け入れます。この関数は、JavaScriptアプリケーションがキャプチャをさらに制御できるようにレンダリングされると、スクリーンショットまたはキャプチャのbase64データURIを渡します。

<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メソッド

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

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

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