如何將條碼掃描器整合到 Web 應用程式中

建立條碼掃描 Web 應用程式

在本節中，我們將示範如何使用 IronBarcode 建立一個可以掃描條碼並顯示結果的 Web 應用程式。

1. 首先在 Visual Studio 中建立一個新的 ASP.NET Web 應用程式項目，如下圖所示。

   如何將條碼掃描器整合到 Web 應用程式中：圖 1

   如何將條碼掃描器整合到 Web 應用程式中：圖 2

2. 使用 NuGet 套件管理器控制台安裝 IronBarcode。

   為此，請開啟 NuGet 套件管理器控制台並執行以下命令來安裝 IronBarcode：

   Install-Package BarCode

   您也可以直接從NuGet 網站下載該軟體包。

3. 安裝完成後，開啟Default.aspx檔案並將其替換為您的前端程式碼。 這將創建一個文件上傳按鈕、一個帶有文字"掃描條碼"的按鈕和一個顯示結果的標籤。

   <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication6._Default" %>
   
   <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
       <div><br /><br /><br />
           <asp:FileUpload ID="fileUpload" runat="server" />
           <br />
           <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" />
           <br />
           <asp:Label ID="lblResult" runat="server"></asp:Label>
       </div>
   </asp:Content>

   <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication6._Default" %>
   
   <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
       <div><br /><br /><br />
           <asp:FileUpload ID="fileUpload" runat="server" />
           <br />
           <asp:Button ID="btnScan" runat="server" Text="Scan Barcode" OnClick="btnScan_Click" />
           <br />
           <asp:Label ID="lblResult" runat="server"></asp:Label>
       </div>
   </asp:Content>

   HTML

4. 現在我們將編寫後端程式碼，該程式碼將接收上傳的圖像，掃描圖像中的二維碼或條碼，並顯示結果。

   開啟Default.aspx.cs文件，並將現有程式碼替換為以下程式碼：

   using IronBarCode;
   using System;
   using System.IO;
   
   public partial class _Default : System.Web.UI.Page
   {
       // Event handler for the 'Scan Barcode' button click
       protected void btnScan_Click(object sender, EventArgs e)
       {
           try
           {
               // Ensure a file has been uploaded
               if (fileUpload.HasFile)
               {
                   // Get the uploaded file stream
                   Stream stream = fileUpload.PostedFile.InputStream;
   
                   // Use IronBarcode to read the barcode from the stream
                   var barcodeResults = BarcodeReader.Read(stream);
   
                   // Display the scanned barcode result
                   lblResult.Text = "Scanned Barcode: " + barcodeResults;
               }
               else
               {
                   lblResult.Text = "Please upload an image.";
               }
           }
           catch (Exception ex)
           {
               // Display any errors that occur during the scanning process
               lblResult.Text = "Error: " + ex.Message;
           }
       }
   }

   using IronBarCode;
   using System;
   using System.IO;
   
   public partial class _Default : System.Web.UI.Page
   {
       // Event handler for the 'Scan Barcode' button click
       protected void btnScan_Click(object sender, EventArgs e)
       {
           try
           {
               // Ensure a file has been uploaded
               if (fileUpload.HasFile)
               {
                   // Get the uploaded file stream
                   Stream stream = fileUpload.PostedFile.InputStream;
   
                   // Use IronBarcode to read the barcode from the stream
                   var barcodeResults = BarcodeReader.Read(stream);
   
                   // Display the scanned barcode result
                   lblResult.Text = "Scanned Barcode: " + barcodeResults;
               }
               else
               {
                   lblResult.Text = "Please upload an image.";
               }
           }
           catch (Exception ex)
           {
               // Display any errors that occur during the scanning process
               lblResult.Text = "Error: " + ex.Message;
           }
       }
   }

   $vbLabelText   $csharpLabel

5. 現在我們的專案已經完成，我們可以執行它，並在以下 URL 開啟網頁" https://localhost:44335/Default "。

   如何將條碼掃描器整合到 Web 應用程式中：圖 3

6. 點選"選擇檔案"按鈕，上傳包含二維碼的圖片。

   如何將條碼掃描器整合到 Web 應用程式中：圖 4

7. 最後，點選"掃描條碼"按鈕； 按鈕下方將顯示輸出結果。

   如何將條碼掃描器整合到 Web 應用程式中：圖 5

以上是建立具有條碼掃描功能的網頁的所有步驟。 現在您可以在線上讀取條碼，並且使用 IronBarcode 可以輕鬆地將其整合到您的 Web 應用程式中。