Canvasでバーコードを読む

JANの仕様

ここが分かりやすい。→ バーコードの作り方

プログラミングでの話

まずは、

1. バーコードの部分だけ写ってる写真を用意する
2. 高さ1px分どこかを切り取る
3. コントラスト調整
4. 2値化
5. ビットの文字列にする
6. モジュールの幅を調節
   • 左右のガードバーからスケールを推測
7. ガードバー部分を削除

みたいな準備をします。結構写真写りに左右されるかも。
13桁の数字のうち、画像として表現されているのは2-13文字目までの12文字で、最初の1文字目は2-7文字目によって判別します。なので、とりあえず2文字目以降を判別します。対応表は下みたいな感じ。

{
	left: {
		odd: {
			"0001101": 0, "0011001": 1, "0010011": 2, "0111101": 3, "0100011": 4,
			"0110001": 5, "0101111": 6, "0111011": 7, "0110111": 8, "0001011": 9
		},
		even: {
			"0100111": 0, "0110011": 1, "0011011": 2, "0100001": 3, "0011101": 4,
			"0111001": 5, "0000101": 6, "0010001": 7, "0001001": 8, "0010111": 9
		}
	},

	right: {
		"1110010": 0, "1100110": 1, "1101100": 2, "1000010": 3, "1011100": 4,
		"1001110": 5, "1010000": 6, "1000100": 7, "1001000": 8, "1110100": 9
	}
}

leftは2-7文字目を, rightは8-13文字目に対応しています。left部分のodd, evenの組み合わせで1文字目が決まってきます。対応表は下みたいなの。

{
	"oooooo": 0, "ooeoee": 1, "ooeeoe": 2, "ooeeeo": 3, "oeooee": 4,
	"oeeooe": 5, "oeeeoo": 6, "oeoeoe": 7, "oeoeeo": 8, "oeeoeo": 9
}

これで全部の数字が分かるようになりました。不安なときは13文字目でチェックできます。多分こんな感じで。

function checkDigit(nums){
	var n = 0;

	for(var i = 0; i < 12; ++i)
		n += nums[i] * ((i % 2 == 0)? 1 : 3);

	return 10 - (n % 10) == nums[12];
}

デモなど

http://arikui.github.com/ip/barcode.html
Firefox3でのみ確認。何回かボタン押せば出る。
ImageProcessing.jsのモジュールはここに。
GitHub - arikui/image_processing.js: JavaScript library for canvas