ユーザ生成コンテンツは、OGPを画像化して見せるのがデファクトスタンダードのようになってきました。
node.jsから、画像処理をcanvasのように扱える node-canvasを使う人も多いのではないでしょうか。
その方法は色々紹介されています。例えばこちらの記事など。
node.jsではてなブログ風アイキャッチ画像を動的に生成する
このnode-canvasですが、デフォルトでは絵文字は描画ができません。
今回は、node-canvasで、絵文字を Twemojiの見た目で描画するモジュールの紹介です。
node-canvasで絵文字を扱う
node module を npmで公開しておきました。
$ npm install--save node-canvas-with-emoji
const{createCanvas}=require('canvas');const{fillTextWithTwemoji}=require('node-canvas-with-twemoji');asyncfunctionmain(){constcanvas=createCanvas(500,300);constcontext=canvas.getContext('2d');context.font='30px Arial';awaitfillTextWithTwemoji(context,'絵文字も描画😉',140,160);}main();
提供しているのは fillTextWithTwemoji(context, text, x, y, options?)という関数です。
contextを渡す以外は、本家の CanvasRenderingContext2D.fillTextのように扱えるようにしています。
ただし、fillTextWithTwemojiは非同期(Promise)で扱われるため、Promise や async/await も利用する必要があります。
(関数内で絵文字画像をダウンロードしているため)
また、現時点(2020.03.01)ではイタリック書体や、maxWidth引数などに対応していません。
こちらで開発しているので何かあれば。 GitHub
スターがつくだけでもやる気が出て実装するかもしれません。
雑記
Twemojiではなく、Apple Color Emojiなど、絵文字フォントを使う方法もあるようです。
- Any emoji support?
- Colored Emoji
ただし、こちらは著作権周りで、実際に使う場合は注意が必要です。
- 「絵文字」の利用で気をつけた方が良いこと、安全な使い方について
雑記2
同じようなこと考えてる人もいました。
- node-canvas でカラー絵文字対応について考えてたこと