M.C.P.C. (Mamesibori Creation Plus Communication)

印刷屋から五反田のWeb屋に転職したCLのブログです。

漢字ROM代わりにnode.jsのCanvasで字形を取得

Qiitaのほうで、Raspberry Piのnode.jsで画像加工するためにnode-canvasを入れるっていうのを書いた。

qiita.com

なので、今後はインストールのところはすっ飛ばしコードばかり書く。

せっかくなので、Qiitaのほうで書いた漢字をバナーとして描画するコードに改良を加え、任意のフォントが指定できるようにしてみます。

作例に使ったmigu-1mは

Miguフォント : M+とIPAの合成フォント

より入手のこと。コンソール表示用日本語等幅フォントです。

'use strict';

// kanji.js:
// node.jsでテキストバナーを表示します。

// use libs;

var Canvas = require('canvas');

// Const

var WIDTH = 80;
var THRESHOLD = 0;

// 描画

var Image  = Canvas.Image;
var canvas = new Canvas(WIDTH, 16);
var ctx    = canvas.getContext('2d');

ctx.antialias = 'none';
ctx.textBaseline = 'top';
//ctx.font = '16px Sans-serif';
var Font = Canvas.Font;
var myFont = new Font('MyFont', 'migu-1m-regular.ttf');
ctx.font = '16px MyFont';
ctx.fillText("漢字ROM", 0, 0);
ctx.stroke();

// ピクセル走査

var imageData = ctx.getImageData(0, 0, WIDTH, 16);

for (var y = 0; y < 16; y++ ) {
  var text = '';
  for (var x = 0; x < WIDTH; x++) {
    // RGBa
    text += (imageData.data[(x + y * WIDTH) * 4 + 3] > THRESHOLD ? '0' : ' ');
  }
  console.log(text);
}

実行例はこちら。

pi@raspberrypi ~/test3 $ node kanji.js
 
       0    0          00
  0  0000000000  00000000000000     000000            0000         0        0
   0   0    0    00          00     0    000        00    00       00      00
     0000000000  00          00     0      0       00      00      00      00
 0   00  00  00  00000000000000     0      0       0        0      000    000
 00  00  00  00           00        0      0      00        00     000    000
   000000000000          00         0     0       00        00     0  0  0  0
         00             0           000000        00        00     0  0  0  0
     0000000000  00000000000000     0    00       00        00     0   00   0
   0     00      00000000000000     0     0        0        0      0   00   0
   000000000000         0           0     00       00      00      0        0
  0     0000            0           0      0        00    00       0        0
  0    00  00           0           0      0         000000        0        0
 0   00      00     00000
 
pi@raspberrypi ~/test3 $

Qiitaに書いたときの出力よりローマ字の形がよい。

指定するフォントファイルですが、鬼のようにセンシティブな取り扱いである商用DTPの世界のOpenTypeフォント群をしり目に、フォント・ドライバともに謎発展しているので、ともかく手持ちの日本語フォントで表示できるかどうか指定してみて、その後ライセンスを確認してがっかりしたりうれしがったりするって感じになると思います。