Rotate by EXIF tag and resize pictures

RealWorld Photos features a flexible batch image processing subsystem capable of performing multi-step operations with images. This guide shows you how to configure a scripted operation to prepare images for web. RealWorld Photos can export and import batch operations - if your goal is just to get things done, download the operation in the next paragraph and import it into RW Photos. If you want to learn how to prepare custom operations, read also the rest of the guide.

The easy way

1. Download the complete operation: prepare-for-web.rwbatchop
2. Start RW Photos and switch to the Batch Mode page.
3. Click on Import batch operation toolbar button above the Operations box and select the downloaded operation.
4. You are done, drag and drop the images or folders with images to process on the upper part of the window and select the target size.

Creating the batch operation

This section explains how to prepare the batch operation downloaded above step by step. To understand this section, a basic knowledge about the JavaScript language is needed.

• Start RW Photos and switch to the Batch Mode page.
• Click on Create batch operation toolbar button above the Operations box and then click on Configure. A dialog box appears.

This dialog shows the configuration of your new batch operation. You may change the name, icon and description of the operation. Name and description can be specified in multi-language format.

Note that the Operation box below is set to Sequence. The Sequence operation allows you to run multiple operations one after the other. Initially, there are 2 steps, but we will add one more later. You can use toolbar buttons above the list of steps to add new steps or reorder them.

Rotating and resizing image

• Select the first step and find a box with text No Operation. Change the value of this box to JavaScript. The lower part of the window changes. Put the following code to the lower part of the window:

if (Document.EXIF.Exists)
{
    var orientation = Document.EXIF.GetValueByName("Orientation");
    var angle = 0;
    if (orientation == 'bottom - right')
        angle = 180;
    else if (orientation == 'right - top')
        angle = 90;
    else if (orientation == 'left - bottom')
        angle = 270;
    if (angle != 0)
    {
        var rotation = Operation.Create("Raster Image - Rotate");
        rotation.Angle = angle;
        rotation.Resize = true;
        Operation.Execute(rotation, Document);
    }
}

var frameX = Configuration.GetValue("frameX");
var frameY = Configuration.GetValue("frameY");

var sizeX = Document.RasterImage.sizeX;
var sizeY = Document.RasterImage.sizeY;
if (sizeX*frameY > sizeY*frameX)
{
    sizeY = sizeY*frameX/sizeX;
    sizeX = frameX;
}
else
{
    sizeX = sizeX*frameY/sizeY;
    sizeY = frameY;
}

var resampling = Operation.Create("Raster Image - Resample");
resampling.Mode = 1;
resampling.SizeXAbs = sizeX;
resampling.SizeYAbs = sizeY;
resampling.Method = 1;
Operation.Execute(resampling, Document);

The code above first checks if EXIF block is available and if that is the case, it reads the Orientation tag and translates its value to angle in degrees and finally uses the Rotate operation to rotate the image.

The second part of the JavaScript does the resizing. It reads the size of the frame (obtained from user), computes target image dimensions and resizes the image.

Now, look closely at the line Configuration.GetValue("frameX"). This line reads the value of the frameX parameter as specified by the user at runtime. Before this can be done, the parameter frameX must be declared to be a field controlled by the user.

• Click on the Configuration button (next to the Execution button) above the edit box with JavaScript. This window is used to specify how the configuration dialog of the final operation looks like.
• Copy the following JavaScript code to the large text box under the Dialog caption: label:

Configuration.AddEditBox(
    "frameX",
    "Frame width",
    "Maximum width of the resized image",
    Configuration.GetValueOrDefault("frameX", 800));
Configuration.AddEditBox(
    "frameY",
    "Frame height",
    "Maximum width of the resized image",
    Configuration.GetValueOrDefault("frameY", 600));

The above code adds two edit boxes to the configuration dialog and sets their labels, help texts and default value. By using the GetValueOrDefault function, the last used values typed by a user can be preserved.

Striping meta data and setting compression

• Click the + icon to add a new step to the Sequence, then move this step up to the second place.
• Change the operation performed in this step from No operation to Set image format operation.
• Set Image format to JPEG, Lossless mode to Disabled and Metadata to Delete.

In this step the file format for saving is specified. You can also set the preferred level of compression.

• Click OK and you are done.

The third step in the Sequence saves the resulting image to a temporary folder from where you can later move it elsewhere. It is possible to modify the configuration of this step to save the image elsewhere or even overwrite the original file, but make sure you have your data backed up. Files will be overwritten without warning.

Recent comments

Cosmo registered user on February 4th 2013

Step by Step..,it needs Time to understand all these Tools,but its fun to play with it and bijing creativ. Thankx @ RealWorldGraphics. (And sorry my bad english).

Anonymous on December 14th 2014

how do you rotate the selected image?

Anonymous

Signed comments carry more weight! Don't be a stranger - log-in or register. It only takes few seconds.