(作業メモ 20241009) WebページをPuppeteer使って画像に変換する

9 10月
10月 9, 2024

e-Learning の採点で、問題文の情報を、いつかは利用しようと計画していますが、そのための準備です。

現在のところ、問題文の情報を採点サーバーまで送ることはできています。それはWEBページなのですが、これを利用するにあたって画像として処理をしたいときもあると思います。その方法を探してみました。

下記のような記事がありました。

Puppeteer を推奨しています。Node.js で利用するライブラリーです。参考にしたサイトを下記にあげます。

ubuntu22 でやってみました。しかしデフォルトの Node.js はバージョンが古く対応していません。それで先のリンク先にあるやり方で、最新のバージョンをインストールしました。入力のみ下記に記します。

sudo apt install -y nodejs npm
sudo npm install n -g
sudo n stable
sudo apt purge -y nodejs npm
sudo apt autoremove -y

いったん再起動をかけたほうが良いかと思います。

node -v
v22.11.0

npm -v
10.9.0

Node.js の新しいプロジェクトを用意します。適当なフォルダーを作成します。

mkdir puppeteer
cd ./puppeteer/

新しいプロジェクトを用意します。入力はほぼ空でエンターを打つだけですが、最後だけ yes を打ちました。

~/puppeteer$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (puppeteer) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /home/friend/puppeteer/package.json:

{
  "name": "puppeteer",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}


Is this OK? (yes) yes

Puppeteer をインストールします。

~/puppeteer$ npm i puppeteer

added 108 packages, and audited 109 packages in 19s

10 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

下記のようなコードを、html-to-jpeg.js ファイルとして用意します。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://techblog.recruit.co.jp/article-1119/'); // ここに変換したいHTMLのURLを入力
  // Set screen size.
  await page.setViewport({width: 1920, height: 1200});

  await page.screenshot({path: 'output.jpeg', type: 'jpeg'});
  await browser.close();
})();

これを実行します。

node html-to-jpeg.js

画像が作成されました。