1. 製品
  2.   画像
  3.   JavaScript
  4.   Capture-Website
 
  

画像処理用のオープンソース JavaScript ライブラリ

ウェブサイトのスクリーンショットをキャプチャするための JavaScript API

Capture Web サイトとは何ですか?

Capture-Website は、JavaScript 開発者が Web サイトのスクリーンショットをキャプチャできるようにする、オープンソースの軽量な画像処理ライブラリです。 API を使用すると、サイトの URL を使用して任意の Web サイトのスクリーンショットを撮ることができ、スクリーンショットは出力ファイル パスに保存されます。スクリーンショットの幅、高さ、種類、画質を設定できます。さらに、特定のデバイス サイズに基づいてスクリーンショットを撮ることもできます。

API を使用すると、表示されている部分だけでなく、スクロール可能なページ全体を含むサイト全体のスクリーンショットを撮ることができます。デフォルトでは、API はスクリーンショットに白い背景を使用します。背景を削除すると、API は透明なスクリーンショットをキャプチャします。

Previous Next

Capture-Web サイトの使用を開始する

NPM 経由で Capture-Website をインストールするための推奨される方法。以下のコマンドでインストールしてください。

NPM 経由で Capture-Website Thief をインストールする

 npm install capture-website

無料の JavaScript API を使用して Web サイトのスクリーンショットをキャプチャする

オープンソースの Capture-Website ライブラリを使用すると、JavaScript 開発者はプログラムで Web サイトのスクリーンショットをキャプチャできます。サイトのスクリーンショットをキャプチャするために、API は captureWebsite.file() メソッドを提供します。このメソッドは、入力ファイル名、出力ファイル パス、およびスクリーンショットのオプションを受け取ります。次の 2 行のコードを使用すると、Web サイトのスクリーンショットを簡単に取得できます。

ウェブサイトのスクリーンショットをキャプチャ

  1. インポート キャプチャ Web サイト ライブラリ
  2. captureWebsite.file(input, outputFilePath, options?) を使用してサイトのスクリーンショットをキャプチャします。このメソッドは、指定された入力のスクリーンショットをキャプチャし、指定された outputFilePath に保存します。
  3. 出力ファイルの高さ、幅の種類、幅などのオプションを設定することもできます

JavaScript で Web サイトのスクリーンショットをキャプチャする

import captureWebsite from 'capture-website';
    await captureWebsite.file('https://fileformat.com', 'screenshot.png');

JavaScript で特定のデバイス サイズのスクリーンショットをキャプチャする

オープンソースの Capture-Website ライブラリを使用すると、JavaScript 開発者は、指定したデバイスで撮影されたスクリーンショットをキャプチャできます。サイトのスクリーンショットをキャプチャするために、API は emulateDevice プロパティを提供します。 iPhone X サイズのスクリーンショットをエミュレートできます。次の 2 行のコードを使用すると、Web サイトのスクリーンショットを簡単にエミュレートできます。

スクリーンショット用にデバイスをエミュレート

  1. インポート キャプチャ Web サイト ライブラリ
  2. captureWebsite.file(input, outputFilePath, options?) を使用してサイトのスクリーンショットをキャプチャします。このメソッドは、指定された入力のスクリーンショットをキャプチャし、指定された outputFilePath に保存します。
  3. emulateDevice プロパティを使用してエミュレートし、値を「iPhone X」に設定します

JavaScript で Web サイトのスクリーンショットをエミュレートする

import captureWebsite from 'capture-website';
    await captureWebsite.file('https://fileformat.com', 'screenshot.png', {
        emulateDevice: 'iPhone X'
    });
 日本