Image To JPG

<< Back to the EasyImage Toolkit page

Tutorial - Image To JPG

What you will learn

This tutorial shows:

  • how you can use the JPG clas to transform a source image into a compressed JPG image
  • how the quality value of the JPG compressor can be set, and how it affects image quality and size
  • how to turn that JPG image into a byte array
  • Note: you can implement a simple video conferencing system by sending the JPG byte array across the network (not shown)

In the above picture,

  • the Original image is what the camera is capturing
  • the JPG image is a frame that is JPG compressed at the quality level shown
  • the person can interactively change the JPG quality, and immediately see how it affects the image quality and size

Still to be done:

  • show how the JPG image can be saved in a file
  • show the size of the original image

Download

While we recommend you create this program from scratch, you can also download the source and executables.

Source and Executables of this and other examples: EasyImagesExamples.zip
  • Unzip all files into a single folder.
  • Try the executable; a shortcut is in the top-level directory, or look in the debug directory
  • You will need a web camera attached to your computer.

Step 1. Preconditions

Including EasyImages in your new Visual Studio 2005 C# project. This was described in Minimal Camera Example. Make sure to include the using EasyImages; line in your project.

Step 2. Creating GUI controls

Add the following GUI controls to your form window. Thei locations and purpose should be obvious if you check the image at the top of this page.

  • 2 PictureBoxes ''will display the original and jpg images
    • Name = pbOriginal, pbJPEG
    • Size = 320,240 (the Width and Height of the frame we will put in it)
  • 3 Labels
    • Name = lbloriginal, lblJPEG, lblJPEGQuality
    • Text = Original image, JPEG image, and Quality:
  • TrackBar ''interactively change the JPG quality level
    • Name = tbThreshold
    • Minimum = 0
    • Maximum = 765

Step 3. Writing the program

The complete program is listed below.

using System;
using System.Drawing;
using System.Windows.Forms;
using EasyImages;
// Author: Saul Greenberg, University of Calgary, http://www.cpsc.ucalgary.ca/~saul 
// Copyright: (c) June 7, 2007.
// Documentation: see http://grouplab.cpsc.ucalgary.ca/cookbook/ and select EasyImages.
// The API Documentation and a tutorial explaining this and other programs are available there
// License: See License details included in the distribution package. Essentialy, permission to
// use and/or alter this program for non-commerical and/or educational purposes is granted,
// as long as attribution to the above author is maintained.
namespace ImageToJPG
{
  public partial class Form1 : Form
  {
    EasyImages.CameraClient camera;
    private delegate void SetPictureBoxImage(PictureBox pbox, Bitmap image);
    byte[] b;

    public Form1()
    {
      InitializeComponent();
    }

    //As the GUI is loaded, create a new camera object and set its initial properties
    private void Form1_Load(object sender, EventArgs e)
    {
      //Create a new camera object and set its initial properties
      camera = new EasyImages.CameraClient ("DefaultCamera");
      camera.FramesPerSecond = 10;
      camera.ReceivedFrame += new EasyImages.CameraClient.ReceivedFrameEventHandler (camera_ReceivedFrame);
      camera.Start();
      lblJPEGQuality.Text = "JPEG Quality: " + tbJPEG.Value.ToString() + "%";
    }

    void camera_ReceivedFrame(object sender, EasyImages.CameraEventArgs e)
    {
      // Display the image
      DisplayImageInPictureBox (this.pbOriginal, e.Bitmap);

      // Get a JPEG version of this image using the quality level specified in the trackbar
      EasyImages.JPEG jpeg = new EasyImages.JPEG (e.Bitmap,  this.tbJPEG.Value);
      DisplayImageInPictureBox (this.pbJPG, jpeg.GetImage () );

      // Calculate the size of the original and the JPEG image
      this.lblOriginal.Text = "Size of Original: Unknown";
      this.b = jpeg.GetByteArray ();
      this.lblJPEG.Text = "JPEG image (size = " + b.Length.ToString () + ")"; 
    }

    private void tbJPEG_Scroll(object sender, EventArgs e)
    {
      lblJPEGQuality.Text = "Quality: " + tbJPEG.Value.ToString() + "%";
    }

    //Display the image in the picturebox in the correct thread
    private void DisplayImageInPictureBox(PictureBox pbox, Image image)
    {
      if (pbox.InvokeRequired) // We are in the wrong thread. Call ourselves in the correct thread
      {
        SetPictureBoxImage theDelegate = new SetPictureBoxImage(DisplayImageInPictureBox);
        BeginInvoke(theDelegate, new object[] { pbox, image });
      }
      else // we are in the correct thread, so assign the image
      {
        pbox.Image = image;
      }
    }
  }
}

Explanation

Much of this program is similar to what was seen in the Minimal Camera, so we only describe what is different.

  • Form1_Load is the load event handler for the form; it creates a new camera client object, sets its initial properties, and creates the camera client event handler to process generated frames as bitmaps
  • camera_ReceivedFrame is the event handler for the camera.
    • It displays the current frame in the Original PictureBox
    • It creates a new JPEG object that immediately converts the original image to a JPG, using the quality level indicated in the trackbar
    • It calculates the size of this JPG image by turning it into a byte array
  • tbJPEG_Scroll is the event handler for the tbJPEG trackbar; it just sets the quality value for the JPG compression