Display captured Jpeg File

Question

I'm able to save the captured image from a barcode scanner using this code:

        Microsoft.Win32.SaveFileDialog dlg = new Microsoft.Win32.SaveFileDialog();
        dlg.DefaultExt = ".jpg";
        dlg.Filter = "JPEG Images (.jpg)|*.jpg|All files (*.*)|*.*";
        if (dlg.ShowDialog() == true)
        {
            using (FileStream file = File.OpenWrite(dlg.FileName))
            {
                file.Write(e.ImageBuffer, 0, e.ImageSize);
            }
        }

However, I would like to display the captured image using WPF but I get a distorted image.

private void _barcodeScannerInstance_SavePhotoEvent(object sender, ImageEventArgs e)
    {   
        SetBitmap(e.ImageBuffer, 350, 263, 96);

    }


 private void SetBitmap(byte[] image, int width, int height, int dpi)
      {
        MainWindow.Instance.Dispatcher.Invoke(DispatcherPriority.Normal, (ThreadStart)delegate()
        {
            BitmapSource bitmapSource = BitmapSource.Create(
            width, height, (double)dpi, (double)dpi, PixelFormats.Bgr24, null, image, ((width * 24 + 31) & ~31) >> 3);                

            HwModeScreen.BarcodeImageCanvas.Children.Clear();
            Image myImage = new Image();
            myImage.Width = HwModeScreen.BarcodeImageCanvas.ActualWidth;
            myImage.Height = HwModeScreen.BarcodeImageCanvas.ActualHeight;
            myImage.Stretch = Stretch.Fill;
            myImage.Source = bitmapSource;
            HwModeScreen.BarcodeImageCanvas.Children.Add(myImage);
        });

Here is the image I see. It should be a black and white picture of a kleenex box.

Here is the saved jpg file:

Answer 1

this is likely distorting it

myImage.Stretch = Stretch.Fill;

Answer 2

did you mix up width and height? are you sure your dpi value is correct?

I suspect the whole problem is this line:

        BitmapSource bitmapSource = BitmapSource.Create(
        width, height, (double)dpi, (double)dpi, PixelFormats.Bgr24, null, image, ((width * 24 + 31) & ~31) >> 3)

What I would do to debug the issue is to write out the image to file and confirm all the inputs. Use photoshop, paint.net, file properties... Are you sure you are working with bitmap format? Are you sure you are working with 24bits per pixel? Are you sure you have height and width correct, and you are feeding the values into the correct argument

What is this line all about, and why are you doing it? I am slightly suspicious. ((width * 24 + 31) & ~31) >> 3)

Basically, the way I look at this is that you are feeding the bitmap library a stream of bits... it doesn't know what the bits are but it will attempt to create the image from the information you give it: bits per pixel, size, etc. If you give it incorrect information, it will create a corrupted image as you have shown.

I am slightly suspicious that the problem is not with width and height; even if you mix those two values up-- I think you would get at least part of the first row of pixels to be rendered correctly. I see static / noise / snow, which tells me that there is something about the way the stream of bits was interpreted-- it is rendered as random blacks and whites.

Another thing: in your screen cap, I see color. this is another hint that there is something incorrect about your assumptions about the image. The values should probably 1 to 256 ( 8 bits per pixel I think? ) I would try creating a 8 bit per pixel black and white bitmap. Somehow the library thinks this is a color image.

I just noticed that you are assuming jpeg. jpeg is a lossy format-- I would have assumed that you would end up with a bitmap or tiff image. double check that you are indeed getting back a jpeg image (check the barcode api documentation)

Answer 3

The JPEG compression algorithm is quite unsuitable for the kind of image you are capturing. It works well for photos, it behaves poorly on images containing fine lines. The slight artifacts the compression produces makes it a lot harder to properly scan the barcode.

You don't see the Kleenex box because you are writing the raw image bytes. You need to use an image encoder. I recommend you use the PngBitmapEncoder class. GifBitmapEncoder should work too since you don't need a lot of colors, it makes smaller files. A code snippet that shows how to use an encoder is available here.

Answer 4

I used a jpeg decoder to fix the problem.

  private void SetBitmap(byte[] image, int width, int height, int dpi)
  {
    MainWindow.Instance.Dispatcher.Invoke(DispatcherPriority.Normal, (ThreadStart)delegate()
    {
        BMemoryStream ms = new MemoryStream(image);
        JpegBitmapDecoder decoder = new JpegBitmapDecoder(ms, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
        BitmapSource bitmapSource = decoder.Frames[0];               

        HwModeScreen.BarcodeImageCanvas.Children.Clear();
        Image myImage = new Image();
        myImage.Width = HwModeScreen.BarcodeImageCanvas.ActualWidth;
        myImage.Height = HwModeScreen.BarcodeImageCanvas.ActualHeight;
        myImage.Stretch = Stretch.Fill;
        myImage.Source = bitmapSource;
        HwModeScreen.BarcodeImageCanvas.Children.Add(myImage);
    });