Barcode Professional for ASP.NET使用教程：如何在HTML支持的DPI范围内显示高清条码

Posted on 2015-11-09 16:51  Rforyou  阅读(898)  评论(1)  编辑  收藏  举报

我们知道高质量的条码更能达到我们的目的，然而图像DPI与图像的大小成正比，即DPI越高，图片文件越大。

barcode

可能你将600DPI的图片显示在HTML上很容易，然而你会发现图片占满了整个页面，因为大多数的HTML显示分辨率为96DPI。那么今天将分享用Barcode Professional for ASP.NET在HTML支持的DPI范围内显示高清条码。代码仅供参考。

注意：我们使用的是Visual Studio 2005 (Visual Web Developer) ，不过有些VS.NET也可以使用。

步骤：

  • 用Visual Studio 2005创建一个ASP.NET Web项目。
  • 删除项目中创建的所有的ASPX 文件。
  • 如果有需要可以创建一个BIN文件夹，添加一个引用到Barcode Professional for ASP.NET集合。
  • 在Generic Handler 中添加一个新的项目类型命名BarcodeGen.ashx.
  • 在BarcodeGen.ashx文件中用ProcessRequest方法输入下列代码，这个方法将通过字符串查询得到128码符号编码值和输出条码图像分辨率。

VB

 1 Dim dpi As Single = 96.0
 2  
 3  Try
 4  dpi = Single.Parse(context.Request.QueryString("dpi"))
 5  Catch
 6  
 7  End Try
 8  
 9  Dim valueToEncode As String = context.Request.QueryString("valueToEncode")
10  
11  Dim bcp As New Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional()
12  bcp.Symbology = Neodynamic.WebControls.BarcodeProfessional.Symbology.Code128
13  bcp.Code = valueToEncode
14  
15  bcp.BarWidth = 0.01F
16 bcp.BarHeight = 0.5F
17 context.Response.ContentType = "image/jpeg"
18  context.Response.BinaryWrite(bcp.GetBarcodeImage(System.Drawing.Imaging.ImageFormat.Jpeg, dpi))

 

C#

 1 float dpi = 96.0f;
 2  
 3  try
 4  {
 5  dpi = float.Parse(context.Request.QueryString["dpi"]);
 6  }
 7  catch
 8  { }
 9  
10  string valueToEncode = context.Request.QueryString["valueToEncode"];
11  
12  Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional bcp = new Neodynamic.WebControls.BarcodeProfessional.BarcodeProfessional();
13  bcp.Symbology = Neodynamic.WebControls.BarcodeProfessional.Symbology.Code128;
14  bcp.Code = valueToEncode;
15  
16  bcp.BarWidth = 0.01f;
17  bcp.BarHeight = 0.5f;
18  
19  context.Response.ContentType = "image/jpeg";
20 context.Response.BinaryWrite(bcp.GetBarcodeImage(System.Drawing.Imaging.ImageFormat.Jpeg, dpi));

 

  • 然后将新项目添加到HTML页面项目，这个HTML页面将显示600DPI的条码图像，这是通过用JS代码在其他浏览器上显示96DPI的HTTP处理。输如下面的代码：
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml" >
 3  <head>
 4  <title>HTML Barcode image with DPI support</title>
 5  <script type="text/javascript"> 
 6  var imageUrlGen = "BarcodeGen.ashx";
 7  var imageID = "MyBarcodeImage";
 8  var txtValueToEncodeID = "MyValueToEncode"; 
 9  var tmpImage;
10  var dpi = 600;
11  
12  function CheckForLoadedImage()
13  {
14  if(tmpImage.complete)
15  {
16  var img = document.getElementById(imageID); 
17  img.width = tmpImage.width * 96 / dpi;
18  img.height = tmpImage.height * 96 / dpi; 
19  img.src = tmpImage.src; 
20  clearTimeout("CheckForLoadedImage()");
21  }
22  else
23  {
24  setTimeout（“checkforloadedimage()”，500）；
25  } 
26  }
27  
28  function GetBarcodeImage()
29  {
30  var valueToEncode = document.getElementById(txtValueToEncodeID).value; 
31  tmpImage = new Image();
32  tmpImage.src = imageUrlGen + "?valueToEncode="  + valueToEncode + "&dpi=" + dpi; 
33  CheckForLoadedImage();
34  } 
35  </script>
36  </head>
37  <body>
38  <p>
39  <b>Barcode Professional in a HTML page with DPI support</b>
40  </p>
41  <p>
42  <img id="MyBarcodeImage" alt="" src="" />
43  </p>
44  <p>
45  Enter a value to encode:<br />
46  <input id="MyValueToEncode" type="text" name="MyValueToEncode" />
47  </p>
48  <p>
49  <input id="Button1" type="button" value="Get Barcode at 600 DPI..."
50  name="Button1" onclick="GetBarcodeImage()" />
51  </p>
52  </body>
53 </html>

 

完成，虽然图像的大小是经过JS代码生成的，但生成图像的质量是与打印结果一致。