0. 前回までのあらすじ

サーマルプリンタをLinuxから印刷できるようにセットアップし、Raspberry Piから文字、画像をテスト印刷し、画像を印刷するための印刷サービスを構築しました。
これまでの記事については『目次』をご覧ください。

1. レンダリングサービスをセットアップする

印刷サービスによってPNG画像を簡単にサーマルプリンタで印刷できるようになりましたが、文字を印刷するためにわざわざ画像化するのは幾分面倒です。
そこで、HTMLをPNG画像に変換する「レンダリングサービス」を実装しました。
レンダリングサービスは、Docker、Node.js、Chromiumブラウザなどを使って実装しています。
ソースコードは https://github.com/nayutaya/thermal-printer/tree/master/service/rendering をご参照ください。

# thermal-printerリポジトリをclone済みの場合は、以下の3行は不要です。
pi@raspi-3bp$ mkdir -p ~/repo/github.com/nayutaya
pi@raspi-3bp$ cd ~/repo/github.com/nayutaya/
pi@raspi-3bp$ git clone https://github.com/nayutaya/thermal-printer.git

pi@raspi-3bp$ cd ~/repo/github.com/nayutaya/thermal-printer/
pi@raspi-3bp$ git pull
pi@raspi-3bp$ git checkout service-rendering-v1.0.0
pi@raspi-3bp$ git branch -v
* (HEAD detached at service-rendering-v1.0.0) 9e4fe25 Merge pull request #10 from nayutaya/issue#8_add_chrome_extension
  master                   9e4fe25 Merge pull request #10 from nayutaya/issue#8_add_chrome_extension

pi@raspi-3bp$ cd ~/repo/github.com/nayutaya/thermal-printer/service/rendering/
pi@raspi-3bp$ ./build_image.sh
pi@raspi-3bp$ ./run_service.sh
pi@raspi-3bp$ docker ps
CONTAINER ID        IMAGE                               COMMAND                  CREATED             STATUS              PORTS                    NAMES
3fac97d75973        thermal-printer/service/rendering   "/bin/bash --login -…"   26 seconds ago      Up 23 seconds       0.0.0.0:3031->8080/tcp   thermal-printer_service_rendering
3798bbbc7239        thermal-printer/service/printing    "uwsgi --module=app …"   2 weeks ago         Up 2 weeks          0.0.0.0:3030->8080/tcp   thermal-printer_service_printing

2. レンダリングサービスでHTMLを画像に変換する

レンダリングサービスはWebサービスとして動作しており、3031/tcpで待機しています。GET /を送信することで動作を確認することができます。

pi@raspi-3bp$ curl http://localhost:3031/
{"time":"2018-11-24T12:54:51.707Z"}

POST /render_htmlに対してパラメータ（画像の幅、HTML）を含むJSONを送信することで、HTMLを画像に変換することができます。

pi@raspi-3bp$ cd ~/repo/github.com/nayutaya/thermal-printer/service/rendering/
pi@raspi-3bp$ cat hello.json
{
  "width": 576,
  "html": "<html><body><div style=\"font-size: 64px;\">Hello World<br/>こんにちは世界</div></body></html>"
}

pi@raspi-3bp$ curl \
  --request POST \
  --header "Content-Type: application/json" \
  --data-binary @hello.json \
  http://localhost:3031/render_html > hello.png

pi@raspi-3bp$ file hello.png
hello.png: PNG image data, 560 x 148, 8-bit/color RGBA, non-interlaced

ChromiumブラウザによってHTMLがレンダリングされ、PNG画像として出力されます。上記の出力例は以下の通りです。

レンダリングサービスで生成したPNG画像を印刷サービスに渡すことで、結果としてHTMLをサーマルプリンタで印刷することができます。

pi@raspi-3bp$ curl \
  --request POST \
  --header "Content-Type: image/png" \
  --data-binary @hello.png \
  http://localhost:3030/print