photo credit: Chiara Marra via photopin cc
ネイティブアプリでバーコードを読み込む技術は一般的になっていますが、Web上でバーコードが読めないか色々調べてみました。
Index
今回の検証モジュール
すこし古い記事ですが今回は「BADASS JAVASCRIPT」に記載されているjavascriptを試してみました。
GitHub ： Link
Demo : Link
検証した環境は以下になります。
・Windows7 Chromeブラウザ
・Android Chromeブラウザ
実行してみた結果
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<script src="jquery-1.10.2.js"></script>
<script src="get_barcode_from_image.js"></script>
<script>
$(document).ready(function() {
$("#readButton").click(a);
var image = $("#barcode").get(0);
image.onload = function() {
window.alert(getBarcodeFromImage(image));
}
});
function a() {
var image = $("#barcode").get(0);
image.src = "barcode.jpg";
}
</script>
<body>
<img id="barcode" />
<input type="button" value="click" id="readButton" />
<canvas id="canvas" />
<p id="result"></p>
</body>
</html>
jQueryの勉強も合わせて行っているので無駄な記述もありますが・・・
こんな感じです。
7行目：javascript「get_barcode_from_image.js」を読み込みます。
<script src=”get_barcode_from_image.js”></script>
13行目：Imageオブジェクトを「getBarcodeFromImage」へ渡す事で読み取ったコードが返却されます。
コード取得に失敗した場合はfalseが返却されますが、部分的に取得できなかった場合は「X」が表示されます。
window.alert(getBarcodeFromImage(image));
Demoページを実行してみると分かりますが、先頭の「5」が取得されません。
なので実際の利用は難しいですね。
まとめ
このコードは2010年のものでそれから修正はない状態です。
また、コメントの最後にもあるように「DecoderWorker.js」の方が良いみたいです。
次回は「DecoderWorker.js」の検証してみます！
今回のように画像を読み込んで処理するのであれば、サーバへアップし処理する方が処理時間も解析正確な気もします。
また、バーコード以外が写っている画像の場合も正しく認識されない恐れがあるため、ミスの少ない撮影方法も考える必要がありますね。
この記事のトラックバック用URL