バーティカルバーの極意（Vol.57掲載）

著者：飯尾淳

バーティカルバー（垂直棒）の集合体「バーコード」の読み取りに挑戦します。すでに、スマートフォンのアプリなどでは、カメラでバーコードを認識する機能が当たり前になっています。この機能を自前のアプリに組み込むことができれば、いろいろな応用が考えられそうです。そのためにも、まずは、バーコード写真を読み込んで認識する基本的な機能を実現してみましょう。

シェルスクリプトマガジン Vol.57は以下のリンク先でご購入できます。

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>JOB</title>
 6   </head>
 7   <body>
 8     <div id="container">
 9       <input id="fileSelecter" accept="image/*" type="file"><br />
10       <canvas width="320" height="240" id="picture"></canvas>
11       <p id="textLabel"></p>
12     </div>
13     <script type="text/javascript" src="JOB.js"></script>
14     <script type="text/javascript" src="mySettings.js"></script>
15   </body>
16 </html>

1 <!DOCTYPE html>

2 <html>

3 <head>

4 <meta charset="utf-8">

5 <title>JOB</title>

6 </head>

7 <body>

8 <div id="container">

9 <input id="fileSelecter" accept="image/*" type="file"><br />

10 <canvas width="320" height="240" id="picture"></canvas>

11 <p id="textLabel"></p>

12 </div>

13 <script type="text/javascript" src="JOB.js"></script>

14 <script type="text/javascript" src="mySettings.js"></script>

15 </body>

16 </html>

 1 var targetFile = document.getElementById("fileSelecter");
 2 var bcImage = document.createElement("img");
 3 var bcLabel = document.getElementById("textLabel");
 4 var canvas  = document.getElementById("picture");
 5 var context = canvas.getContext("2d");
 6
 7 targetFile.onchange = function (event) {
 8   var files = event.target.files;
 9   if (files && files.length > 0) {
10     var file = files[0];
11     var URL = window.URL || window.webkitURL;
12     bcImage.onload = function(event) {
13       bcLabel.innerHTML = "";
14       JOB.DecodeImage(bcImage);
15       URL.revokeObjectURL(bcImage.src);
16     };
17     bcImage.src = URL.createObjectURL(file);
18   }
19 };
20
21 JOB.Init();
22 JOB.SetImageCallback(function(result) {
23   if (result.length > 0) {
24     var tempArray = [];
25     for (var i = 0; i < result.length; i++) {
26       tempArray.push(result[i].Format+" : "+result[i].Value);
27     }
28     bcLabel.innerHTML=tempArray.join("<br />");
29   } else {
30     if (result.length === 0) {
31       bcLabel.innerHTML = "Decoding failed.";
32     }
33   }
34 });
35 JOB.PostOrientation = true;
36 JOB.OrientationCallback = function(result) {
37   canvas.width = result.width;
38   canvas.height = result.height;
39   var data = context.getImageData(0,0,canvas.width,canvas.height);
40   for (var i = 0; i < data.data.length; i++) {
41     data.data[i] = result.data[i];
42   }
43   context.putImageData(data,0,0);
44 };
45 JOB.SwitchLocalizationFeedback(true);
46 JOB.SetLocalizationCallback(function(result) {
47   context.beginPath();
48   context.lineWidth = "2";
49   context.strokeStyle="red";
50   for (var i = 0; i < result.length; i++) {
51     context.rect(result[i].x,result[i].y,
52                  result[i].width,result[i].height);
53   }
54   context.stroke();
55 });

1 var targetFile = document.getElementById("fileSelecter");

2 var bcImage = document.createElement("img");

3 var bcLabel = document.getElementById("textLabel");

4 var canvas = document.getElementById("picture");

5 var context = canvas.getContext("2d");

7 targetFile.onchange = function (event) {

8 var files = event.target.files;

9 if (files && files.length > 0) {

10 var file = files[0];

11 var URL = window.URL || window.webkitURL;

12 bcImage.onload = function(event) {

13 bcLabel.innerHTML = "";

14 JOB.DecodeImage(bcImage);

15 URL.revokeObjectURL(bcImage.src);

16 };

17 bcImage.src = URL.createObjectURL(file);

18 }

19 };

21 JOB.Init();

22 JOB.SetImageCallback(function(result) {

23 if (result.length > 0) {

24 var tempArray = [];

25 for (var i = 0; i < result.length; i++) {

26 tempArray.push(result[i].Format+" : "+result[i].Value);

27 }

28 bcLabel.innerHTML=tempArray.join("<br />");

29 } else {

30 if (result.length === 0) {

31 bcLabel.innerHTML = "Decoding failed.";

32 }

33 }

34 });

35 JOB.PostOrientation = true;

36 JOB.OrientationCallback = function(result) {

37 canvas.width = result.width;

38 canvas.height = result.height;

39 var data = context.getImageData(0,0,canvas.width,canvas.height);

40 for (var i = 0; i < data.data.length; i++) {

41 data.data[i] = result.data[i];

42 }

43 context.putImageData(data,0,0);

44 };

45 JOB.SwitchLocalizationFeedback(true);

46 JOB.SetLocalizationCallback(function(result) {

47 context.beginPath();

48 context.lineWidth = "2";

49 context.strokeStyle="red";

50 for (var i = 0; i < result.length; i++) {

51 context.rect(result[i].x,result[i].y,

52 result[i].width,result[i].height);

53 }

54 context.stroke();

55 });