CodeCarvings Piczard V1.2 Help
How To Save/Load Images And Control State
Send Feedback
Image Upload - SimpleImageUpload User Control > How To Save/Load Images And Control State

Glossary Item Box

CONTENTS

  1. Introduction
  2. Save the final image
  3. Save the whole state of the control
  4. Populate the control (load an image)

 

 

1. Introduction

When an image is uploaded by an user it is saved as temporary file.

It is the application’s job to permanently save the temporary image (in a directory or within a database).
If the temporary image is not saved, then by default it is automatically deleted.

For more information about configuring the temporary files management please see:

It is important to understand that - after an image has been uploaded and/or edited with SimpleImageUpload - there are three "things" that you can save:

  1. The final image (the one resulting from the editing process and/or the application of the PostProcessingFilter)
  2. The original source image uploaded by the user
  3. In case the image editor is enabled, the Value of the control (crop coordinates, resize factor, horizontal/vertical flipping, color adjustment parameters)

The simplest situation is to choose to only save the final image (1).
However if you want to fully save the state of the control (so that in the future you can reload it), you have to save the source image (2) and the Value of the control (3).

In order to check the status of the control (e.g. to understand if you need to save the image), the following properties are provided:

The control also provides the following events that allows to handle the modifications of the control state:

 

 

2. Save the final image 

Please see the Examples:

  • A.502 - Usage example #1 (image crop)
  • A.503 - Usage example #2
  • A.504 - Usage example #3
  • A.505 - Usage example #4 (SQL Server)
  • A.506 - Usage example #5
  • A.507 - Usage example #6 (image resize + watermark)

In order to process the source image (for example when the user clicks the hypothetical button "Save Record") you can use one of the following methods:

These methods take the source image -and- depending on the active features:

  1. The editing parameters are applied (Please see: Controlling The WYSYWIG Image Editor Tool
  2. The PostProcessingFilter is applied (Please see: Post-Processing Filters (Automatic Image Resize, Watermark, Etc...))
Please note that, if both image editor is enabled and PostProcessingFilter has been set to some ImageProcessingFilter, then the PostProcessingFilter is applied to the edited image.

The following example checks if the user has edited the current image (crop/resize/rotate-flip/color adjust...) -or- if a new image has been uploaded.
In both cases the image is processed and saved to file system (image format: jpeg - quality 92%).

Copy Code
protected void btnSave_Click(object sender, EventArgs e)
{
   
if (ImageUpload1.HasNewImage)
   {
       ImageUpload1.SaveProcessedImageToFileSystem(
"~/MyImage.jpg", new JpegFormatEncoderParams(92));
   }
}

 
Figure 1: Save the final image when image editor enabled.

 

 

Figure 2: Save the final image when some PostProcessingFilter is set.

 

 

3. Save the whole state of the control

Please see the Examples:

  • A.503 - Usage example #2
  • A.505 - Usage example #4 (SQL Server)
  • A.506 - Usage example #5

As explained in the introduction, if you want to save the whole state of the control (so that you can then reload it), you have to store "somewhere" 2 information:

Obviously, you probably will also need  to save the final image.
For more information please see: Save the final image.

By default the control saves the source image in the temporary directory.
You can obtain the path of the source image by using the property: TemporarySourceImageFilePath.
You can easily store this file by copying it somewhere in the filesystem or by archiving it in a database.

The Value of the control, instead, consists of a number of information such as:  the crop coordinates, resize factor, horizontal/vertical flipping, color adjustment parameters).
All these data are encapsulated into an instance of the class PictureTrimmerValue (please see: UserState & PictureTrimmer Value)

Please note that you need to store the Value of the control only if the image editor is enabled (EnableEdit = true).

Figure 3: PictureTrimmer Value.

 

You can save the Value of the control by serializing it as string.
In particular, you can use the JSONSerializer class provided by Piczard (for more information about the JSON serialization please see JSON Serialization)

Save the state of the control Copy Code
protected void btnSaveRecord_Click(object sender, EventArgs e)
{
  
if (ImageUpload1.HasImage)
  {
      
// Process the image
      
ImageUpload1.SaveProcessedImageToFileSystem("~/App_Data/MyOutputImage.jpg");
      
// Save the source image somewhere...
      
string destSourceImageFilePath = CodeCarvings.Piczard.Helpers.IOHelper.GetUniqueFilePath("~/App_Data/", ImageUpload1.SourceImageClientFileName);
      System.IO.File.Copy(ImageUpload1.TemporarySourceImageFilePath, destSourceImageFilePath);
      
// Save the current state - For example you can write this value in a DB...
      
string currentValue = JSONSerializer.SerializeToString(this.ImageUpload1.Value);
  }
}

In this example, the source image has been saved by using its original file name (SourceImageClientFileName).
The utility function IOHelper.GetUniqueFilePath allows to get an unique file name (in case a file with the same name is present in the specified directory)

 

 

4. Populate the control (load an image)

Please see the Examples:

  • A.502 - Usage example #1 (image crop)
  • A.503 - Usage example #2
  • A.504 - Usage example #3
  • A.505 - Usage example #4 (SQL Server)
  • A.506 - Usage example #5
  • A.507 - Usage example #6 (image resize + watermark)

In order to populate the control with an image already present on the server you can use one of the following methods:

These methods, accepts also an (optional) parameter that allows to restore the previous Value of the control (crop coordinates, resize factor, rotation angle, color adjustments, etc..)
Please see: Save the whole state of the control.
In case you pass the parameter "Value" to one of these methods it is important that you load the original source image (not the final image).
Please see the Examples: A.503, A.505, A.506
Populate the control Copy Code
protected void Page_Load(object sender, EventArgs e)
{
  
if (!this.IsPostBack)
  {
      
// Setup the CropConstraint
      
ImageUpload1.CropConstraint = new FixedCropConstraint(350, 350);

      
// Load the image and the previous state
      
string sourceImageFilePath = "~/App_Data/MyOutputImage.jpg";
      
string previousValue = "....."; // For example you can read this value from a DB...
      
PictureTrimmerValue picture1Value = PictureTrimmerValue.FromJSON(previousValue);
      ImageUpload1.LoadImageFromFileSystem(sourceImageFilePath, picture1Value);
  }
}

Since it's not possible to set CropConstraint, PostProcessingFilter, PostProcessingFilterApplyMode, PreviewFilter and OutputResolution after an image has been loaded, you have to configure these properties before invoking one of the "Load" methods.

 

The property PostProcessingFilterApplyMode is important when you populate the control with an image and you are using PostProcessingFilter.
By default this property is set to OnlyNewImages, that indicates the control to apply the PostProcessingFilter to new image only (images uploaded by the user -or- edited by the user).
This means that PostProcessingFilter is not applied to images loaded with one of the load methods (e.g. LoadImageFromFileSystem).

If you need to apply the PostProcessingFilter also to images loaded with one of the load methods you have to set the PostProcessingFilterApplyMode property to Always.

 

©2013 Sergio Turolla. All Rights Reserved.