More than 3 years have passed since last update.

簡単レシート印刷 receiptline と 20 行の JavaScript でレジプリンターをインスタントカメラにしてみた

Posted at 2020-07-24

日本発のオープンソース receiptline でレシート印刷に少しずつトライしています。
今回は、前回のレシートプリンターと変換 API を使ってアプリを作ります。

実はこれを作りたかった

“レジプリンター式インスタントカメラで「レシート日記」はなぜ楽しいのか？”
https://weekly.ascii.jp/elem/000/004/004/4004167/

“1枚1円の安さが正義、レシート現像のトイカメラが楽しい｜ベストバイ2019”
https://japanese.engadget.com/jp-2019-12-23-1-1-2019.html

“むしろ大人が欲しい多機能ぶり！プリンター内蔵の子ども用カメラ「myFirst Camera Insta 2」”
https://capa.getnavi.jp/news/339006/

そうです。インスタントカメラです。
記事を読んでいるだけで楽しさが伝わってきます。

早速これを receiptline で作ります。
もちろんカメラデバイスが必要です。

インスタントカメラのコード

アプリの開発環境は何でも構わないのですが、最短コースで。
receiptline の Node.js サンプルプログラムをベースにします。

作業フォルダを作成して example/nodejs 以下をまるごとコピー。
コピーした wwwroot/index.html 書き換えます。

wwwroot/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Instant Camera</title>
    <script type="text/javascript">
        async function initialize() {
            const video = document.querySelector('video');
            const canvas = document.querySelector('canvas');
            // video
            video.srcObject = await navigator.mediaDevices.getUserMedia({ audio: false, video: true });
            video.onclick = event => {
                // image
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                let data = `{i:${canvas.toDataURL('image/png').slice(22)}}\n`;
                // barcode
                const now = new Date();
                const iso = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString();
                data += `{c:${iso.replace(/\D/g, '').slice(2, 14)};o:ean,24}|`;
                // send data
                const xhr = new XMLHttpRequest();
                xhr.open('POST', 'printer');
                xhr.setRequestHeader('Content-Type', 'text/plain; charset=utf-8');
                xhr.send(data);
            };
        }
    </script>
</head>
<body onload="initialize()">
    <video autoplay style="width: 100%;"></video>
    <canvas width="576" height="432" style="display: none;"></canvas>
</body>
</html>

20 行の JavaScript コードで出来てしまいました。

写真サイズ

576 × 432 ピクセルに固定してあります。
レシートプリンターの幅に合わせて Canvas のサイズを変更してください。

TM-T88V (80mm)
- 512 × 384 ピクセル
mC-Print3 (80mm)
- 576 × 432 ピクセル (変更不要)

<canvas width="576" height="432" style="display: none;"></canvas>

撮影日時

バーコードで撮影日時を印刷しています。
2023 年 7 月 20 日 12 時 34 分 56 秒の場合。

データ (12 桁)
- 23 (年)
- 07 (月)
- 20 (日)
- 12 (時)
- 34 (分)
- 56 (秒)
チェックデジット (1 桁)
- 1 (自動計算)

バーコードの種類は JAN (EAN) コードです。
バーコード / QR コードリーダーアプリで読み取ることができます。

ReceiptLine

{c:230720123456;o:ean,24}|

プリント先

プリンター ID を printer に固定してあります。
印刷設定に合わせて変更することができます。

xhr.open('POST', 'printer');

印刷設定

コピーした printers.json で設定します。
使用するレシートプリンターに合わせて調整が必要です。
特にガンマ補正 gamma の値は写真の画質に影響します。

TM-T88V (80mm)

printers.json

{
    "printer": {
        "host": "192.168.1.2",
        "port": 9100,
        "cpl": 42,
        "encoding": "cp932",
        "gamma": 1.8,
        "upsideDown": false,
        "command": "escpos"
    }
}

mC-Print3 (80mm)

printers.json

{
    "printer": {
        "host": "192.168.1.3",
        "port": 9100,
        "cpl": 48,
        "encoding": "cp932",
        "gamma": 1.8,
        "upsideDown": true,
        "command": "starmbcs"
    }
}