How to Dockerize PHP Barcode Reader on Ubuntu

When using PHP native extensions, you have to carefully match the right PHP version. Otherwise, it may cause a compatibility issue. In addition, the web server deployment of a PHP project with customized extensions is complicated as well. A proper solution for quickly experiencing a PHP project is to use Docker. In this article, I will demonstrate how to Dockerize the PHP barcode reader project built with Dynamsoft Barcode Reader SDK for Linux.

Read more

How to Build PHP Barcode Reader on Linux

No matter whether you are a web developer or an end-user, you probably have heard of the terms SaaS, Paas, and IaaS. They are three different models of cloud service. Why more and more people tend to embrace web and cloud services such as Google Cloud, Azure, and AWS? Because no application download and installation needed. A variety of software and functions can be accessed via web browsers. Assuming you want to build a web barcode reader as a service from scratch. Using Dynamsoft Barcode Reader SDK will expedite your development.

Read more

How to Make PHP Barcode Reader on Linux

When developing a web barcode reader app in PHP, you can either use some JavaScript barcode libraries to recognize barcode images on client-side or read the barcode images on server-side with some PHP extensions that capable of reading 1D and 2D barcode. In this post, I will demonstrate how to create a PHP barcode reader with DBR (Dynamsoft Barcode Reader for Linux) on Ubuntu 14.04.

Read more

How to Make PHP Barcode Reader with Windows COM Object

Dynamsoft Barcode Reader for Windows includes dynamic-link libraries for C/C++, DotNET and COM. If you want to use high-level programming languages such as Python, PHP, Java, Ruby and so on to create barcode reader apps with Dynamsoft Barcode Reader, you could either make a C/C++ wrapper as an extension or use COM objects. To create a PHP extension on Windows, you can refer to the sample code on Dynamsoft GitHub repository. Nevertheless, when making PHP extension, many developers suffered from the issue of PHP version number mismatch. Therefore, using COM in PHP seems to be more convenient.

Read more

Making PHP Barcode Extension with Dynamsoft Barcode SDK

After writing articles talking about how to wrap Dynamsoft Barcode SDK to make Barcode extensions for Java, Python and JavaScript, I started to consider PHP. It is one of the most popular tags on StackOverflow. Most Web developers prefer using PHP for server-side development. Since PHP allows developers to write extensions in C/C++, I was going to create a PHP Barcode extension with Dynamsoft Barcode Reader SDK. However, the whole process was not as easy as I expected. In this post, I’d like to share what troubles I’ve got and what solutions I’ve found.

Read more

How to Upload HTML Canvas Data to PHP Server

Last time, I shared my experience about how to use JavaScript saving HTML canvas data to local disk in Chrome. In this tutorial, I would like to share how to save HTML canvas data to remote service with JavaScript and PHP.

Dynamsoft Barcode Reader SDK
Ads Powered by Dynamsoft

Uploading canvas data is a little bit complicated comparing to file upload. If you want to learn how to upload a file, you can read the tutorial PHP File Upload.

Let’s get started to create a project, which includes two files upload.html and upload_data.php. In addition, you need to create a folder upload for receiving files.

upload.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Upload Canvas Data to PHP Server</title>
	</head>
	<body>
		<h1>Upload Canvas Data to PHP Server</h1>
		<canvas width="80" height="80" id="canvas">canvas</canvas>
		<script type="text/javascript">
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var context = canvas.getContext("2d");
				context.rect(0, 0, 80, 80);
				context.fillStyle = 'yellow';
				context.fill();
			}
		</script>

		<div>
			<input type="button" onclick="uploadEx()" value="Upload" />
		</div>

		<form method="post" accept-charset="utf-8" name="form1">
			<input name="hidden_data" id='hidden_data' type="hidden"/>
		</form>

		<script>
			function uploadEx() {
				var canvas = document.getElementById("canvas");
				var dataURL = canvas.toDataURL("image/png");
				document.getElementById('hidden_data').value = dataURL;
				var fd = new FormData(document.forms["form1"]);

				var xhr = new XMLHttpRequest();
				xhr.open('POST', 'upload_data.php', true);

				xhr.upload.onprogress = function(e) {
					if (e.lengthComputable) {
						var percentComplete = (e.loaded / e.total) * 100;
						console.log(percentComplete + '% uploaded');
						alert('Succesfully uploaded');
					}
				};

				xhr.onload = function() {

				};
				xhr.send(fd);
			};
		</script>
	</body>
</html>
  • Create a canvas tag, and draw a rectangle on canvas when the whole page has been loaded.
  • Create a button for triggering uploading event.
  • Create a form with a hidden input tag, which is used to save the data URL.
  • Use XMLHttpRequest to asynchronously upload form data to PHP service.

upload_data.php:

<?php
$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

Now deploy the whole project to a web server, such as nginx, Apache and so forth. Visit localhost:port/upload.html, click the button, and open the file folder to check whether the image is there.

Anything unclear? Please feel free to contact me at {desmond at Dynamsoft dot com}.

Take a Photo and Upload it on Mobile Phones with HTML5

In my daily life, I enjoy taking photos with my smartphone and uploading them to various websites. So I started thinking, “Is it possible to implement these functions in a web browser?” Although Dynamsoft ImageCapture Suite allows us to capture images from a webcam, it is designed for a desktop App development on windows and Mac, not for mobile platforms. Fortunately, the new HTML5 SDK is capable of uploading local images or captured images to web servers. Everything becomes easier if we have a mobile web browser, like Chrome, which is fully compatible with HTML5.

Read more