Barcode Generator with HTML5 WebSocket

Last week, I shared how to transmit an image between a WebSocket server and a Web client. Based on that, we can make a little bit of improvement. Today, I would like to share how to generate barcode on .Net server side and display it on web browser.

websocket barcode

Prerequisites

Remote Barcode Generator

  • In your WinForms project, add DynamicBarcode.dll and set its property Copy to Output Directory as Copy always. As so, the Dynamic .NET TWAIN component is able to automatically load the barcode library.

barcode library

  • Encode the received message, and draw generated barcode onto a background image:
            float scale = 3;
            short sImageIndex = 0;
            dynamicDotNetTwain.MaxImagesInBuffer = 1;
            bool isLoaded = dynamicDotNetTwain.LoadImage("test.png");
            dynamicDotNetTwain.AddBarcode(sImageIndex, Dynamsoft.DotNet.TWAIN.Enums.Barcode.BarcodeFormat.QR_CODE, message, "", 0, 0, scale);
  • Send image width, height and data to web client:
            Image img = dynamicDotNetTwain.GetImage(sImageIndex);

            ImageData imageData = load_image(img);
            session.Send(imageData.Width + "," + imageData.Height);
            session.Send(imageData.Data, 0, imageData.Data.Length);
            imageData = null;
  • Display the barcode image on JavaScript web client:
               ws.onmessage = function (evt) {
                    var data = evt.data;
                    if (!data)
                        return;

                    if (data instanceof ArrayBuffer) {
                        drawImage(evt.data);
                    }
                    else {
                        var len = data.length;
                        var index = data.indexOf(",");
                        var w = data.substring(0, index);
                        var h = data.substring(index + 1, len);
                        imageWidth = parseInt(w);
                        imageHeight = parseInt(h);
                    }
                };

Now, you can have fun with the remote barcode generator via all browsers (Chrome, Firefox, IE etc.) which support HTML5 WebSocket.

Source Code

WebSocketBarcodeGenerator