Basic image processing – Qt to WP7 transition

This article explains the basic image processing both in Qt and Windows phone 7.

The following tasks are performed:

  1. Opening an image from the Gallery
  2. Edit the image / Adding a frame to the image
  3. Saving the modified image

Qt Implementation

To open gallery with Qt, Qt Mobility provides the gallery module which needs to be imported.

import QtMobility.gallery 1.1

The .pro file also needs the following configurations for accessing the gallery module,

CONFIG += mobility
MOBILITY = gallery

To access gallery either use QML DocumentGalleryModel Element or QDocumentGaller for Qt. The DocumentGalleryModel provides a media model to be used with one of the View elements.

GridView {
	anchors.fill: parent
	cellWidth: 128
	cellHeight: 128

	model: DocumentGalleryModel {
		rootType: DocumentGallery.Image
		properties: [ "url" ]
	}

	delegate: Image {
		source: url
		width: 128
		height: 128
		MouseArea
		{
			anchors.fill:parent
			onClicked: console.log(url)
		}
	}
}

DocumentGalleryModel also supports other media type like Audio, and it can be accessed by changing the rootType,

rootType: DocumentGallery.Image


Besides this, the DocumentGalleryModel also allows to set a filter using GalleryWildcardFilter – where one can specify the filetype to be filtered by the model. Eg. jpg, png, mp3, etc.

filter: GalleryWildcardFilter {
       property: "fileName";
       value: "*.jpg";
             }

For editing the image, QImage provides functions for accessing the pixels of an image by its x,y co-ordinates.

QImage iImage(path);
  QRgb color;
  color = qRgb(0,255,0);

    for(int i=0;i<mPixmap->height();i++)
    {
        for(int j=0;j<10;j++)
        {
           iImage.setPixel(i,j,color);
        }
    }
	iImage.save("TestImage.jpg");

Windows Phone 7 Implementation

To launch gallery of a WP7, PhotoChooserTask is used.

Pressing the “Select” button would launch the gallery/photochooser.

void btnSelect_Click(object sender, RoutedEventArgs e)
{
	// Launch photo chooser
	photoChooser.ShowCamera = true;
	photoChooser.Show();
	photoChooser.Completed += new EventHandler<PhotoResult>(photoChooserTask_Completed);
}

A PhotoResult stores the result of the selected image which can be set in our image component.

private void photoChooserTask_Completed(object sender, PhotoResult e)
{
	// Handler after the user selects the photo
	photoResult = e;
	if (e.TaskResult == TaskResult.OK)
	{
		image.SetSource(e.ChosenPhoto);
		imgContainer.Source = image;
	}
	else if (e.TaskResult == TaskResult.None)
	{
		return;
	}
}

To edit the image, the pixels of the image can be accessed using the Pixels.setValue() function of the WriteableBitmap. The difference to note here between Qt and WP7 is that QImage allows to access pixels of an image using x,y cordinates; while in WP7 we can only access the pixels of the image by its pixel number.

On clicking the Effect button, the btnEffect_Click() would generate frame on the vertical sides of the image.

private void btnEffect_Click(object sender, RoutedEventArgs e)
{
	// Function for editing image

	// defining color
	int color = unchecked((int)0xFFCC3366);
	WriteableBitmap wbmp = new WriteableBitmap(image);

	for (int i = 0; i < wbmp.PixelHeight; i++)
	{
		int index = (i * wbmp.PixelWidth);
		//width of the frame border is 30, hence -14 to 15
		for (int counter = -14; counter < 15; counter++)
		{
			if (index + counter <= wbmp.PixelHeight * wbmp.PixelWidth && index + counter > 0)
			{
			wbmp.Pixels.SetValue(color, index + counter);
			}
		}
	}
// setting the edited image in imgContainer
	imgContainer.Source = wbmp;

	// assigning to global variable
	wb = wbmp;
}

Finally, we can save the image using the IsolatedFileStorage.

public void SaveImage(Stream imageStream, int orientation, int quality, WriteableBitmap wb)
	{
		using (var isolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
		{
			if (isolatedStorage.FileExists(imgContainer.Name))
				isolatedStorage.DeleteFile(imgContainer.Name);

			IsolatedStorageFileStream fileStream = isolatedStorage.CreateFile(imgContainer.Name);
			image.SetSource(photoResult.ChosenPhoto);

			wb.SaveJpeg(fileStream, wb.PixelWidth, wb.PixelHeight, orientation, quality);
			fileStream.Close();
		}

		using (IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication())
		{
			using (IsolatedStorageFileStream fileStream = myIsolatedStorage.OpenFile(imgContainer.Name , FileMode.Open , FileAccess.Read ))
			{
					MediaLibrary mediaLibrary = new MediaLibrary();
					Picture pic = mediaLibrary.SavePicture(imgContainer.Name, fileStream);
					fileStream.Close();
			}
		}

		// Launch the photo chooser again to show the saved image
		PhotoChooserTask photoChooserTask = new PhotoChooserTask();
		photoChooserTask.Show();
	}

To download the code refer here.

Advertisements
This entry was posted in Code Example, Nokia, Qt Quick, Symbian, Windows Phone 7 and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s