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

在當今的數位時代，實體與虛擬世界的無縫融合已變得越來越重要，以優化各種流程。 這一趨勢的實例之一是將條碼掃描器整合到網路應用程式中。 通過縮小實體產品與線上功能之間的差距，企業和個人都能開啟一個可能性的世界，從輕鬆的庫存管理和增強的用戶體驗到簡化的數據輸入、高效的追蹤系統以及掃描 QR 碼。 此整合不僅增強了在線應用程式的整體功能，還為更互聯和更高效的數位生態系統鋪平了道路。

在本文中，我們將使用IronBarcode將條碼掃描器添加到 Web 應用程式中。 在網路應用程式中加入條碼掃描器後，圖像可以從任何具備相機的裝置掃描並上傳，最大限度地提高數位生態系統的移動性。

如何將條碼掃描器集成到網頁應用程式中

1. 下載 C# IronBarcode 庫。

2. 在 Visual Studio 中建立一個新的 ASP.NET 網頁應用程式專案。

3. 使用 HTML5 和 CSS 設計前端。

4. 撰寫後端方法來接收上傳的 QR Code 並將其轉換為文字。

5. 使用標籤顯示結果。

IronBarcode

IronBarcode 是在技術與便利交會處的強大解決方案，為開發者提供了一個穩健的工具包，能夠順利地將條碼掃描和生成整合到他們的應用程式中。 憑藉其全面的功能和直覺的設計，IronBarcode 讓企業和程序員能夠在其軟體環境中輕鬆地解碼、編碼和操作條碼。 無論是旨在優化庫存管理、促進數據交換還是增強用戶體驗，IronBarcode 開啟了一個可能性的領域，簡化了條碼處理的複雜世界，並使應用程式能夠使用瀏覽器以數位方式與物理世界進行互動。 IronBarcode 支援所有的條碼格式和條碼符號學。

建立條碼掃描網頁應用程式

在本節中，我們將演示如何使用IronBarcode構建一個掃描條碼並顯示結果的網路應用程式。

1. 首先，按照下面的圖片在 Visual Studio 中創建一個新的 ASP.NET 網頁應用程式專案。

   

   

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

   要這樣做，請打開 NuGet Package Manager Console 並運行以下命令，它將在幾秒鐘內安裝 IronBarcode。

    :ProductInstall

您也可以直接從NuGet網站.

3. 安裝完成後，打開 Default.aspx 文件，並用您的前端代碼替換它。 這將創建一個文件上傳按鈕、一個帶有 "Scan Barcode" 文本的按鈕以及一個用於顯示結果的標籤。

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

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<%@ 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>

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

   打開 Default.aspx.cs 檔案，將現有的程式碼替換為以下程式碼。

    using IronBarCode;
    using System;
    using System.IO;

    public partial class _Default : System.Web.UI.Page
    {    
        protected void btnScan_Click(object sender, EventArgs e)
        {
            try
            {
                if (fileUpload.HasFile)
                {
                    Stream stream = fileUpload.PostedFile.InputStream;
                    var barcodeResults = BarcodeReader.Read(stream);

                    lblResult.Text = "Scanned Barcode: " + barcodeResults;
                }
                else
                {
                    lblResult.Text = "Please upload an image.";
                }
            }
            catch (Exception ex)
            {
                lblResult.Text = "Error: " + ex.Message;
            }
        }
    }

    using IronBarCode;
    using System;
    using System.IO;

    public partial class _Default : System.Web.UI.Page
    {    
        protected void btnScan_Click(object sender, EventArgs e)
        {
            try
            {
                if (fileUpload.HasFile)
                {
                    Stream stream = fileUpload.PostedFile.InputStream;
                    var barcodeResults = BarcodeReader.Read(stream);

                    lblResult.Text = "Scanned Barcode: " + barcodeResults;
                }
                else
                {
                    lblResult.Text = "Please upload an image.";
                }
            }
            catch (Exception ex)
            {
                lblResult.Text = "Error: " + ex.Message;
            }
        }
    }

Imports IronBarCode
	Imports System
	Imports System.IO

	Partial Public Class _Default
		Inherits System.Web.UI.Page

		Protected Sub btnScan_Click(ByVal sender As Object, ByVal e As EventArgs)
			Try
				If fileUpload.HasFile Then
					Dim stream As Stream = fileUpload.PostedFile.InputStream
					Dim barcodeResults = BarcodeReader.Read(stream)

					lblResult.Text = "Scanned Barcode: " & barcodeResults
				Else
					lblResult.Text = "Please upload an image."
				End If
			Catch ex As Exception
				lblResult.Text = "Error: " & ex.Message
			End Try
		End Sub
	End Class

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

   

6. 點擊選擇文件按鈕，然後上傳包含 QR 碼的圖片。

   

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

   

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

結論

透過像 IronBarcode 這樣的工具和解決方案將條碼掃描器整合到網頁應用程式中，代表了實體和數位領域的轉型融合，促進了實體產品與線上功能之間的無縫互動。 此整合使企業和個人能夠改善流程，從簡化庫存管理到高效的數據輸入，同時簡化複雜的條碼處理，從而促進一個更互聯和優化的數字生態系統。 本逐步指南提供了一個全面藍圖，用於輕鬆將條碼掃描功能添加到網絡應用中，展示技術的潛力，這有助於革新用戶體驗並重新定義虛擬和物理世界之間的界限。

如需有關如何使用程式碼範例讀取條形碼的詳細教程，請參閱IronBarcode參觀這裡. 要了解如何將 IronBarcode 用於 Blazor 應用程式，請造訪這個链接連結.