Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8701

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

$
0
0

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

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

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

01.png

店名スタンプ?

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

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

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

ロゴ画像を作る

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

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

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

02.png

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

03.png

画像の圧縮

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

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

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

04.png

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

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

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

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

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

05.png

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

06.png

画像の挿入

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

07.png

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

08.png

編集エリアに 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==}

09.png

画像の位置揃え

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

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

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

10.png

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

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


Viewing all articles
Browse latest Browse all 8701

Trending Articles