How to Create a Web Barcode Reader App with PHP and Nginx

Dynamsoft Barcode Reader SDK written in C/C++ is capable of reading a variety of 1D and 2D barcode formats including Code 39, Code 93, Code 128, Codabar, QRCode, DataMatrix, PDF417 and so on. In this post, I’m going to demo how to use the SDK to make a simple Web barcode reader app with PHP and Nginx.

Prerequisites

Step 1: How to Build PHP Custom Extension with Dynamsoft Barcode Reader SDK

To use Dynamsoft Barcode Reader SDK with PHP, we need to create a PHP custom extension – php_dbr.dll. Read the tutorial Making PHP Barcode Extension with Dynamsoft Barcode SDK to build your own PHP barcode extension.

Step 2: How to Configure PHP Environment

Copy php_dbr.dll to %php%\ext.
Copy DynamsoftBarcodeReaderx86.dll to PHP root directory %php%\.
Open %php%\php.ini and add following line:
```
extension=php_dbr.dll
```
Change max file size if you want to upload big image files:
```
upload_max_filesize=20M
```

Step 3: How to Configure Nginx for PHP

Open %nginx%\conf\nginx.conf and add PHP configuration:

location ~ \.php$ {

    root           html;

    fastcgi_pass   127.0.0.1:9000;

    fastcgi_index  index.php;

    fastcgi_param  SCRIPT_FILENAME <Your Web App Folder>/$fastcgi_script_name;

    include        fastcgi_params;

}

When uploading big files, you may see the error nginx 413 Request Entity Too Large. To fix it, change file size in configuration file:

client_max_body_size 50M;

Step 4: How to Implement Web Barcode App in PHP on Windows

Create a page index.php.

<!DOCTYPE html>
<html>
<head>
  <title>Dynamsoft PHP Barcode Reader</title>
  <script src="jquery-1.11.3.min.js"></script>
  <script src="tiff.min.js"></script>
</head>
<body>
<H1>Dynamsoft PHP Barcode Reader</H1>
<form action="dbr.php" method="post" enctype="multipart/form-data">
    Select barcode image:
    <input type="file" name="readBarcode" id="readBarcode" accept="image/*"><br>
    <input type="submit" value="Read Barcode" name="submit">
</form>
<div id="tiff"></div>
<div id='image'></div>
<script>
      function reset() {
        $("#image").empty();
        $("#tiff").empty();
      }
			var input = document.querySelector('input[type=file]');
			input.onchange = function() {
        reset();
				var file = input.files[0];
				var fileReader = new FileReader();
        // get file extension
        var extension = file.name.split('.').pop().toLowerCase();
        var isTiff = false;
        if (extension == "tif" || extension == "tiff") {
          isTiff = true;
        }
				fileReader.onload = function(e) {
          if (isTiff) {
            console.debug("Parsing TIFF image...");
            //initialize with 100MB for large files
            Tiff.initialize({
              TOTAL_MEMORY: 100000000
            });
            var tiff = new Tiff({
              buffer: e.target.result
            });
            var tiffCanvas = tiff.toCanvas();
            $(tiffCanvas).css({
              "max-width": "800px",
              "width": "100%",
              "height": "auto",
              "display": "block",
              "padding-top": "10px"
            }).addClass("TiffPreview");
            $("#tiff").append(tiffCanvas);
          }
          else {
            var dataURL = e.target.result, img = new Image();
            img.src = dataURL;
            $("#image").append(img);
          }
				}
        if (isTiff) {
            fileReader.readAsArrayBuffer(file);
        }
        else
				    fileReader.readAsDataURL(file);
			}
</script>

</body>
</html>

Because Dynamsoft Barcode Reader supports TIFF image format, in order to load TIFF in HTML5, we can use the tiff js library.

Create dbr.php for reading uploaded barcode images.

<?php
// create absolute file path
function file_build_path(...$segments) {
    return join(DIRECTORY_SEPARATOR, $segments);
}
$file = basename($_FILES["readBarcode"]["name"]);
echo "<p>$file</p>";
if ($file != NULL && $file != "") {
  // get current working directory
  $root = getcwd();
  // tmp dir for receiving uploaded barcode images
  $tmpDir = "uploads/";
  if (!file_exists($tmpDir)) {
    mkdir($tmpDir);
  }
  $target_file = $tmpDir . basename($_FILES["readBarcode"]["name"]);
  $isSuccessful = true;
  $fileType = pathinfo($target_file,PATHINFO_EXTENSION);
  if (!$isSuccessful) {
      echo "Fail to read barcode";
  } else {
      if (move_uploaded_file($_FILES["readBarcode"]["tmp_name"], $target_file)) {
        // dynamsoft barcode reader
        $path = file_build_path($root, $target_file);
        /*
         * Description:
         * array DecodeBarcodeFile( string $filename , bool $isNativeOutput [, bool $isLogOn ] )
         *
         * Return Values:
         * If barcode detected, $array[0] is an array.
         */
        $resultArray = DecodeBarcodeFile($path, false);
        if (is_array($resultArray[0])) {
        	$resultCount = count($resultArray);
        	echo "Total count: $resultCount\n";
        	for($i = 0; $i < $resultCount ; $i++) {
        		$result = $resultArray[$i];
                	echo "<p>Barcode format: $result[0], value: $result[1]</p>";
        	}
        }
        else {
          echo "<p>$resultArray[0]</p>";
        }
        // delete the uploaded barcode image
        unlink($path);
      } else {
          echo "Fail to read barcode.";
      }
  }
}
?>

Run php-cgi:

%php%\php-cgi.exe -b 127.0.0.1:9000 -c %php%\php.ini

Run Nginx:

%nginx%\nginx.exe

Visit localhost:8080/index.php:

Source Code

https://github.com/dynamsoftsamples/php-barcode-reader