Windows Phone 7開發技巧【2】——使用ZXing庫實現一維/二維條碼掃描

世界上信息無處不在，條碼就無孔不入。方便快速的生成和讀取條碼信息，已經成為智能手機的基本功能。如何在Window Phone手機應用上實現條碼掃描功能呢？最先想到的可能是首先用攝像頭讀取到條碼圖像、二值化、圖像處理等等，讓人頭大。但是俗話說的好，Don't Reinvent The Wheel，要感謝強大的ZXing庫^[1]，我們可以把精力多放在app本身功能的實現上。ZXing庫實現了眾多的一維/二維條碼的讀取功能，例如常見的EAN-13和QR碼。Zxing支持多種編程語言，有人實現了Silverlight版本^[2]，WP7應用中可以很方便的使用。本文從一個實例入手，介紹一下如何來使用ZXing。

簡單起見，封裝一個頁面Barcode，從任何頁面切換到Barcode頁面，均自動開始條碼讀取，讀取完成后，切換到結果頁面。封裝上[3]其實做的更好些，但是無奈在我的app中使用不便，[3]非常值得參考。

一、引用ZXing

建立WP7BarcodeScannerExample實例工程，從[2]下載SilverlightZxing庫，添加對Silverlight_ZXing_Core.dll的引用。下面一段截取的代碼，可以看出ZXing的使用是比較方便的。

using com.google.zxing;
using com.google.zxing.oned;
using com.google.zxing.qrcode;
using com.google.zxing.common;

namespace WP7BarcodeScannerExample
{
    public partial class BarCode : PhoneApplicationPage
    {
        private Reader _reader = new EAN13Reader();//or QRCodeReader()

        private void ScanPreviewBuffer()
        {

            Result result = _reader.decode(binBitmap);
            if (result != null)
            {
                //讀取成功，結果是result.Text
            }
        }
    }
}

 首先，根據需要讀取的條碼類型，以EAN-13一維條碼為例，初始化一個EAN13Reader，然后對獲取到的圖像binBitmap進行decode，即可得到結果。

 

二、PhotoCamera取景

[4]非常詳細的說明了PhotoCamera的使用方法，這里就不再贅述了。注意wp7模擬器是不支持攝像頭的，所以該實例必須在真機上運行。

 

三、Barcode頁面

主要思路是：使用VideoBrush將PhotoCamera取景顯示出來，按照固定的間隔時間進行對焦並讀取圖片，調用zxing的制定編碼類型的解碼器進行解碼，成功后停止取景和讀取，切換至結果頁面。

Barcode.xaml

<Grid x:Name="LayoutRoot" Background="Transparent">
        <Rectangle HorizontalAlignment="Stretch" Name="frame" Stroke="Black" StrokeThickness="0" VerticalAlignment="Stretch">
            <Rectangle.Fill>
                <VideoBrush x:Name="_videoBrush">
                    <VideoBrush.RelativeTransform>
                        <CompositeTransform  
                            x:Name="_previewTransform" CenterX=".5" CenterY=".5" />
                    </VideoBrush.RelativeTransform>
                </VideoBrush>
            </Rectangle.Fill>
        </Rectangle>
</Grid>

注意VideoBrush，因為PhotoCamera取景默認是橫屏的，需要對其做一下變換。

 

Barcode.xaml.cs:

using System;
using System.IO;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Devices;
using com.google.zxing;
using com.google.zxing.oned;
using com.google.zxing.qrcode;
using com.google.zxing.common;
using System.Windows.Threading;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;

namespace WP7BarcodeScannerExample
{
    public partial class BarCode : PhoneApplicationPage
    {
        private PhotoCamera _photoCamera;
        private PhotoCameraLuminanceSource _luminance;
        private readonly DispatcherTimer _timer;
        //解碼器
        private Reader _reader = null;

        public BarCode()
        {
            InitializeComponent();

            _timer = new DispatcherTimer();
            _timer.Interval = TimeSpan.FromMilliseconds(250);
            //間隔250ms調用讀取函數
            _timer.Tick += (o, arg) => ScanPreviewBuffer();
        }

        protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            string type = "";
            
            if (NavigationContext.QueryString.TryGetValue("type", out type) && type == "qrcode")
            {
                _reader = new QRCodeReader();
            }
            else
            {
                _reader = new EAN13Reader();
            }

            _photoCamera = new PhotoCamera();
            _photoCamera.Initialized += new EventHandler<CameraOperationCompletedEventArgs>(cam_Initialized);
            _videoBrush.SetSource(_photoCamera);
            base.OnNavigatedTo(e);
        }

        protected override void OnNavigatingFrom(System.Windows.Navigation.NavigatingCancelEventArgs e)
        {
            if (_photoCamera != null)
            {
                _timer.Stop();
                _photoCamera.CancelFocus();
                _photoCamera.Dispose();
            }
            
            base.OnNavigatingFrom(e);
        }

        void cam_Initialized(object sender, CameraOperationCompletedEventArgs e)
        {
            int width = Convert.ToInt32(_photoCamera.PreviewResolution.Width);
            int height = Convert.ToInt32(_photoCamera.PreviewResolution.Height);
            _luminance = new PhotoCameraLuminanceSource(width, height);
            
            Dispatcher.BeginInvoke(() =>
            {
                _previewTransform.Rotation = _photoCamera.Orientation;
                _timer.Start();
            });
            _photoCamera.FlashMode = FlashMode.Auto;
            _photoCamera.Focus();
        }

        private void ScanPreviewBuffer()
        {
            try
            {
                _photoCamera.GetPreviewBufferY(_luminance.PreviewBufferY);
                var binarizer = new HybridBinarizer(_luminance);
                var binBitmap = new BinaryBitmap(binarizer);
                Result result = _reader.decode(binBitmap);
                if (result != null)
                {
                    _timer.Stop();
                    Dispatcher.BeginInvoke(() =>
                    {
                        //讀取成功，結果存放在result.Text
                    });
                }
                else 
                {
                    _photoCamera.Focus();
                }
            }
            catch
            {
            }
        }
    }
}

 注意：

1，重點查看ScanPreviewBuffer()函數，調用_reader對二值化后的圖像進行解碼，若result非空，則表示解碼成功，結果存放在result.Text中，可以使用多種方法傳遞到你應用的其他頁面中。

2，Navigate到Barcode頁面時，若不帶querystring參數，則默認使用EAN13Reader進行一維條碼識別。若帶type=qrcode，則使用QRCodeReader進行二維條碼識別。

 

四、體驗

總體上，該實例的條碼掃描過程，速度是比較快的。但是在掃描過程需要反復對焦，在光線等條件不好時，速度相對較慢。為了更好的體驗，條碼掃描過程需要增加一些輔助功能，例如在取景頁面上顯示一個指示框，初始是紅色，讀取成功后變為綠色；讀取成功后，停止取景，獲取當前的一張圖片進行顯示，防止直接切換至結構頁面有些突兀。例子中這些內容實現的不好，僅僅是作為例子，多種可能，由你來完成了。

 

五、實例代碼

實例代碼存放在github，地址：https://github.com/gzb1985/WP7BarcodeScannerExample，歡迎批評指正，真誠希望能對大家有所幫助。

 

六、引用

[1]：ZXing, http://code.google.com/p/zxing/

[2]：Silverlight ZXing，Windows Phone 7 Silverlight ZXing Barcode Scanning Library， http://silverlightzxing.codeplex.com/

[3]：Stephanie Hertrich，WP7 : Real-time video scan a barcode/QR code in your app using ZXing lib，http://blogs.msdn.com/b/stephe/archive/2011/11/07/wp7-real-time-video-scan-a-barcode-qr-code-in-your-app-using-zxing-lib.aspx

[4]：Matt Stroshane，Using Cameras in Your Windows Phone Application，http://msdn.microsoft.com/en-us/magazine/hh708750.aspx

[5]：QR code scanning on Windows Phone 7.5 using ZXlib，http://jonas.follesoe.no/2011/07/22/qr-code-scanning-on-windows-phone-75-using-zxlib/