Help us understand the problem. What is going on with this article?

サーマルプリンタで印刷する: レンダリングサービス編

More than 1 year has passed since last update.

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画像として出力されます。上記の出力例は以下の通りです。

hello.png

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

pi@raspi-3bp$ curl \
  --request POST \
  --header "Content-Type: image/png" \
  --data-binary @hello.png \
  http://localhost:3030/print
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away