1. Image Uploader 7.0.37
  2. Using Image Uploader
  3. Uploading Images
This documentation is for the old version. Go to the latest Upload Suite docs

Rotating and Cropping

Rotating and cropping are two basic photo-editing actions. Image Uploader provides the built-in image editor to perform these actions manually, you can also configure Image Uploader to rotate and crop images automatically. This topic consists of two parts, namely, rotating images and cropping images, each tells how to configure Image Uploader to upload edited versions of images and edit images automatically.

Rotating Images

There are two approaches to rotating images in Image Uploader:

Manual Rotation

By default manual rotation is enabled in Image Uploader. It means that a user can rotate images either by clicking the rotation control or using the image editor. To upload rotated images you just need to specify a ConverterConverter (ASP.NET)Converter (PHP)converter (JavaScript) with Thumbnail ModeMode (ASP.NET)Mode (PHP)mode (JavaScript), as it is shown in the example below.

ASP.NET
<aur:Uploader ID="Uploader1" runat="server">
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" ThumbnailFitMode="ActualSize" />
    </Converters>
</aur:Uploader>
PHP
$uploader = new Uploader("Uploader1");
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=Thumbnail");
$converter->setThumbnailFitMode("ActualSize");
$converters[] = $converter;
JavaScript
var u = $au.uploader({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailFitMode: 'ActualSize'}]
});

You may also get rotation angle value on the server and handle it in a way that suites your requirements, for more information, please, see the receiving rotation angle receiving rotation angle in ASP.NET receiving rotation angle in PHP paragraph.

To disable manual image rotation set the Uploader.EnableRotationEnableRotation (ASP.NET)EnableRotation (PHP)enableRotation (JavaScript) property to false.

Automatic Rotation

Automatic rotation means that Image Uploader rotates images automatically, if needed. The decision, whether to rotate an image or not, is based on the EXIF metadata contained in the original image. To turn automatic rotation on you have to set the Uploader.EnableAutoRotationEnableAutoRotation (ASP.NET)EnableAutoRotation (PHP)enableAutoRotation (JavaScript) property to true and add a Thumbnail converter, as it is shown in the following example.

ASP.NET
<aur:Uploader ID="Uploader1" runat="server" EnableAutoRotation="true">
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" ThumbnailFitMode="ActualSize" />
    </Converters>
</aur:Uploader>
PHP
$uploader = new Uploader("Uploader1");
$uploader->setEnableAutoRotation(true);
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=Thumbnail");
$converter->setThumbnailFitMode("ActualSize");
$converters[] = $converter;
JavaScript
var u = $au.uploader({
    id: 'Uploader1',
    enableAutoRotation: true,
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailFitMode: 'ActualSize'}]
});
Note

Though it may be convenient, remember that not all the cameras recognize orientation properly. Reading EXIF data also slows down the process of folder scanning, and if the folder contains a lot of images, the decrease in speed may be noticeable.

Cropping Images

This paragraph describes main approaches to cropping in Image Uploader:

  • Manual cropping is a classic use case of any crop tool. It allows a user to remove unwanted areas from an image.
  • Automatic cropping is a programmatic way to crop each user-selected image using a predefined rectangular area.
  • Uploading rectangular selection is especially helpful in social networking. This allows users to highlight an area of an image.

Manual Cropping

A user can crop images via the image editor. When a user crops an image this way, Image Uploader saves the crop bounds. To upload cropped images you have to create a Thumbnail converter and set its ThumbnailApplyCropThumbnailApplyCrop (ASP.NET)ThumbnailApplyCrop (PHP)thumbnailApplyCrop (JavaScript) property to true, like it is shown in the following example.

ASP.NET
<aur:Uploader ID="Uploader1" runat="server" >
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" 
           ThumbnailFitMode="ActualSize"
           ThumbnailApplyCrop="true" />
    </Converters>
