バーコード・QRコード作成
QRコード、EAN-13、UPC-A、Code 128、ITF-14、Data Matrixを作成し、SVGやPNGで保存。画像からコードを読み取ることもできます。
コード例
自分のプロジェクトにコピーして使えます。どの例も言語の標準ライブラリだけを使うので、インストールするものはありません。
const body = '590123412345'
const sum = [...body].reduce((total, digit, i) => total + Number(digit) * (i % 2 === 0 ? 1 : 3), 0)
console.log(body + ((10 - (sum % 10)) % 10))できること
入力した文字列から、QRコード、EAN-13、EAN-8、UPC-A、Code 128、ITF-14、Data Matrixを描画し、SVGまたはPNGで保存します。数字のコードにはチェックデジットが付き、間違ったものは描画せず理由を示します。対応ブラウザーでは、画像からコードを読み取ることもできます。
使い方
- コードの種類を選んで内容を入力するか、例を選びます。
- プレビューを確認します。小さく印刷する場合やロゴを重ねる場合は、QRの誤り訂正を上げます。
- 印刷にはSVG、画面にはPNGで保存するか、画像からコードを読み取ります。
例
https://codeknife.dev をQRコードにすると、読み取ったときにサイトが開きます。EAN-13で 590123412345 と入力すると 5901234123457 になります。チェックデジットは自動で付きます。Code 128は CODEKNIFE-2026 のような印字可能なASCIIを使えます。
知っておくと便利なこと
- EAN-13は13桁、EAN-8は8桁、UPC-Aは12桁、ITF-14は14桁で、最後の1桁がチェックデジットです。チェックデジットなしで入力すると追加され、すべて入力して違っていれば受け付けません。
- 描画されるコードは白地に黒、余白付きの画像なので、暗いページでも読み取れます。SVGはどの大きさでも鮮明で、PNGはサイズ設定による固定サイズです。
- 画像からの読み取りにはブラウザーのBarcode Detection APIが必要で、まだすべてのブラウザーにはありません。どちらの場合も何もアップロードされず、画像は端末上で読み取られます。
どのバーコードを使えばよいですか?
スマートフォンで読み取るリンクや文字にはQRコード、店頭の商品にはEAN-13かUPC-A、外装ケースにはITF-14、社内ラベルや出荷にはCode 128を使います。Data Matrixは非常に小さな刻印向きです。数字のコードにはチェックデジットが自動で付き、間違ったものは受け付けません。
よくある質問
誤り訂正レベルとは何ですか?
QRコードは予備のデータを持ち、一部が汚れたり隠れたりしても読み取れます。レベルを上げると破損に強くなりますが、同じ文字列でもドット数が増えます。標準は「中」です。中央にロゴを重ねるときは「高」を選びます。
作成したコードは自由に使えますか?
はい。コードはブラウザー内で描画され、透かしもなくあなたのものです。ただし店頭用のEANやUPCの番号には、GS1の事業者コード(会社プレフィックス)が必要です。番号が商品を世界中で識別するためです。
入力した内容はどこかに送信されますか?
いいえ。コードはブラウザー内で描画され、入力内容が当社のサーバーに送られることはありません。