Q&A
カートの処理ごと質問を丸投げしていると思われたのかもしれないと思い、修正しました。
前提・実現したいこと
言語：PHP
フレームワーク：zendFramework3
質問内容：
★画像内の特定の文字列（バーコード、１画像に複数）をクリックした時のアクションをとりたい
★一つ一つマッピング処理をせずにそれを実現できないか？
現在以下のような動きをするシステムを開発しました。
①jpgファイルに複数のバーコードがあります（カタログ１ページのような感じです）
②バーコードをクリックすると、その商品がカートに入る
現在はjpeg一つ一つに手作業でマッピングをし、そのアクションをもってカートに入れています。
ここで質問したいのは、画像の量が膨大なので、手作業のマッピングをせずに、
画像からバーコードを自動でよみとり、クリックアクションをとれないかということです。
現在既にやっていること
jpg内のバーコードにひとつひとつマッピングして実現している。
試してみたこと
画像のバーコードを文字列として認識させてなんとかできないだろうかと思っているのですが
どのみちマッピングが必要になるので、今と変わらないかもしれません
力を借りたい事
画像のバーコードの部分をクリックしたときに動作をさせたい、
この紐づけを自動で行う方法が他にないか
何かヒントを頂けるとありがたいです。
バーコード部分というのは具体的にどうやって識別すればいいのでしょうか？今やっているマッピングで対処というのはどういうことを表現していますか？マウスはバーコードスキャナと違って領域を持っていないので何を手掛かりにすべきか前提を教えてください
>バーコード部分というのは具体的にどうやって識別すればいいのでしょうか？ というのが今回の質問です。現在はjpgにmapタグでイメージマップを手作業ではっています。 「何を手がかりに」の箇所が今回の質問です。カートに入れたり注文したり、それをどうこうする部分はどうとでもなるので、そのアクションを取りたいというのが私の質問です。
回答5件
0
ベストアンサー
ZXingのライブラリを利用すると画像内の複数のバーコードから値や座標を取得することができます。
仕事でWebカメラからバーコードやQRコードを読み取りするモジュールを作ったことがあり、その時ZXingを使いました。読取精度は商用ライブラリと引けを取りません。
下のスクリーンショットはC#で１つの画像から複数のバーコード読み取りをやってみた結果です。
このようなツールを作りコードと座標を取得、データベース化すれば、あとはphp側でそれを元にmapを作ることは可能だと思います。
ただ、取得できる座標ですが、1次元バーコードはバーコードの矩形で認識ではなく、「線」扱いになってしまいます。
（一次元のレーザーバーコードリーダーを使う際、リーダーから１本の線が出ますよね、あのようなイメージです）
QRコードならポリゴンで領域が取れるのですが…
横幅は取れるので、うまい具合に縦幅を取る仕組みを追加で実装できれば、自動化できなくもないかなと思います。
(ResultPointsで取れた座標の画素と上下の画素を比較し、大きく変わったところが境界とみなすとか・・・）
頑張ってください。
投稿2018/09/14 15:48
総合スコア4447
ありがとうございます。ZXingのライブラリを使ってそのようなことができるのですね！
バーコードのサイズが固定なら、（メーカーごとの違いはあれど、１カタログはみな同一だとおもうので）
自動化できそうです。
ヒントありがとうございます。質問してよかったです。
0
Web 系は門外漢なので、画像処理に関してコメントします。
質問者さんの課題
複数のバーコードが写っている画像から、バーコードの位置及び数字を認識したい
自動化する手順
バーコード認識は ZXing というライブラリが有名なようです。
ただし、ZXing は1つのバーコードだけ写っている画像でないと駄目なようなので、まず最初に複数のバーコードの部分をそれぞれ切り出す必要があります。
-
- OpenCV でバーコードの位置を検出し、それぞれ切り出す。
実際の画像を見ないとわからないですが、本をスキャンしたようなものであれば、そこまで画像の状態は悪くないと思うので、そこまで難しくもないと思います。
- ZXing に切り出したバーコードをそれぞれ認識させる。
ZXing については今回始めて知ったのですが、Web上で試せるサイトがあったので、以下のバーコードを試してみました。
すると、ちゃんとバーコードの数字が認識されました。
認識結果: 12345670
以上で画像からバーコードの位置及び数字が認識できそうです。
投稿2018/09/14 13:06
総合スコア21956
ありがとうございます！ZXing のライブラリを使って実現してみようとおもいました！
そのようなライブラリをしらなかったので助かりました！ありがとうございます。
0
質問者様あるいは類似の疑問を持って訪れたかたが、求めておられる回答ではないです。
議論がしたいわけでも、批判がしたいわけでもなく、質問に対する要望でもなく、一つの見解ですが、求めておられるようなライブラリや一般的な解決策などはないと思います。
前提として私が認識したこと
- 1つのjpgに複数のバーコードがある
- (おそらく)2次元バーコードではない
- 1つのjpgのどこにバーコードが配置されるかは指定できない
一般的に、バーコードを解釈するツール類は、1ファイルに1つのバーコードがあって、そこからデータを抜くものであって、座標を切り出すものではないと思います。
2次元コードのように位置を合わせるマークが四隅にあったりするならまだしも、棒が並んでいるだけの図柄が任意の位置に複数個ある(下手したら回転がある)と考えると、そこから正しいデータを読み取るのさえ難しいと思います。
スキャンした結果を画像上の座標で返すというのは、用途として一般的ではないですが、それ以上にレジで使われるようなバーコードは、直線でスキャンすれば(多少斜めになっていても)データが読み取れるところに利点があるので、それを矩形に抜くような仕組みを前提にしていません。
座標に対応しているとしても、斜めに赤い線を引くようなことが規格的に限界だと思います(レジの読み取りで目にする赤のスキャン線を想定してください)
色の明度の差を直線で走査したときに値を読み取れるのが、バーコードであって、そもそも縦方向については、規格がありません。
一切調べていませんが、バーコードをクリッカブルな領域(矩形)に切り出すライブラリはないと思います。
やりたいことをプログラム的にどう解決するかの方法としては、バーコードが白の矩形で囲まれている、ことを前提として予約し、画像処理をして、その白い四角形を抜き出す、ということだと思います。
もはやバーコードであるかどうかは関係ないです。
(バーコードっぽい図をphpで切り出すというのは画像処理としてもそこそこハードルが高いと思います、バーコードが白と黒だと想定してさえも)
バーコードをボタンとして使おうというUIそのものは良いと思います。
もし私が、そういう画面を実現するとしたら、個々の商品の図とそれに対応するバーコードを用意して、それら個別の図を大きなキャンバスに適宜配置して一つの商品選択ページを作ると思います。
投稿2018/09/14 10:20
編集2018/09/14 10:22総合スコア12705
回答ありがとうございます！
そうですよね、単純に考えたらそのとおりだと思います。。
ちなみにバーコードの棒ではなく49854124785みたいな文字コードだとしたらどうでしょうか？
（それでも一緒か・・）
pdf化してocr処理みたいなこともできないのかなぁとか色々思ったのですが
本日色々さぐってみて、確かに実現できるようなものが見当たりませんでした。
お客様からはペライチのカタログの画像だけがやってくる状況です
（それ以上のデータは用意してもらえないようです）
＞もし私が、そういう画面を実現するとしたら、個々の商品の図とそれに対応するバーコードを用意し＞＞て、それら個別の図を大きなキャンバスに適宜配置して一つの商品選択ページを作ると思います。
これすごくいいなぁと思ったのですが、
お客様が視覚的に、カタログと同じものを電子データとして見ながら
そのレイアウトで注文したいっておっしゃってて・・・
それで現在そのカタログファイルの座標マッピングでここからここまでクリックされたら
このバーコード、みたいな処理を手作業で入れてる状況なんですよね・・
けどこれが結構大変で。
実現が難しいということで、その旨を報告したいと思います。
ありがとうございました。
ちなみに、
商品マスタとバーコードと商品画像を羅列して、
非同期処理を多様してさくさく動く注文画面は作ったのですが
できれば、カタログ画像クリックで注文したいみたいです。
せめてQRコードだとしたら、
https://qiita.com/enkatsu/items/34e53965b945cdcb2b7b
のようにZXingのライブラリは座標をとれます。
書き方がいささか無礼であったことをお詫びします。ご苦労お察しいたします。
数字の話ですが、数字なら話は別になると思います。OCRは座標を返してくれるものがあります。カメラの笑顔認識などもそうなのですが、どこを文字だと認識したか疑わしい、確認したくなるようなものは一般に座標を取得できます。
これに対してバーコードは、デコードできたら正しく認識できたことが推論できます。たまたまバーコードとして誤認識してしまうデザインはそう流通してないですし、バーコードをつけるものにそういうデザインを採用しないからです。つまり座標と照らしあわせて、ここをこういう数字と認識したのです、と人間に提示する動機がありません。
人間からするとバーコードは図柄として特徴的ですが、求められている要件は、カタログから商品画像を切り出すのとさほど変わらない難しさだと思います。
UIのアイデアは良いですし、こだわりたくなる気持ちは理解できますが、ペライチの画像しか用意できないってのはあまりにもひどいですね。
カタログは版組してるはずで、そのときのメタデータがあれば難度は下がってくると思います。
バーコードの数字をOCRで認知して、バーコード部分をそこから導くとしたら、数字が必ず下にある、バーコードのおおよそのサイズが統一されている、と仮定できるなら可能かと思います
お返事おそくなりました。ZXingのライブラリが使えそうですね！
わかりにくい質問に丁寧に回答していただきありがとうございました。
ためしてみます！
0
svgで処理してみてはいかがでしょうか？
投稿2018/09/14 06:38
総合スコア116466
0
具体的なコードもないのでヒント程度の回答しかできないですが、
商品コードと画像ファイル名のフィールドを持つデータベース（テーブル）を作り
それをもとに表示、また管理画面でそのようなデータを管理という流れが一般的ではないでしょうか？
投稿2018/09/14 06:37
総合スコア307
すいません、質問がわかりにくくてすいません。修正しました。
もちろんそのようなDB構成でカートに商品を追加して、発注するシステムはすでに作成済です。
ただ１つのjpgに複数の商品のバーコードがあるようなものをクリックして
それがカートに入るようにしてほしいという客先の要望があり、
現在はjpg一つ一つマッピング処理を加えてアクションを取っています。
そのようなマッピング処理をせず
jpg内の文字列を自動認識し、アクションを取る方法はないかとおもって質問してみました。
「BarcodeReader.php」と検索するとライブラリが有料、オープンソース多数ヒットしますよ。
ライブラリの使用も検討してみては、このさきは私もやったことないので詳しいことはわからないです。すいません。
うまく動くライブラリがあれば、画像のあるフォルダを指定して、自動で入力するプログラムを作れるかもしれません。
＞taka2063
ヒントありがとうございます！！早速参考にしてみます
あなたの回答
tips
プレビュー
