CodeCarvings Piczard V1.2 Help
Controlling The WYSYWIG Image Editor Tool
See Also Send Feedback
Image Upload - SimpleImageUpload User Control > Controlling The WYSYWIG Image Editor Tool

Glossary Item Box

Please see the Examples:

  • A.501 - Overview
  • 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

SimpleImageUpload uses PopupPictureTrimmer to allow final users to interactively crop and/or resize the uploaded images.

This feature can be controlled by using the following three properties:

  1. EnableEdit
  2. AutoOpenImageEditPopupAfterUpload
  3. CropConstraint

The first property (EnableEdit), allows to enable or disable the WYSIWYG image editor.
The default value is true (WYSIWYG image editor enabled)

The second property (AutoOpenImageEditPopupAfterUpload) allows to configure the control so that the image editor popup is automatically opened after the upload process.
The default value is false.

The third property (CropConstraint) allows to:

In order to disable the crop feature you have to set this property to null (that is also the default value).
In this case the cropping mask is not displayed.

If the property is not null, then the image crop feature is enabled
You can pass any type of CropConstraint: FixedCropConstraint, FixedAspectRatioCropConstraint or FreeCropConstraint.

It is important to note that, when the CropConstraint property is valorized the image is always cropped according to the CropConstraint parameters.

This also occurs even if EnableEdit is false.
In this case the image is automatically cropped according the CropConstraint parameters without user interaction.

Moreover it is important to know that the image is always cropped before the PostProcessingFilter is applied.

The following example allows an user to crop a fixed size image (300x200 pixels - by default the whole image is selected)

Copy Code
protected void Page_Load(object sender, EventArgs e)
{
   
if (!this.IsPostBack)
   {
       var cropConstraint =
new FixedCropConstraint(300, 200);
       cropConstraint.DefaultImageSelectionStrategy = CropConstraintImageSelectionStrategy.WholeImage;
       ImageUpload1.CropConstraint = cropConstraint;
   }
}

Please see also: Interactively crop and/or resize an image.

 

See Also

Piczard Foundamentals - Web
Interactively crop and/or resize an image

©2013 Sergio Turolla. All Rights Reserved.