簡単レシート印刷 receiptline でロゴ画像を作ってみた

日本発のオープンソース receiptline でレシート印刷に少しずつトライしています。

マイナーでニッチな内容にもかかわらず 6 回目にして初 LGTM 初リンク。
ありがとうございます！
手元のメモによると、このシリーズはあと 6 回ほど続く見込みです。
もうしばらくお付き合いくださいね。

レシートプリンターを入手できていないため、前回利用した開発ツールを引き続き使います。
今回はロゴ画像です。

店名スタンプ？

レシートの上のほうにお店のロゴが印刷されていますね。
このロゴは画像ですが、店名スタンプと呼ばれることがあるそうです。

昔のキャッシュレジスターは「はんこロボ」が中でスタンプを押していたらしいです。
・・・人協調ロボットが契約書にはんこを押せるようになったのは最近のことですよ？

時代は変わっても、お店の看板やロゴから店名スタンプを作るところは変わらないようです。
はんこ屋さんになったつもりでロゴ画像を作ってみましょう。

ロゴ画像を作る

お店のロゴデータをビットマップデータに変換して縮小します。

開発ツールに表示されているレシート用紙の幅は最大 576 ドット。
ロゴ画像の幅を 576 ピクセル以下にする必要があります。
用紙幅の違いや余白を考慮すると、最大幅の半分程度が目安になると思います。

GIMP で架空のお店のロゴ画像を作ってみました。
サイズは 288 × 48 ピクセルです。

GIMP のメニューから「ファイル(F)」→「エクスポート...」を開いて PNG 形式で保存します。

画像の圧縮

保存した PNG ファイルのサイズは 5,037 バイトでした。
ファイルサイズはできるだけ小さくすることが推奨されています。

インデックスカラーに変更

画像モードを RGB カラーからインデックスカラーに変更します。
GIMP のメニューから「画像(I)」→「モード(M)」→「インデックス(I)...」を開きます。

カラーマップを選択して「変換(O)」します。今回はモノクロで。

• モノクロでよい場合
  • Use black and white (1-bit) palette
• 色を残したい場合
  • Generate optimum palette

PNG の保存オプションを変更

PNG ファイルの補助データを削除します。
GIMP のメニューから「ファイル(F)」→「エクスポート...」を開いて PNG 形式で保存。

PNG 形式の保存オプションが開きます。
すべてのチェックを外して「エクスポート(E)」します。

保存した PNG ファイルのサイズは 499 バイトになりました。約 10 分の 1 です。

画像の挿入

作成したロゴ画像を開発ツールで読み込んでみましょう。
画像アイコンをクリックすると、ダイアログボックスが開きます。

ここで PNG ファイルを選択して、OK ボタンをクリックすると、画像が挿入されます。
キャンセルしたいときは、ダイアログボックスの外をクリックします。

編集エリアに image プロパティが挿入されました。
名前は image または i、値は PNG ファイルの base64 データです。

ReceiptLine

{image:iVBORw0KGgoAAAANSUhEUgAAASAAAAAwAQMAAACL7DXsAAAABlBMVEUAAAD///+l2Z/dAAABqElEQVQ4y+3VMW7bMBQGYLIqwqUo10ymj5AxBQwouUmO0NEFBFOCBo05Qs7QG5DV0K1noOGhKwMvLEDw7yOVALEUIB46BdUofJTe+x8pMZxxsXeFol4gJucm1HMUopght0SPmCO2RCOGGTJLNBB783UShzladidxfBMluYjpFaT+FYqEKE4O/8VtRA7WrRO8Sl+pEIPWq2Nd0LGPHvc81CJYYGgTfslwdy2wql1UP1RBv+2foFVHaO8AaYAHYW4uq1hLF1dsQj/tY9wpS2j0hAgq4TZVXkVP+jChwfrU1BPSSTkkJfxO2KAHQv1U04P1OhbUMh0z0oQk3e0zmrpD50UoqKdWCSGdopxT4oGfojBDNBZvIztF4ynKA95bsG1B3RMaFugw2qPfqmeUI5AzNODQU06NzMgkqpm6m9BTBGX7jn33PTYUy0qYBqki9PmiIApzW9Aeol1fxcR45MJxmjlDYm1GNBb/saDQCHO3/QZ2GyvuK6BdK/AuI6yU/yT6cjjVPqQK1kKqSIE42vPDwVxWTBvEzY69POb2nG/Bf4T2HMT0u/sj/AWoqMYMK2VNkgAAAABJRU5ErkJggg==}

画像の位置揃え

画像は文字列と同様に、テーブルの区切り文字 | で位置揃えができます。
右揃えにして、商品明細と合計も追加してみました。

ReceiptLine

{image:iVBORw0KGgoAAAANSUhEUgAAASAAAAAwAQMAAACL7DXsAAAABlBMVEUAAAD///+l2Z/dAAABqElEQVQ4y+3VMW7bMBQGYLIqwqUo10ymj5AxBQwouUmO0NEFBFOCBo05Qs7QG5DV0K1noOGhKwMvLEDw7yOVALEUIB46BdUofJTe+x8pMZxxsXeFol4gJucm1HMUopght0SPmCO2RCOGGTJLNBB783UShzladidxfBMluYjpFaT+FYqEKE4O/8VtRA7WrRO8Sl+pEIPWq2Nd0LGPHvc81CJYYGgTfslwdy2wql1UP1RBv+2foFVHaO8AaYAHYW4uq1hLF1dsQj/tY9wpS2j0hAgq4TZVXkVP+jChwfrU1BPSSTkkJfxO2KAHQv1U04P1OhbUMh0z0oQk3e0zmrpD50UoqKdWCSGdopxT4oGfojBDNBZvIztF4ynKA95bsG1B3RMaFugw2qPfqmeUI5AzNODQU06NzMgkqpm6m9BTBGX7jn33PTYUy0qYBqki9PmiIApzW9Aeol1fxcR45MJxmjlDYm1GNBb/saDQCHO3/QZ2GyvuK6BdK/AuI6yU/yT6cjjVPqQK1kKqSIE42vPDwVxWTBvEzY69POb2nG/Bf4T2HMT0u/sj/AWoqMYMK2VNkgAAAABJRU5ErkJggg==}|
^^領収書|
2020/07/20 01:23|
#NGC17TH|

缶ビール | ¥211~
シュークリーム | ¥129*
-
小計 | ¥340~
(10%対象 | ¥211)
( 8%対象 | ¥129)
(内消費税等 | ¥28)
^合計 | ^¥340
お 預 り | ¥1,000
お 釣 り | ¥660

*印は軽減税率対象商品です。

ちなみに、画像は文字列のように 2 列にしたり罫線を引いたりすることができません。
この制約はレシートプリンターのコマンド仕様に由来するようです。

次回は、バーコードと QR コードを試してみようと思います。