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

原创|使用教程|编辑:龚雪|2014-10-23 10:18:58.000|阅读 189 次

概述:本文主要为大家介绍如何在Web应用程序中添加一个条形码图像。

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

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

其结果如图所示:

如何在Web应用程序中添加一个条形码图像?
保存图片

最后,我们可以将图像保存到本地磁盘。

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<<



标签:HTML5JavaActiveX文件传输图像处理

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:慧都控件网

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Aurigma Upload Suite

一款不限大小、不限文件格式的批量图文上传控件套包

Image Uploader Professional

广泛用于网站上传的多功能解决方案,无论社交网站,图片共享服务,在线图片库,还是知识管理系统均可使用。

Image Uploader Express

精湛又实惠的图形及文件上传的多功能解决方案,能为用户提供基本的上传功能合精心设计上传界面。

Image Uploader Premium

最强大的跨平台图形处理及文件上传解决方案,且能在上传前完成图片处理工作。

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat