Node.jsのサーバサイドでDOMを使う

2022.02.13 2022.02.19

jsdomを利用して、Node.js上でDOM(Document Object Model)を使う方法です。

インストール

npm install jsdom

使い方

基本的な使い方です。次のようにJSDOMのコンストラクタにHTML文書を設定して利用します。

const { JSDOM } = require("jsdom");

const dom = new JSDOM(`<!DOCTYPE html><div id="message">Hello world</div>`);
console.log(dom.window.document.getElementById('message').innerHTML); // Hello world

documentのみを利用する

documentのみを使うのであれば、次のように指定することもできます。

const { document } = new JSDOM(`<!DOCTYPE html><div id="message">Hello world</div>`).window;
console.log(document.getElementById('message').innerHTML); // Hello world

Canvasを操作する

canvas.getContext()を使う場合は、以下もインストールが必要です。

npm install canvas

サンプル

サーバでCanvasの内容をjpegにして保存する

const dataUrl = canvas.toDataURL('image/jpeg', 0.75); // param2:画質
const [header, ...base64] = dataUrl.split(',');
const buffer = Buffer.from(base64.join(','), 'base64');
const savePath = path.join(__dirname, '0001.jpg');
fs.writeFileSync(savePath, buffer);

DataUrlは先頭にデータ以外の接頭辞などがあるため、削除して実際のバイナリ部分のみをファイルに保存します。

コメントコメントをキャンセル

Node.jsで静的ファイルを送信する – response.sendFile()の使い方

opencv4nodejsのインストールが失敗する時の解決方法