Image To JPG

Toolkits.ImageToJPG History

Hide minor edits - Show changes to output

July 17, 2007, at 07:42 PM by 24.64.76.194 -
Added line 87:
Changed line 91 from:
this.pbOriginal.Image = e.Bitmap;
to:
DisplayImageInPictureBox (this.pbOriginal, e.Bitmap);
Changed lines 95-96 from:
this.pbJPG.Image = jpeg.GetImage ();
to:
DisplayImageInPictureBox (this.pbJPG, jpeg.GetImage () );
July 17, 2007, at 07:40 PM by 24.64.76.194 -
Added line 69:
private delegate void SetPictureBoxImage(PictureBox pbox, Bitmap image);
Added line 71:
Added lines 106-119:

//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;
}
}
June 23, 2007, at 01:37 PM by 24.64.76.194 -
Added line 54:
using System.Drawing;
June 23, 2007, at 01:37 PM by 24.64.76.194 -
Deleted lines 53-57:
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
Changed lines 56-62 from:
to:
// 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.
Changed lines 65-69 from:
public partial class Form1 : Form
to:
public partial class Form1 : Form
{
EasyImages.CameraClient camera;
byte[] b;
public Form1()
Changed lines 71-109 from:
EasyImages.Camera camera;
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.Camera();
camera.FramesPerSecond = 30;
camera.Width = pbOriginal.Width;
camera.Height = pbOriginal.Height;
camera.ReceivedFrame += new EasyImages.Camera.ReceivedFrameEventHandler (camera_ReceivedFrame);
camera.Start();
lblJPEGQuality.Text = "JPEG Quality: " + tbJPEG.Value.ToString() + "%";
}
void camera_ReceivedFrame(object sender, EasyImages.CameraEventArgs e)
{
// Display the image
this.pbOriginal.Image = 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);
this.pbJPG.Image = 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() + "%";
}
to:
InitializeComponent();
Added lines 73-103:

