如何在Web应用程序中添加一个条形码图像？

最新推荐文章于 2024-10-06 11:41:54 发布

界面开发小八哥

最新推荐文章于 2024-10-06 11:41:54 发布

阅读量864

点赞数

本文介绍如何利用ImageCaptureSuite SDK生成条形码，并将其添加到Web应用程序的图像中。涵盖JavaScript编程，二维码生成及图像处理等关键技术。

条形码尤其是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<<