How to Add a Barcode to an Image in a Web Application

Introduction

Barcodes, especially QR codes, are widely used in modern society. Nowadays, when you go to a shopping mall, you can see many stores promoting commodities with QR codes. In this article, we will illustrate how to generate a barcode and add it to an image conveniently in a web application.

For anyone who wants to learn how to read barcodes, please refer to our previous article – how to read barcodes from an image in a web app.

Background

Here we use ImageCapture Suite which comes with a barcode processing SDK. ImageCapture Suite is a browser-based SDK for image acquisition, processing and secure uploading/downloading in web apps. In the latest version of ImageCapture Suite, we added a new feature in the barcode library – creating barcodes and add them to images online. We hope the new feature will help facilitate developers in developing document management solutions.

Coding Instruction

Prerequisites

  • JavaScript is the preferred programming language.
  • Familiar with developers’guide of ImageCapture Suite.

Load an Image

The first step is to load an image. We can implement this by using the following code.

Create a canvas for image display

<div id="dwtcontrolContainer"></div>

Initialization

<!--include the necessary js file-->
<script src="scripts/dynamsoft.imagecapturesuite.initiate.js"></script>
<script type="text/javascript" language="javascript"> 
var gImageCapture; 
var _imageCaptureParam = { 
 'productKey': '',
 'containerID': 'dwtcontrolContainer',
 'width': 440, 
 'height': 600 
}; 

(function() { 
 gImageCapture = new Dynamsoft.ImageCapture(_imageCaptureParam);
})();
</script>

Add a button and relevant event

<input type="button" value="Load Image" onclick ="loadImage();"/>
<script type="text/javascript" language="javascript"> 
function loadImage() { 
var DWObject = gImageCapture.getInstance(); 
if(DWObject) { 
DWObject.IfShowFileDialog = true;
    DWObject.LoadImageEx("", 5); // LoadImageEx(String FileName, Long ImageType)
} 
} 
</script>

Generate a Barcode & Add it to the Image

The barcode formats for encoding include AZTEC, CODABAR, CODE 39, CODE 93, CODE 128, DATAMATRIX, MAXICODE, PDF417, and QR CODE. Here we show the demo using QR CODE. The parameters used for barcode writer include:

  1. Barcode Format: “QR_Code”
  2. Barcode Content: “Dynamsoft”
  3. Barcode Content Location: x = 100, y = 100
  4. Scale: 10
function J_AddBarcoding() {
var barcodeVerStr = DWObject.BarcodeVersion;
// check the barcode library version.
    if (!barcodeVerStr || barcodeVerStr != _strBarcodeVersion) {
        if (location.hostname != "") {
            var strHostIP = location.hostname;
            DWObject.HTTPPort = location.port == "" ? 80 : location.port;
            var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII	
            var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
            var strBarcodepath = CurrentPath + "Resources/barcode.zip";
            DWObject.HTTPDownloadResource(strHostIP, strBarcodepath, "barcode.zip");
        }
    }

    var barcodeformat;
    barcodeformat = document.getElementById("ddl_AddbarcodeFormat").value;

    var barcodeContent;
    barcodeContent = document.getElementById("txtBarcodeContent").value;

    var humanReadableText;
    humanReadableText = document.getElementById("txtHumanReadableText").value;

    var locationX;
    locationX = document.getElementById("txtLocationX").value;   

    var locationY;
    locationY = document.getElementById("txtLocationY").value;

    var scale;
    scale = document.getElementById("txtScale").value;

    DWObject.AddBarcode(DWObject.CurrentImageIndexInBuffer, barcodeformat, barcodeContent, humanReadableText, locationX, locationY, scale); // encode the content as QR code, and add it to the buffered image

    //DWObject.  Barcoding Call XActive.
    J_SetBtnProcessingAndText("btnAddBarcode", false, "Add Barcode");
}

The result is shown in the figure.

barcode result

Save the Image

Finally, we can save the image to the local disk.

function btnSave_onclick() {
    if (!checkIfImagesInBuffer()) {
        return;
    }
    var i, strimgType_save;
var NM_imgType_save = document.getElementsByName("imgType_save");
// find the selected image format 
    for (i = 0; i < 5; i++) {
        if (NM_imgType_save.item(i).checked == true) {
            strimgType_save = NM_imgType_save.item(i).value;
            break;
        }
    }
    DWObject.IfShowFileDialog = true;
    _txtFileNameforSave.className = "";
    var bSave = false;
    if (!strre.test(_txtFileNameforSave.value)) {
        _txtFileNameforSave.className += " invalid";
        _txtFileNameforSave.focus();
        appendMessage("Please input <b>file name</b>.<br />Currently only English names are allowed.<br />");
        return;

Run or deploy the application on web server

The complete source code can be downloaded from the article.

There is a “Scripts\ProductKey.js” file with a temporary trial product key. If you get license error when running the sample, you can download ImageCapture Suite from Dynamsoft’s website to get a valid trial license. ImageCapture Suite 30-Day Free Trial Download

To test barcode reading from different client machines, you can simply copy the sample code with ImageCapture Suite to your web server (IIS, Apache or Tomcat). Users only need to download and install the ActiveX/Plugin in the browser on their first visit to the web page. More details on how to deploy ImageCapture Suite

The online demo is also available for your reference.

ImageCapture Suite Barcode Online Demo

Support

Is your organization currently undergoing a document management project? Have you deployed Dynamsoft’s SDK? If so, how has it helped? Let us know in the comments section or by contacting us. You can also contact us if you need any help to get this sample code up and running. To do so, reach us by email at support@dynamsoft.com. For pricing or licensing questions, call us at 1-877-605-5491 or email our sales team at sales@dynamsoft.com.

 

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com