はじめに
placekittenとかplaceholdみたいなダミー画像生成サービスを作りたいと思ったのでちょっと試してみた記録です。
正直秒で作れたので特に言うことはないです。
完成形イメージ
それじゃ実装を説明します。
実装
事前準備
まずは適当なフォルダ作ってその中で、下記のような形で必要なライブラリをインストールしましょう。
npm init -y
npm install express cors sharp
※sharpは画像リサイズ用のライブラリです（https://sharp.pixelplumbing.com/）
ファイル構成は下記のような形にします。index.htmlは中身適当でいいですが、下記に一応自分のを置いときます。
私の画像はwaifu diffusionで生成したものを利用していますが、何でもOKです。（jsのサイズ指定部分を合わせて変更して下さい。）
.
├── images
│ ├── 1.png
│ ├── 2.png
│ ├── 3.png
│ ├── 4.png
│ ├── 5.png
│ ├── 6.png
│ ├── 7.png
│ ├── 8.png
│ ├── 9.png
│ └── 10.png
├── index.html
├── index.js
├── node_modules
├── package-lock.json
├── package.json
└── readme.md
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>placeImage</title>
</head>
<body>
<h1>placeImage</h1>
<img src="http://localhost:3000/400/300" />
<h2>使い方</h2>
<p>下記のように幅と高さを指定すれば画像を取得できます。</p>
<p class="caution">
注意：幅512px、高さ512px以上の指定は、512pxにそれぞれリサイズされますのでご注意下さい。<br />
また、3桁以上の数字を入力した場合や数値以外の値を入力した場合は404エラーとなります。
</p>
<p class="link">
例：<a href="http://localhost:3000/400/300" target="_blank"
>http://localhost:3000/400/300</a
>
</p>
</body>
</html>
あと、package.jsonにindex.jsを起動するための記述を追加して下さい。
"scripts": {
"start": "node index.js"
}
apiの実装
コードの全体像が下記です。先程作成したindex.js内に記述して下さい。
const express = require("express");
const path = require("path");
const cors = require("cors");
const sharp = require("sharp");
const app = express();
// 画像の数を入れる定数
const imagesLength = 10;
// 他のサービスで利用する場合にCORSエラーが起きないようにするやつ（ローカルだけならいらない）
app.use(cors());
// indexページの生成
app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
});
// widthとheightを1~4桁で取ってランダムな画像をトリミングして表示
app.get("/:width([0-9]{1,3})/:height([0-9]{1,3})", async (req, res) => {
const width = Math.min(Number(req.params.width), 512);
const height = Math.min(Number(req.params.height), 512);
let fileName = Math.floor(Math.random() * imagesLength) + 1 + ".png";
let filepath = path.join(__dirname, `images/${fileName}`);
try {
const resizedBuffer = await sharp(filepath)
.resize(width, height, { fit: "cover" })
.toBuffer();
const encodedBuffer = resizedBuffer.toString("base64");
var img = Buffer.from(encodedBuffer, "base64");
res.writeHead(200, {
"Content-Type": "image/png",
"Content-Length": img.length,
});
res.end(img);
} catch (e) {
res.status(404).send("<h1>404 page not found</h1>");
}
});
// 404ページ
app.all("*", (req, res) => {
res.status(404).send("<h1>404 page not found</h1>");
});
const port = process.env.PORT || 3000;
app.listen(port, () => console.log("listen on port:", port));
重要な画像の取得部分のみ説明します。
// widthとheightを1~4桁で取ってランダムな画像をトリミングして表示
app.get("/:width([0-9]{1,3})/:height([0-9]{1,3})", async (req, res) => {
const width = Math.min(Number(req.params.width), 512);
const height = Math.min(Number(req.params.height), 512);
let fileName = Math.floor(Math.random() * imagesLength) + 1 + ".png";
let filepath = path.join(__dirname, `images/${fileName}`);
try {
const resizedBuffer = await sharp(filepath)
.resize(width, height, { fit: "cover" })
.toBuffer();
const encodedBuffer = resizedBuffer.toString("base64");
var img = Buffer.from(encodedBuffer, "base64");
res.writeHead(200, {
"Content-Type": "image/png",
"Content-Length": img.length,
});
res.end(img);
} catch (e) {
res.status(404).send("<h1>404 page not found</h1>");
}
});
expressではパスに正規表現を利用できるため、下記のような形で横幅と高さのパラメータを制限しています。
今回は数値かつ、1~3桁の範囲で指定しています。
"/:width([0-9]{1,3})/:height([0-9]{1,3})"
下記で横幅、高さを指定します。今回は最大値を512にしていますが、好きに変更して下さい。
const width = Math.min(Number(req.params.width), 512);
const height = Math.min(Number(req.params.height), 512);
ここで画像ファイルをランダムに取得しています。
let fileName = Math.floor(Math.random() * imagesLength) + 1 + ".png";
let filepath = path.join(__dirname, `images/${fileName}`);
最後に画像をバッファにしてレスポンスに渡しています。
何らかの理由で画像が表示できなければ404ページを表示します。
try {
const resizedBuffer = await sharp(filepath)
.resize(width, height, { fit: "cover" })
.toBuffer();
const encodedBuffer = resizedBuffer.toString("base64");
var img = Buffer.from(encodedBuffer, "base64");
res.writeHead(200, {
"Content-Type": "image/png",
"Content-Length": img.length,
});
res.end(img);
} catch (e) {
res.status(404).send("<h1>404 page not found</h1>");
}
以上です。
それでは〜〜〜
p.s.
1年前に転職してから一個も記事あげられてなかったのですが、ようやく記事を書けました...