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

在當今的數位時代，實體與虛擬世界的無縫融合在優化各種流程方面變得越來越重要。這一趨勢的一個例子是將條碼掃描器集成到網頁應用程式中。通過彌合有形產品和在線功能之間的鴻溝，企業和個人可以開啟一個充滿可能性的領域，從輕鬆的庫存管理、增強的用戶體驗，到簡化的數據輸入、高效的跟踪系統，甚至掃描 QR 碼。這種整合不僅增強了在線應用程式的整體功能，還為更加互聯和高效的數位生態系統鋪平了道路。 IronBarcode 將條碼掃描器添加到 Web 應用程序中。通過在基於 Web 的應用程序中添加條碼掃描器，可以從任何配備攝像頭的設備中掃描和上傳圖像，最大限度地提高數位生態系統的移動性。

如何將條碼掃描器整合到網頁應用程序中

1. 下載C# IronBarcode庫。

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

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

4. 編寫後端方法，將上傳的QR碼轉換為文本。

5. 使用標籤顯示結果。

IronBarcode

IronBarcode 站在技術與便利的交匯點，為開發者提供強大的工具包，讓條碼掃描和生成的整合變得順暢。在其全面的功能和直觀的設計下，IronBarcode 賦予企業和程式設計師輕鬆地在其軟體環境中解碼、編碼和操作條碼的能力。無論是旨在優化庫存管理、促進資料交換，還是提升使用者體驗，IronBarcode 都開啟了一個可能性的領域，簡化了條碼處理的複雜性，並使應用程式能夠透過瀏覽器以數位方式與實體世界互動。IronBarcode 支援所有的條碼格式和條碼符號。

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

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

1. 首先，在 Visual Studio 中建立一個新的 ASP.NET 網頁應用程式專案，如下圖所示。

   

   

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

要這樣做，請打開 NuGet 套件管理器主控台並執行以下命令，它將在幾秒鐘內安裝 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. 現在我們的專案已完成，我們可以執行它並在以下網址打開網頁 "https://localhost:44335/Default".

   

6. 點擊選擇檔案按鈕並上傳包含QR碼的圖片。

   

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

上述是創建具有條碼掃描功能的網頁的所有步驟，您現在可以在線讀取條碼，並且可以使用 IronBarcode 輕鬆地與您的網絡應用程式集成。

結論

透過像IronBarcode這樣的工具和解決方案，將條碼掃描儀整合到網頁應用中，代表了物理與數位領域的變革性融合，使實體產品與線上功能之間的互動變得更無縫。這種整合使企業和個人能夠提升流程，從精簡庫存管理到高效數據輸入，並簡化複雜的條碼處理，從而促進了一個更加互聯和優化的數位生態系統。本指南提供了一個完整的藍圖，說明如何輕鬆地將條碼掃描功能添加到網頁應用中，展示了技術在革命性用戶體驗中的潛力，並重新定義了虛擬和物理世界之間的界限。

如需詳盡教程和代碼示例，說明如何讀取條碼，請參閱 IronBarcode 參觀 這裡. 想了解如何在 Blazor 應用中使用 IronBarcode，請訪問此處 連結.