Resizing and Recompressing

There are three settings specifying how the original image will be resized to create a thumbnail:

• ThumbnailHeight is the height of the thumbnail.
• ThumbnailWidth is the width of the thumbnail.
• ThumbnailFitMode is the fit mode of the thumbnail.

The ThumbnailFitMode is quite complicated, so let us describe it in detail. Fit mode is an important setting for thumbnail creation. It specifies if the thumbnail should be resized at all, and if so, how it should be shrunk to fit the specified dimensions. The ThumbnailFitMode property has the following possible values:

• Fit means that the original image should be resized to fit the rectangle specified with the ThumbnailHeight and ThumbnailWidth properties. Note that the proportions of the original image will be kept.
• Width means that the original image should be resized to be no wider than the ThumbnailWidth value. Image is resized proportionally, so the ThumbnailHeight property is ignored in this mode.
• Height means that the original image should be resized to be no higher than the ThumbnailHeight value. Image is resized proportionally, so the ThumbnailWidth property is ignored in this mode.
• ActualSize means that dimensions of the original image should be kept; however, it can be rotated or recompressed if necessary.

If you know target image DPI and size (in inches), you can calculate thumbnail width and height by multiplying target values. For example, you want to get 4"x6" image with 72 DPI, then you should set ThumbnailWidth to 432 (432 pixels = 6 inches x 72 DPI) and ThumbnailHeight to 288 (288 pixels = 4 inches x 72 DPI).

The next example illustrates how to create a thumbnail converter and set its general properties.

<aur:ImageUploaderFlash ID="Uploader1" runat="server">
    <Converters>
        <aur:Converter Mode="*.*=Thumbnail" 
           ThumbnailHeight="200" 
           ThumbnailWidth="200" 
           ThumbnailFitMode="Fit" />
    </Converters>
</aur:ImageUploaderFlash>

$uploader = new ImageUploaderFlash("Uploader1");
$converters = &$uploader->getConverters();
$converter = new Converter();
$converter->setMode("*.*=Thumbnail");
$converter->setThumbnailWidth(200);
$converter->setThumbnailHeight(200);
$converter->setThumbnailFitMode("Fit");
$converters[] = $converter;

var fu = $au.imageUploaderFlash({
    id: 'Uploader1',
    converters: [{mode: '*.*=Thumbnail', 
        thumbnailWidth: 200, 
        thumbnailHeight: 200, 
        thumbnailFitMode: 'Fit'}]
});

The only thumbnail supported file format is JPEG. It means that a thumbnail will be a JPEG image whatever format an original image has. This image format has an ability to balance between file size and image quality. You can specify JPEG quality of a thumbnail via the ThumbnailJpegQuality property which accepts a number in the range [0, 100]. If you specify 0, the file will be extremely small, but the quality will be very low (almost always unacceptable). Alternatively, if you specify 100, the file will be quite large, but JPEG artifacts will be almost invisible. Usually, small images have rather low quality (to be loaded quickly), whereas screen-size images have higher quality. The default ThumbnailJpegQuality value is 80 which is the most balanced and common JPEG quality.

All the thumbnails are created as JPEG images, and the JPEG format does not support transparency. That does not mean that you will be unable to create thumbnails for transparent images. The thumbnails will simply be created on a background of some color. You can set this color using the ThumbnailBgColor property. To specify desired background color use a hex representation of the RGB triad in HTML-style syntax (#rrggbb). Default background color is white (#FFFFFF).

It is possible that some specific thumbnail will fail to be created, for example, when the original file is corrupted or it is non-image. To handle this situation specify one more conversion mode (e.g. SourceFile or Icon) after the Thumbnail one. In this case, if applying of the first mode has failed, HTML5/Flash Uploader will try to use the next one.

The following example illustrates the idea.

<aur:ImageUploaderFlash ID="Uploader1" runat="server">
    <Converters>
        <%-- Send the source file if the thumbnail cannot be created --%>
        <aur:Converter Mode="*.*=Thumbnail;*.*=SourceFile" />
        <%-- Send an icon if the thumbnail cannot be created --%>
        <aur:Converter Mode="*.*=Thumbnail;*.*=Icon" />
    </Converters>
</aur:ImageUploaderFlash>

$uploader = new ImageUploaderFlash("Uploader1");
$converters = &$uploader->getConverters();
$converter = new Converter();
//Send the source file if the thumbnail cannot be created
$converter->setMode("*.*=Thumbnail;*.*=SourceFile");
$converters[] = $converter;
$converter = new Converter();
//Send an icon if the thumbnail cannot be created
$converter->setMode("*.*=Thumbnail;*.*=Icon");
$converters[] = $converter;

var fu = $au.imageUploaderFlash({
    id: 'Uploader1',
    converters: [
        //Send the original file if the thumbnail cannot be created
        {mode: '*.*=Thumbnail;*.*=SourceFile'}, 
        //Send an icon if the thumbnail cannot be created
        {mode: '*.*=Thumbnail;*.*=Icon'}
    ]
});

Reference

• Converter Class

Manual

• Uploading Images
• Rotating Images
• Working with EXIF and IPTC Metadata