</aur:Uploader>
PHP
$uploader = new Uploader("Uploader1");
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=Thumbnail");
$converter->setThumbnailFitMode("ActualSize");
$converter->setThumbnailApplyCrop(true);
$converters[] = $converter;
JavaScript
var u = $au.uploader({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailFitMode: 'ActualSize',
        thumbnailApplyCrop: true}]
});

Automatic Cropping

This paragraph describes how to crop each user-selected image automatically. Automatic cropping consists of two parts:

  1. Setting crop bounds. To perform this task you should iterate through user-selected images and specify crop bounds for each of them via the file.cropBounds property. This should be done before upload begins, so we recommend to place the corresponding code to the BeforeUpload event handler. For more information about client events in Image Uploader, please, see the using events topic.
  2. Upload cropped images. Here, you just create a Thumbnail converter and set its ThumbnailApplyCrop property to true.

The following example crops 200 x 200 pixels rectangle out of the center of each user-selected image.

ASP.NET
<script type="text/javascript">
function beforeUploadHandler(){
    var cropWidth = 200;
    var cropHeight = 200;
    var count = $au.uploader('Uploader1').files().count();
    for (var i=0; i < count; i++) {
        var $file = $au.uploader('Uploader1').files().get(i);
        var imageCenterX = $file.width() / 2;
        var imageCenterY = $file.height() / 2;
        var cropBounds = [(imageCenterX - cropWidth/2), 
            (imageCenterY - cropHeight/2), cropWidth, cropHeight];
        $file.cropBounds(cropBounds);
    }
}
</script>

<aur:Uploader ID="Uploader1" runat="server" >
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" 
           ThumbnailFitMode="ActualSize"
           ThumbnailApplyCrop="true" />
    </Converters>
    <ClientEvents>
        <aur:ClientEvent EventName="BeforeUpload" HandlerName="beforeUploadHandler" />
    </ClientEvents>
</aur:Uploader>
PHP
<script type="text/javascript">
function beforeUploadHandler(){
    var cropWidth = 200;
    var cropHeight = 200;
    var count = $au.uploader('Uploader1').files().count();
    for (var i=0; i < count; i++) {
        var $file = $au.uploader('Uploader1').files().get(i);
        var imageCenterX = $file.width() / 2;
        var imageCenterY = $file.height() / 2;
        var cropBounds = [(imageCenterX - cropWidth/2), 
            (imageCenterY - cropHeight/2), cropWidth, cropHeight];
        $file.cropBounds(cropBounds);
    }
}
</script>
<?php
$uploader = new Uploader("Uploader1");
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=Thumbnail");
$converter->setThumbnailFitMode("ActualSize");
$converter->setThumbnailApplyCrop(true);
$converters[] = $converter;
$uploader->getClientEvents()->setBeforeUpload("beforeUploadHandler");
$uploader->render();
?>
JavaScript
function beforeUploadHandler(){
    var cropWidth = 200;
    var cropHeight = 200;
    var count = this.files().count();
    for (var i=0; i < count; i++) {
        var $file = this.files().get(i);
        var imageCenterX = $file.width() / 2;
        var imageCenterY = $file.height() / 2;
        var cropBounds = [(imageCenterX - cropWidth/2), 
            (imageCenterY - cropHeight/2), cropWidth, cropHeight];
        $file.cropBounds(cropBounds);
    }
}

var u = $au.uploader({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailFitMode: 'ActualSize',
        thumbnailApplyCrop: true}],
    events: { beforeUpload: beforeUploadHandler }
});

Uploading Rectangular Selection

Selecting an image area to highlight a person or an object is a quite popular idea in social networking. In Image Uploader a user actually selects a rectangular area of an image while cropping this image. Bounds of this rectangle will be uploaded along with the image, no matter what converter mode you use (in this case you can set SourceFile mode). So, on the server side you may receive user-given selection and show the highlighted area on the image.

To get to know how to obtain crop bounds on the server side, please, see the receiving crop bounds receiving crop bounds in ASP.NET receiving crop bounds in PHP paragraph.

See Also

Reference

Manual