//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
this.pbOriginal.Image = 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);
this.pbJPG.Image = 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() + "%";
}
}
Changed lines 108-109 from:
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 even handler for the form; it creates a new camera object, sets its initial properties, and creates the camera event handler to process generated frames as bitmaps
to:
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
June 10, 2007, at 04:54 PM by 24.64.76.194 -
Changed lines 110-111 from:
Much of this program is similar to what was seen in the Minimal Camera, so we only describe what is different. The new parts illustrate how to display an image that is the result of subtracting two images, and how to analyze its difference (returned as a fraction).
* '''Form1_Load''' is the load even handler for the form; it creates a new camera object, sets its initial properties, and creates the camera event handler to process generated frames as bitmaps
to:
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 even handler for the form; it creates a new camera object, sets its initial properties, and creates the camera event handler to process generated frames as bitmaps
June 09, 2007, at 03:21 PM by 24.64.76.194 -
Changed lines 18-19 from:
* the person can interactively change the JPG quality, and immediately see how it affects the image quality and size
to:
* 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
Changed lines 114-117 from:
** It subtracts the current frame from either the previous frame or the static snapshot (depending on the radio button state) and displays it in the Subtract PictureBox
** It calculates the differences between the images, using two different methods
*
'''tbThreshold_Scroll''' is the event handler for the tbThreshold trackbar; it just sets the threshold value used by one of the difference analyzers
* '''rbSnapshot_CheckedChanged''' is the event handler for the rbSnapshot radio button; it gets the current video frame and puts it into the Snapshot PictureBox
to:
** 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
June 09, 2007, at 03:18 PM by 24.64.76.194 -
Changed lines 35-38 from:
* '''3 PictureBoxes''' ''will display your camera's frames''
** Name = pbOriginal, pbSnapshot and pbSubtracted
** Size = 640,480 (the Width and Height of the frame we will put in it)
** BorderStyle = FixedSingle (for pbSnapshot
)
to:
* '''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)
Changed lines 39-49 from:
** Text = Original image, Snapshot, and Subtracted Image as seen in the image above
* '''2 RadioButtons
'''
** Name = rbOriginal, rbSnapShot
** Text = fromVideo, from Snapshot

* '''GroupBox'''
** Text = Differences between images, as seen in the image above
* '''3 More Labels'''
** Name = lblDiffDegree, lblDiffPixels, lblThreshold
** Text = Degree:, Pixels:, Threshold: 1
* '''TrackBar''' ''interactively change the threshold''
to:
** Name = lbloriginal, lblJPEG, lblJPEGQuality
** Text = Original image, JPEG
image, and Quality:
*
'''TrackBar''' ''interactively change the JPG quality level
Changed line 58 from:
namespace ImageDifferencing
to:
namespace ImageToJPG
Changed lines 60-65 from:
public partial class Form1 : Form
{
EasyImages.Camera camera;
Bitmap lastFrame;

public Form1()
to:
public partial class Form1 : Form
Changed lines 62-100 from:
InitializeComponent();
to:
EasyImages.Camera camera;
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.Camera();
camera.FramesPerSecond = 30;
camera.Width = pbOriginal.Width;
camera.Height = pbOriginal.Height;
camera.ReceivedFrame += new EasyImages.Camera.ReceivedFrameEventHandler (camera_ReceivedFrame);
camera.Start();
lblJPEGQuality.Text = "JPEG Quality: " + tbJPEG.Value.ToString() + "%";
}
void camera_ReceivedFrame(object sender, EasyImages.CameraEventArgs e)
{
// Display the image
this.pbOriginal.Image = 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);
this.pbJPG.Image = 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() + "%";
}
Deleted lines 101-156:

//As the GUI is loaded, create a new camera object and set its initial properties
private void Form1_Load(object sender, EventArgs e)
{
lblThreshold.Text = "Threshold: " + tbThreshold.Value.ToString();

//Create a new camera object and set its initial properties
camera = new EasyImages.Camera();
camera.FramesPerSecond = 30;
camera.Width = pbOriginal.Width;
camera.Height = pbOriginal.Height;
camera.ReceivedFrame += new EasyImages.Camera.ReceivedFrameEventHandler(camera_ReceivedFrame);
camera.Start();
}

//We just received a frame...
void camera_ReceivedFrame(object sender, EasyImages.CameraEventArgs e)
{
// Display the original frame
this.pbOriginal.Image = e.Bitmap;

// Generate a frame that visually shows the one image subtracted from the other
// We first decide (by the state of the radio buttons) if we are going to subtract
// the current frame from the last frame seen, or from a static snapshot
Bitmap tempBitmap;
if (rbSnapshot.Checked) tempBitmap = (Bitmap) pbSnapshot.Image;
else tempBitmap = lastFrame;

if (tempBitmap != null)
{
// Now we subtract the image
pbSubtracted.Image = EasyImages.ImageGenerator.Operation(EasyImages.OperationType.Subtract, e.Bitmap, tempBitmap);
//Calculate and show the degree differences between images
lblDiffDegree.Text = "Degree: " + EasyImages.ImageAnalyzer.PercentDifferentDegree(e.Bitmap, tempBitmap).ToString();
//Calculate and show the number of pixels that differ by at least the threshold amount set in the trackbarr
lblDiffPixels.Text = "Pixels: " + EasyImages.ImageAnalyzer.PercentDifferentPixels(tbThreshold.Value, e.Bitmap, tempBitmap).ToString();
}
//Save this frame, so we can use it on the next go round.
lastFrame = e.Bitmap;
}

// Interactively set the threshold for calculating the PercentDifferencePixels
private void tbThreshold_Scroll(object sender, EventArgs e)
{
lblThreshold.Text = "Threshold: " + tbThreshold.Value.ToString();
}

// When we click the snapshot radio button, take a snapshot.
private void rbSnapshot_CheckedChanged (object sender, EventArgs e)
{
if (rbSnapshot.Checked)
{
pbSnapshot.Image = camera.CurrentFrame;
}
}
}
June 09, 2007, at 03:15 PM by 24.64.76.194 -
Added lines 1-145:
[[Toolkits.EasyImage | << Back to the EasyImage Toolkit page]]
\\
\\

!!!Tutorial - Image To JPG
Attach:ImageToJPG.png

!!!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

!!!Download
While we recommend you create this program from scratch, you can also download the source and executables.
(:table border=1 cellpadding=17 cellspacing=0 align=entre bgcolor=#eeeeee :)
(:cell:) [+ '''Source and Executables of this and other examples: ''' [[(Attach:)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.
(:tableend:)

!!!Step 1. Preconditions
Including EasyImages in your new Visual Studio 2005 C# project. This was described in [[Toolkits.CameraMinimal | 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.

* '''3 PictureBoxes''' ''will display your camera's frames''
** Name = pbOriginal, pbSnapshot and pbSubtracted
** Size = 640,480 (the Width and Height of the frame we will put in it)
** BorderStyle = FixedSingle (for pbSnapshot)
* '''3 Labels'''
** Text = Original image, Snapshot, and Subtracted Image as seen in the image above
* '''2 RadioButtons'''
** Name = rbOriginal, rbSnapShot
** Text = fromVideo, from Snapshot

* '''GroupBox'''
** Text = Differences between images, as seen in the image above
* '''3 More Labels'''
** Name = lblDiffDegree, lblDiffPixels, lblThreshold
** Text = Degree:, Pixels:, Threshold: 1
* '''TrackBar''' ''interactively change the threshold''
** Name = tbThreshold
** Minimum = 0
** Maximum = 765

!!!Step 3. Writing the program
The complete program is listed below.
(:source lang=csharp tabwidth=1 :) [=
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using EasyImages;

namespace ImageDifferencing
{
public partial class Form1 : Form
{
EasyImages.Camera camera;
Bitmap lastFrame;

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)
{
lblThreshold.Text = "Threshold: " + tbThreshold.Value.ToString();

//Create a new camera object and set its initial properties
camera = new EasyImages.Camera();
camera.FramesPerSecond = 30;
camera.Width = pbOriginal.Width;
camera.Height = pbOriginal.Height;
camera.ReceivedFrame += new EasyImages.Camera.ReceivedFrameEventHandler(camera_ReceivedFrame);
camera.Start();
}

//We just received a frame...
void camera_ReceivedFrame(object sender, EasyImages.CameraEventArgs e)
{
// Display the original frame
this.pbOriginal.Image = e.Bitmap;

// Generate a frame that visually shows the one image subtracted from the other
// We first decide (by the state of the radio buttons) if we are going to subtract
// the current frame from the last frame seen, or from a static snapshot
Bitmap tempBitmap;
if (rbSnapshot.Checked) tempBitmap = (Bitmap) pbSnapshot.Image;
else tempBitmap = lastFrame;

if (tempBitmap != null)
{
// Now we subtract the image
pbSubtracted.Image = EasyImages.ImageGenerator.Operation(EasyImages.OperationType.Subtract, e.Bitmap, tempBitmap);
//Calculate and show the degree differences between images
lblDiffDegree.Text = "Degree: " + EasyImages.ImageAnalyzer.PercentDifferentDegree(e.Bitmap, tempBitmap).ToString();
//Calculate and show the number of pixels that differ by at least the threshold amount set in the trackbarr
lblDiffPixels.Text = "Pixels: " + EasyImages.ImageAnalyzer.PercentDifferentPixels(tbThreshold.Value, e.Bitmap, tempBitmap).ToString();
}
//Save this frame, so we can use it on the next go round.
lastFrame = e.Bitmap;
}

// Interactively set the threshold for calculating the PercentDifferencePixels
private void tbThreshold_Scroll(object sender, EventArgs e)
{
lblThreshold.Text = "Threshold: " + tbThreshold.Value.ToString();
}

// When we click the snapshot radio button, take a snapshot.
private void rbSnapshot_CheckedChanged (object sender, EventArgs e)
{
if (rbSnapshot.Checked)
{
pbSnapshot.Image = camera.CurrentFrame;
}
}
}
}
=]

!!!Explanation
Much of this program is similar to what was seen in the Minimal Camera, so we only describe what is different. The new parts illustrate how to display an image that is the result of subtracting two images, and how to analyze its difference (returned as a fraction).
* '''Form1_Load''' is the load even handler for the form; it creates a new camera object, sets its initial properties, and creates the camera 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 subtracts the current frame from either the previous frame or the static snapshot (depending on the radio button state) and displays it in the Subtract PictureBox
** It calculates the differences between the images, using two different methods
* '''tbThreshold_Scroll''' is the event handler for the tbThreshold trackbar; it just sets the threshold value used by one of the difference analyzers
* '''rbSnapshot_CheckedChanged''' is the event handler for the rbSnapshot radio button; it gets the current video frame and puts it into the Snapshot PictureBox