CodeCarvings Piczard V1.2 Help
How PictureTrimmer Works
Send Feedback
Piczard Fundamentals - Web > PictureTrimmer > How PictureTrimmer Works

Glossary Item Box

CONTENTS

  1. Introduction
  2. Load an image
  3. Process an image

 

Please see the Example A.301 - "Web - PictureTrimmer / Overview"

Figure 1: Fixed-size Image crop with InlinePictureTrimmer.

 

 

1. Introduction

Piczard includes two ASP.NET WebControls - InlinePictureTrimmer and PopupPictureTrimmer - that allow the final user to interactively Crop, Resize, Rotate/Flip and Color Adjust an image by using a WYSIWYG interface.

Both controls inherit from the same base class: PictureTrimmer and provide the same functionality.
The only difference is that InlinePictureTrimmer has been designed to be integrated directly within a web page, while PopupPictureTrimmer allows you to take advantage of the functionality of the control in a lightbox popup.

With PictureTrimmer you can - for example - allow an user to select an image which meets certain conditions, such as the fixed size required by a graphic layout.

The following steps are necessary in order to interactively crop and/or resize an image with PictureTrimmer:


 

 

Figure 2: The steps necessary in order to interactively crop/resize an image with a PictureTrimmer control.

 

For example, you can perform the step #1 in the Page_Load method, and the step #3 in the "Click" event handler (server-side) of an ASP.NET button.

 

 

2. Load an image

By loading an image into a PictureTrimmer instance (Figure 2 - Step 1), you allow an user to interactively edit it (crop. resize, rotate/flip, adjust colors, etc...)

The following methods are available in order to load an image in the PictureTrimmer control:

Each method provides several overloads that allow to use different kind of parameters (e.g. enable or disable the crop feature - please see Interactively crop and/or resize an image).

When you load an image into a PictureTrimmer control, the previously loaded image is automatically unloaded.

You can manual unload an image by using the UnloadImage method.

Some properties and methods of the PictureTrimmer controls (e.g. Value or UnloadImage) are available only after an image has been loaded into the control.

An error is thrown if you try to access these properties or methods without an active image.

You can use the ImageLoaded property to check if an image is currently loaded in the control.

 

 

3. Process an image

After an image has been loaded you can process one or more pictures by applying the current user-selected parameters (Crop coordinates, ResizeFactor, RotationAngle, Horizontal Flip, Vertical Flip, Brightness, Contrast, Hue and Saturation).

The following methods allow to process an image:

Example:

Copy Code
using CodeCarvings.Piczard;
using CodeCarvings.Piczard.Web;

protected void Page_Load(object sender, EventArgs e)
{
   
if (!this.IsPostBack)
   {
       
// Load the image when the web page is loaded
       
InlinePictureTrimmer1.LoadImageFromFileSystem("~/src.jpg", new FixedCropConstraint(100, 100));
   }
}
protected void btnProcessImage_Click(object sender, EventArgs e)
{
   
// Process the image when the user clicks the hypothetical button "btnProcessImage"
   
InlinePictureTrimmer1.SaveProcessedImageToFileSystem("~/dest1.jpg");
}

 

By using the GetImageProcessingJob method you can obtain an instance of the ImageProcessingJob class (containing the current PictureTrimmerValue).
In this way you can apply multiple image filters to the same source image (please see: How To Apply More Than One filter)

The following example generates a small grayscale thumbnail (40x40 pixels) of the image selected by the user:

Copy Code
using CodeCarvings.Piczard;
using CodeCarvings.Piczard.Filters.Colors;
using CodeCarvings.Piczard.Web;

protected void Page_Load(object sender, EventArgs e)
{
   
if (!this.IsPostBack)
   {
       
// Load the image when the web page is loaded
       
InlinePictureTrimmer1.LoadImageFromFileSystem("~/src.jpg", new FixedCropConstraint(100, 100));
   }
}
protected void btnProcessImage_Click(object sender, EventArgs e)
{
   
// Process the image when the user clicks the hypothetical button "btnProcessImage"

   
// Save the image selected by the user
   
InlinePictureTrimmer1.SaveProcessedImageToFileSystem("~/dest1.jpg");

   
// Generate a 40x40 / grayscale thumbnail (PNG format) of the image selected by the user
   
ImageProcessingJob job = InlinePictureTrimmer1.GetImageProcessingJob();
   job.Filters.Add(
new FixedResizeConstraint(40, 40));
   job.Filters.Add(DefaultColorFilters.Grayscale);
   job.SaveProcessedImageToFileSystem(
"~/src.jpg", "~/dest2.png");
}
©2013 Sergio Turolla. All Rights Reserved.