Skip to content
Permalink
Browse files
Update
  • Loading branch information
mizchi committed Jun 21, 2020
1 parent 282c8e6 commit 02aa3a324770e66fcdf6ff2c33233f9d25b6fb4e
Showing 1 changed file with 95 additions and 0 deletions.
@@ -0,0 +1,95 @@
---
title: OGP対応をした
created: 1592735118538
tags: [amdxg]
---

こんな感じ

![](https://i.gyazo.com/8ca7358293d7f1e46a1a7e974d023f2c.png)

## やり方

- `node-canvas` でタイトルを元にした画像を `public/ogp/[slug].png` に生成
- `<meta property="og:image" content="<url>">` でその出力画像を指定
- 他、`og:title``og:url`, `<meta name="twitter:card" content="summary_large_image" >` を追加

## 画像生成スクリプト

特に理由がないが node@14 の mjs で書いた。

```tsx
// script/generate-ogp.mjs
import canvas from "canvas";
import fs from "fs/promises";
import path from "path";
const W = 600;
const H = 315;
const LINE_HEIGHT = 30;
function getRows(ctx, text) {
const words = text.split(" ");
let rows = [];
let currentRow = [];
let tokens = words.slice(0);
let token;
while ((token = tokens.shift())) {
const mText = [...currentRow, token].join(" ");
const measure = ctx.measureText(mText);
if (measure.width <= W) {
currentRow.push(token);
} else {
rows.push(currentRow.slice());
currentRow = [token];
}
}
if (currentRow.length > 0) {
rows.push(currentRow);
}
return rows;
}
function renderText(ctx, rows) {
const rowCount = rows.length;
for (let i = 0; i < rowCount; i++) {
const rowText = rows[i].join(" ");
const m = ctx.measureText(rowText);
const w = (W - m.width) / 2;
// const h = (LINE_HEIGHT + 12) * (i + 1);
const h = 40 + 210 / 2 - (LINE_HEIGHT + 12) * (rowCount - i - 1);
ctx.fillText(rowText, w, h);
}
}
async function generateImage(text, outputPath) {
const cvs = canvas.createCanvas(W, H);
const ctx = cvs.getContext("2d");
ctx.font = `${LINE_HEIGHT}px Impact`;
const rows = getRows(ctx, text);
ctx.fillStyle = "white";
ctx.fillRect(0, 0, W, H);
ctx.fillStyle = "black";
renderText(ctx, rows);
const m = ctx.measureText("mizdev");
ctx.fillText("mizdev", (W - m.width) / 2, 250);
const buf = cvs.toBuffer();
await fs.writeFile(outputPath, buf);
}
async function main() {
// const out = path.join(dirname, "../public/ogp/", p.slug + ".png");
await generateImage("ここにタイトルを入れる", "ogp-image.png");
console.log("[gen:ogp]", out);
}
main();
```

0 comments on commit 02aa3a3

Please sign in to comment.