條形碼尤其是QR碼，廣泛應用于現代社會當中。如今當你去購物中心時，你可以看到許多商店為了達到促銷的目的都使用二維碼。在本文中，我們將說明如何生成一個條形碼,并將它添加到一個web應用程序中。

在這里，我們使用Image Capture Suite，它是一個條形碼處理的SDK。 Image Capture Suite是一個基于瀏覽器的SDK進行圖像采集，處理和安全的上傳/下載的網絡應用程序。在Image Capture Suite的最新版本中，我們增加了一個新功能，在條形碼庫創建條碼并將其添加到在線圖像當中。

編碼指令

先決條件

• JavaScript是首選的編程語言
• ImageCapture Suite.

加載圖像

第一步驟是要加載的圖像，我們可以通過使用下面的代碼實現這一點。

創建圖像的畫布顯示

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

初始化

1 <!--include the necessary js file-->

2 <script src="scripts/dynamsoft.imagecapturesuite.initiate.js"></script>

3 <script type="text/javascript" language="javascript">

4 var gImageCapture;

5 var _imageCaptureParam = {

6 'productKey': '',

7  'containerID': 'dwtcontrolContainer',

8 'width': 440,

9 'height': 600

10 };

11

12 (function() {

13  gImageCapture = new Dynamsoft.ImageCapture(_imageCaptureParam);

14 })();

15 </script>

添加一個按鈕和相關事件

1 <input type="button" value="Load Image" onclick ="loadImage();"/>

2 <script type="text/javascript" language="javascript">

3 function loadImage() {

4 var DWObject = gImageCapture.getInstance();

5 if(DWObject) {

6 DWObject.IfShowFileDialog = true;

7 DWObject.LoadImageEx("", 5); // LoadImageEx(String FileName, Long ImageType)

8 }

9 }

10 </script>

生成一個條形碼并將它添加到圖像

條形碼格式編碼包括 AZTEC, CODABAR, CODE 39, CODE 93, CODE 128, DATAMATRIX, MAXICODE, PDF417, QR CODE。在這里，我們將展示使用QR碼的演示。寫入條形碼的參數包括：

• 條碼格式："QR_Code"
• 條碼內容："Dynamsoft"
• 條碼內容位置：X=100，Y =100
• 規模：10

1 function J_AddBarcoding() {

2 var barcodeVerStr = DWObject.BarcodeVersion;

3 // check the barcode library version.

4 if (!barcodeVerStr || barcodeVerStr != _strBarcodeVersion) {

5  if (location.hostname != "") {

6 var strHostIP = location.hostname;

7 DWObject.HTTPPort = location.port == "" ? 80 : location.port;

8 var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII  

9  var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);

10 var strBarcodepath = CurrentPath + "Resources/barcode.zip";

11  DWObject.HTTPDownloadResource(strHostIP, strBarcodepath, "barcode.zip");

12 }

13 }

14

15 var barcodeformat;

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

17

18 var barcodeContent;

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

20

21 var humanReadableText;

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

23

24  var locationX;

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

26

27 var locationY;

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

29

30 var scale;

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

32

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

34

35 //DWObject.  Barcoding Call XActive.

36 J_SetBtnProcessingAndText("btnAddBarcode", false, "Add Barcode");

37 }

其結果如圖所示：

保存圖片

最后，我們可以將圖像保存到本地磁盤。

1 function btnSave_onclick() {

2 if (!checkIfImagesInBuffer()) {

3 return;

4 }

5 var i, strimgType_save;

6 var NM_imgType_save = document.getElementsByName("imgType_save");

7 // find the selected image format

8 for (i = 0; i < 5; i++) {

9 if (NM_imgType_save.item(i).checked == true) {

10 strimgType_save = NM_imgType_save.item(i).value;

11 break;

12 }

13 }

14 DWObject.IfShowFileDialog = true;

15 _txtFileNameforSave.className = "";

16 var bSave = false;

17 if (!strre.test(_txtFileNameforSave.value)) {

18 _txtFileNameforSave.className += " invalid";

19 _txtFileNameforSave.focus();

20 appendMessage("Please input <b>file name</b>.<br />Currently only English names are allowed.<br />");

21 return;

>>點擊這里下載最新版本ImageCapture Suite<<