REST API を使用して QR コードを生成: 1 つの POST、インスタント SVG

e コマースのチェックアウトでは、各注文の追跡 URL の QR コードを表示する必要があります。 できますよ クライアント側の QR ライブラリをインストールし、キャンバス要素を構成し、レンダリングのライフサイクルを処理し、 バンドルに 30 ～ 40 KB を追加します。 または、1 つの POST リクエストを送信して SVG を返すこともできます。

ボトイ /v1/qr/generate エンドポイントはあらゆる文字列または URL をスキャン可能な QR に変換します コード。 HTML に埋め込んだり、ファイルに保存したり、PDF にストリーミングしたりできる生の SVG を返します。 npmなし パッケージ、キャンバス依存関係、ビルドステップはありません。

API呼び出し

エンコードするテキストを含む POST リクエストを送信します。

応答は生の SVG 画像です (Content-Type: image/svg+xml):

SVG はベクターベースであるため、どのサイズでも鮮明にレンダリングされます。 にドロップします <img> タグを使用するか、HTML 内にインライン化するか、ファイルにパイプします。 JSON解析なし 必要です。 応答本文は SVG 自体です。

パラメータ

エンドポイントは 6 つのパラメーターを受け入れます。 のみ text が必要です：

• 文章 (文字列、必須): エンコードする URL またはテキスト。 最大 4,296 までサポート 英数字。
• サイズ (数値、デフォルトは 300): 幅と高さ (ピクセル単位)。 範囲: 50 ～ 2000。
• 暗い色 (16 進文字列、デフォルト #000000): の前景色 QRモジュール。
• 光の色 (16 進文字列、デフォルト #ffffff): 背景色。
• エラー修正レベル (文字列、デフォルト M）：Lのいずれか（7％）、 M (15%)、Q (25%)、または H (30%)。 レベルが高いほど、より多くのダメージを許容できますが、より高密度のコードが生成されます。
• マージン (数値、デフォルトは 4): モジュール内の QR コードの周囲のクワイエット ゾーン。 範囲: 0 ～ 20。

以下は 6 つのパラメータすべてを使用したリクエストです。

実践例

レストランメニューQRコード

テーブル テントに QR コードを印刷すると、ダイナーは携帯電話で完全なメニューを表示できます。 エラー 補正 H は擦り傷やコーヒーの汚れを処理します。

イベントチケットQRコード

各 QR コードに一意のチケット ID をエンコードします。 スタッフが玄関でスマートフォンを使ってスキャンします カメラ。 エラー補正 Q は、密度と損傷耐性の間の適切なバランスを提供します。 印刷されたバッジの場合。

支払いリンクQRコード

請求書、領収書、または POS 表示用のスキャン可能な支払いリンクを生成します。 の 顧客はそれをスキャンし、Stripe のチェックアウト ページにアクセスします。

ループ内でのバッチ生成

製品カタログの QR コードが必要ですか? URL のリストをループし、各 SVG をディスクに保存します。 この bash スクリプトは 1 秒以内に 4 つの QR コードを生成します。

出力：

Node.js の例: 注文追跡用の QR コード

この Express サーバーは、 /orders/:id/qr 終点。 チェックアウト時 ページまたは確認メール テンプレートがこの URL をフェッチすると、SVG QR コード ポイントが返されます。 注文の追跡ページに移動します。

使用法：

エンドポイントは 24 時間キャッシュ ヘッダーを設定するので、同じ注文に対する繰り返しリクエストがヒットしないようにします。 もう一度 API を使用します。 運用環境では、トラフィックが増加するように、このルートの前に Redis または CDN を追加します。

クライアント側 QR ライブラリと API: いつどちらを使用するか

サーバー側での生成（メール、PDF、領収書）が必要な場合や、 フロントエンド バンドルを小さく保つか、バックエンド ワークフローで QR コードを生成する場合 注文処理やチケットの発行など。

アプリがオフラインで動作する必要がある場合、待ち時間がより重要な場合は、クライアント側ライブラリを使用します。 バンドル サイズ (5 ミリ秒未満のレンダリング) よりも小さい場合、またはユーザーが生成するツールを構築している場合 ブラウザーで QR コードをインタラクティブに実行し、ネットワーク リクエストに依存したくない場合 キーストロークごとに。

重要なポイント

1 分あたり 5 リクエストの無料枠は、開発、プロトタイピング、および少量をカバーします。 生産用途。 バッチ生成または高トラフィックのアプリの場合は、API キーを Authorization: Bearer ヘッダ。 チェックしてください APIドキュメント 完全なエンドポイント参照については。