Image transformations

Web or mobile, applications are accessed on varied set of devices having different resolutions and it is recommended to serve images as per the device’s resolution to best fit in design. You can also perform various transformations on the images to match the design of the application.

For example, the following dynamic URL with transformations, crops image to a 300x300 circular thumbnail with focus on face, and then scales down the result to a width of 150 pixels. Check result below

Sample baby image

Sample image using the crop, face detection, rounded corners and resize features

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new AmendTransform().Width(300).Height(300).Fit(Amend.FIT_FACE)).Radius("max"));
PHP:
Amend::load("baby", array("transform"=>array("width"=>300,"height"=>300,"fit"=>Amend::FIT_FACE), "radius"=>Amend::MAX));
jQuery:
 Amend.load("baby", {transform:{width:300, height:300, fit:Amend.FIT_FACE}, radius:Amend.MAX});
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(300).height(300).fit(Amend.FIT_FACE)).radius(Amend.MAX));
iOS:
AmendOption *amendOption = [[AmendOption alloc] init];
[amendOption transform:300 andHeight:300 andFit:FIT_FACE];
[amendOption crop:cropMax];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];

Amend allows you to easily transform your images on-the-fly to any required format, style and dimension, and also optimizes images to have the minimal file size for an improved user experience and for saving bandwidth. Doing so is done by implementing dynamic image transformation and delivery URLs for accessing the images. You can change the required transformations at any time and all transformed images will be created on-demand and delivered to your users through a fast CDN with optimized caching.

Amend allows you to perform transformation on the fly on any uploaded image, style, dimension and size can be changed by passing required parameters in URLs. These transformed are delivered through fast CDN with optimized caching.

Amend supports the following image transformations:

Delivering images using dynamic URLs

Images are accessed using simple HTTP or HTTPS URLs which serve users via a fast CDN. The URL contains the image name of the requested image with additional (optional) transformation parameters

http://amend.cloud/<amend_name>/<resource_type>/<image_name>

Where:

  • amend_name - the name of your Amend account, a unique image name for URL building and API access.
  • resource_type is the type of file to deliver. Valid values: image, and fetch.
  • image_name - the unique identifier of the resource (note : image name can have extension).

Example of a delivery URL:

http://amend.cloud/<amend_name>/image/<image_name>

To access an image with image name 'baby' in Amend's test account in jpg format:

.Net:
Amend.Init().Load("baby")
PHP:
Amend::load("baby")
jQuery:
Amend.load("baby")
Android:
Amend.with(context).load("baby")
iOS:
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet];
Sample image

Transformation instructions are added before the image name in the URL. When the URL is called for the first time, transformed image is created on-the-fly and delivered to the user. The transformed image is also cached on the CDN and is made available to next calls requesting the image with same transformations. The URL with transformation parameters is shown below:

http://amend.cloud/<amend_name>/image/<transformation_parameters>/<image name>

Following is an example of delivering an image with transformation parameters, where the image with image name of baby is cropped to a width of 300 pixels and a height of 200 pixels:

.Net:
Amend.Init().Load("baby", new AmendOption().Transform(new Transform().Width(300).Height(200)))
PHP:
Amend.load("baby", array("transform"=>array("width"=>300, "height"=>200))
jQuery:
Amend.load("baby", {transform:{width:300, height:200}})
Android:
Amend.with(context).load("baby",new AmendOptions().transform(new Transform().width(300).height(200)))
iOS:
AmendOption *amendOption = [[AmendOption alloc] init];
[amendOption  transform:200 andHeight:100];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Image cropped to 300x200

Secure HTTPS URLs

Amend also serves images using HTTPS URLs. There is no difference in accessing HTTPS delivery URLs:

HTTPS delivered image

Resizing and cropping images

Use amend to resize and crop images to fit your web/mobile application design. To modify the size of an image, use the width and height parameters (w and h in URLs) to pass new values. You can resize the image by using both the width and height parameters or with only one of them: the other dimension will automatically be adjusted to maintain the aspect ratio.

  • Using an integer value sets the new dimension to that number in pixels. For example, w_150 sets the width to exactly 150 pixels.

Examples of resizing the uploaded jpg image named baby:

  1. Resizing the height to 200 pixels, maintaining the aspect ratio:

    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transformation().Height(200))
    PHP:
    Amend::load("baby", array("transform"=>array("height"=>200)))
    jQuery:
    Amend.load("baby", {transform:{height:200}})
    Android:
    Amend.with(context).load("baby", new AmendOption().transform(new Transform().height(200)))
    iOS:
    AmendOption *amendOption = [[AmendOption alloc] init];
    [amendOption transformHeight:[200 intValue]];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image scaled to a height of 200 pixels

  2. Resizing to a width of 200 pixels and a height of 100 pixels:

    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(200).Height(100))
    PHP:
    Amend::load("baby", array("transform"=>array("width"=>200, "height"=>100)))
    jQuery:
    Amend.load("baby", {transform:{width:200,height:100}})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(200).height(100)))
    iOS:
    AmendOption *amendOption = [[AmendOption alloc] init];
    [amendOption transform:200 andHeight:100];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image scaled to 200x100

While modifying the dimensions of an uploaded image by changing the image's height and/or width, you need to decide how to adapt or "crop" the image to fit into the requested size. The fit parameter is used for selecting the fit mode (fit in URLs). Amend supports the following image fit modes: xy, width, height, fill, inside, and face.

xy

Modify the size of the image as per the width & height parameters passed without necessarily maintaining the aspect ratio.

Examples of scaling the uploaded image named baby:

  1. Scaled to a width of 150 pixels (maintains the aspect ratio by default):

    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(150).Fit(Amend.FIT_XY))
    PHP:
    Amend::load("baby", array("transform"=>array("width"=>150, "fit"=>Amend.FIT_XY)))
    jQuery:
    Amend.load("baby", {transform:{width:150,fit:Amend.FIT_XY}})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(150).fit(Amend.FIT_XY)))
    iOS:
    AmendOption *amendOption = [[AmendOption alloc] init];
    [amendOption transform:200 andFit:FIT_XY];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image scaled to a width of 150 pixels

  2. Scaled to a width and height of 150 pixels without maintaining the aspect ratio:

    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(150).Height(150).Fit(Amend.FIT_XY))
    PHP:
    Amend::load("baby", array("transform"=>array("width"=>150, "height"=>150, "fit"=>Amend.FIT_XY)))
    jQuery:
    Amend.load("baby", {transform:{width:150,height:150,fit:Amend.FIT_XY}})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(150).height(150).fit(Amend.FIT_XY)))
    iOS:
    AmendOption *amendOption = [[AmendOption alloc] init];
    [amendOption transform:150 andHeight:150 andFit:FIT_XY];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image transform to a width and height of 150 pixels with fit xy

width

In this case the original aspect ratio is retained and image is resized with width parameter to fit in required size.

For example, the uploaded image named baby is resized to fit width within a width and height of 250 pixels while retaining the aspect ratio:

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_WIDTH))
PHP:
Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_WIDTH)))
jQuery:
Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_WIDTH}})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_WIDTH)))
iOS:
[[[AmendOption alloc] init]  transform:250 andHeight:250 andFit:FIT_WIDTH];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Image transform to a width and height of 250 pixels with fit width

height

Works similar to width mode but here height is used.

For example, the uploaded jpg image named baby limited to a width and height of 250 pixels while retaining the aspect ratio:

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_HEIGHT))
PHP:
Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_HEIGHT)))
jQuery:
Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_HEIGHT}})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_HEIGHT)))
iOS:
AmendOption *amendOption = [[AmendOption alloc] init];
[amendOption transform:250 andHeight:250 andFit:FIT_HEIGHT];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Image transform to a width and height of 250 pixels with fit height

fill

In this case original image will be filled in resized image, you can specify which part of the original image to use for filling the required size in case ratio do not match by using the align parameter (set to center by default).

For example, attempting to fit fill the uploaded image named baby to a minimum width and height of 250 pixels while retaining the aspect ratio:

  1. Fit fill to a width and height of 250 pixels while retaining the aspect ratio:

    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_FILL))
    PHP:
    Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_FILL)))
    jQuery:
    Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_FILL}})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_FILL)))
    iOS:
    AmendOption *amendOption = [[AmendOption alloc] init];
    [amendOption transform:250 andHeight:250 andFit:FIT_FILL];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image transform to a width and height of 250 pixels with fit fill
  2. Filled to a width and height of 250 pixels with left align:

    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_FILL).Align(Amend.LEFT))
    PHP:
    Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_FILL, "align"=>Amend.LEFT)))
    jQuery:
    Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_FILL, align:Amend.LEFT}})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_FILL).align(Amend.LEFT)))
    iOS:
    AmendOption *amendOption = [[AmendOption alloc] init];
    [amendOption transform:250 andHeight:250 andFit:FIT_FILL andAlign:H_ALIGN_LEFT];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image filled to a width and height of 250 pixels with left align

inside

Modifies an image with the mentioned width and height and retaining aspect ratio, then scale down the image to fill inside the image.

Examples of fit inside used with the uploaded jpg image named baby:

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_INSIDE))
PHP:
Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_INSIDE)))
jQuery:
Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_INSIDE}})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_INSIDE)))
iOS:
AmendOption *amendOption = [[AmendOption alloc] init];
[amendOption transform:250 andHeight:250 andFit:FIT_INSIDE];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Image fit inside to a width and height of 250 pixels

face

Fit face crops the image while keeping the face, if no face found it works as fit fill.

For example, the uploaded image named baby fit face to a width of 150 pixels and a height of 200 pixels while retaining the aspect ratio :

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(150).Height(200).Fit(Amend.FIT_FACE))
PHP:
Amend::load("baby", array("transform"=>array("width"=>150, "height"=>200, "fit"=>Amend.FIT_FACE)))
jQuery:
Amend.load("baby", {transform:{width:150, height:200, fit:Amend.FIT_FACE}})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(150).height(200).fit(Amend.FIT_FACE)))
iOS:
AmendOption *amendOption = [[AmendOption alloc] init];
[amendOption transform:250 andHeight:250 andFit:FIT_FACE];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Image fit face to a width of 150 and a height of 200 pixels

Fixed coordinates cropping

You can specify the region of a original image to crop by passing the x and y coordinates of the region with the width and height. Use this method only when you are sure about the correct cropping coordinates.

For example, to transform the sample image so that only 50% portion of image is visible, the image is cropped to a 200x200 region starting at the coordinate x = 680 and y = 450:

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().X(680).Y(450).Width(200).Height(200))
PHP:
Amend::load("baby", array("transform"=>array("width"=>200, "height"=>200, "x"=>680, "y"=>450)))
jQuery:
Amend.load("baby", {transform:{width:200, height:200, x:680, y:450}})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(200).height(200).x(680).y(450)))
iOS:
AmendOption *amendOption = [[AmendOption alloc] init];
[amendOption transform:200 andHeight:200 andOriginX:680 andOriginY:450];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
200x200 image generated with fixed-coordinates cropping

Control align

The align parameter (align in URLs) is used to decide a location in the image that is used as the focus for the transformation:

  • For certain cropping modes, align specifies which part of the original image to focus, when the resulting image is smaller than the original or the proportions do not match.

The basic align value is specified by giving a direction to focus on: left, right, top, bottom, or center (the default value).

For example, the uploaded jpg image named baby filled to a width and height of 250 pixels while retaining the aspect ratio:

  • Original image:
    .Net:
    Amend.Init().Load("baby")
    PHP:
    Amend::load("baby")
    jQuery:
    Amend.load("baby")
    Android:
    Amend.with(context).load("baby")
    iOS:
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet];
    Original image
  • With align set to left:
    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_FILL).Align(Amend.LEFT))
    PHP:
    Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_FILL, "align"=>Amend.LEFT)))
    jQuery:
    Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_FILL, align:Amend.LEFT}})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_FILL).align(Amend.LEFT)))
    iOS:
    AmendOption *amendOption = [[AmendOption alloc] init];
    [amendOption transform:250 andHeight:250 andFit:FIT_FILL andAlign:H_ALIGN_LEFT];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image filled to a width and height of 250 pixels with left align
  • With align set to right:
    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_FILL).Align(Amend.RIGHT))
    PHP:
    Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_FILL, "align"=>Amend.RIGHT)))
    jQuery:
    Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_FILL, align:Amend.RIGHT}})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_FILL).align(Amend.RIGHT)))
    iOS:
    AmendOption *amendOption = [[AmendOption alloc] init];
    [amendOption transform:250 andHeight:250 andFit:FIT_FILL andAlign:H_ALIGN_RIGHT];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image filled to a width and height of 250 pixels with right align

Adjusting image quality

This parameter performs compression; quality level is passed (ranging between 1 to 100) to reduce the size of the image. However resizing the image also results in reducing the size.

For example, reducing the quality of the uploaded JPEG image named baby to 60 results in a low file size compared to the original file size with a barely noticeable reduction in visual quality:

.Net:
Amend.Init().Load("baby", new AmendOptions().Quality(50))
PHP:
Amend::load("baby", array("quality"=>60))
jQuery:
Amend.load("baby", {quality:60})
Android:
Amend.with(context).load("baby", new AmendOptions().quality(60))
iOS:
AmendOption *amendOption = [[AmendOption alloc] init];
[amendOption quality:60];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Image with quality set to 60

Modify image shape and style

Amend also supports various transformations for modifying the shape and style of images. This section contains information on the following topics:

Rounding corners and creating circular images

Designs having requirement of rounded corner or circular images can be easily built using this feature. Be it profile picture in a circular template or rounded corner image for design, serve with this feature.

Transforming an image to a rounded corner is done using the radius parameter (r in URLs) set to the number of pixels the radius of all four corners should be.

The following example transforms an uploaded JPEG to a 250x200 PNG with rounded corners of 20 pixels. Note that the conversion to PNG is needed for supporting a transparent background (the PNG format produces larger files than the JPEG format:

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_FILL)).Radius(25))
PHP:
Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_FILL) "radius"=>25))
jQuery:
Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_FILL}, radius:25})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_FILL)).radius(25))
iOS:
AmendOption *amendOption = [[AmendOption alloc] init];
[amendOption transform:100 andHeight:100 andFit:FIT_FILL];
[amendOption crop:25];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
250X250 PNG with rounded corners set to 20 pixels

Amend supports cropping images to the shape of a circle. Just by passing max as the value of the radius parameter.

The following example transforms an uploaded JPEG to a 150x100 PNG with maximum radius cropping, which generates the ellipse shape with a transparent background:

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_FILL)).Radius(Amend.MAX))
PHP:
Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_FILL) "radius"=>Amend.MAX))
jQuery:
Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_FILL}, radius:Amend.MAX})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_FILL)).radius(Amend.MAX))
iOS:
AmendOption amendOption = [[AmendOption alloc] init];
[amendOption  transform:200 andHeight:100 andFit:FIT_FILL];
[amendOption crop:cropMax];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
250x250 circle image

As the following example shows using face align with max radius to deliver circular image:

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(250).Height(250).Fit(Amend.FIT_FACE)).Radius(Amend.MAX))
PHP:
Amend::load("baby", array("transform"=>array("width"=>250, "height"=>250, "fit"=>Amend.FIT_FACE) "radius"=>Amend.MAX))
jQuery:
Amend.load("baby", {transform:{width:250, height:250, fit:Amend.FIT_FACE}, radius:Amend.MAX})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(250).height(250).fit(Amend.FIT_FACE)).radius(Amend.MAX))
iOS:
AmendOption amendOption = [[AmendOption alloc] init];
[amendOption  transform:200 andHeight:100 andFit:FIT_FACE];
[amendOption crop:cropMax];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
100x100 face thumbnail with max radius

Rotating images

Rotate image by just passing value of arbitrary angle in degrees with the rotate parameter. A positive integer value rotates the image clockwise, and a negative integer value rotates the image counter clockwise.

Examples with the uploaded image named baby (all images are also scaled down to a width of 100 pixels):

Rotate the image by 90 degrees:

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(200)).Rotate(90))
PHP:
Amend::load("baby", array("transform"=>array("width"=>200) "rotate"=>90))
jQuery:
Amend.load("baby", {transform:{width:200}, rotate:90})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(200)).rotate(90))
iOS:
AmendOption amendOption = [[AmendOption alloc] init];
[amendOption  transform:200];
[amendOption rotate:90];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Image rotated 90 degrees clockwise

Fliping images

Flip an image byx, y or xy. .

Examples with the uploaded image named baby:

Filp the image at x - axis:

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Height(200)).Flip(Amend.X))
PHP:
Amend::load("baby", array("transform"=>array("height"=>200) "flip"=>Amend.X))
jQuery:
Amend.load("baby", {transform:{height:200}, flip:Amend.X})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().height(200)).flip(Amend.X))
iOS:
AmendOption amendOption = [[AmendOption alloc] init];
[amendOption  transformHeight:200];
[amendOption flipType:FLIPX];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Image flipped on x axis

Applying image effects

Amend supports a large number of effects that can be applied to change the visual appearance of delivered images. You can also apply multiple effects to an image by applying each effect as a separate transformation.

Color balance and level effects

Effects: brightness, contrast, grayscale, invert

The mentioned effects help in changing the appearance of an image by working on the parameters like color intensity.

Examples:

  1. Converting the baby image to grayscale:
    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Height(200)).Grayscale(true))
    PHP:
    Amend::load("baby", array("transform"=>array("height"=>200), "grayscale"=>true))
    jQuery:
    Amend.load("baby", {transform:{height:200}, grayscale:true})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().height(200)).grayscale(true))
    iOS:
    AmendOption amendOption = [[AmendOption alloc] init];
    [amendOption  transformHeight:200];
    [amendOption grayScale];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image in grayscale
  2. Increasing brightness of the baby image to 50 and contrast to 10:
    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Height(200)).Effect(new Effect().Brightness(50).Contrast(10)))
    PHP:
    Amend::load("baby", array("transform"=>array("height"=>200), "effect=>array("brightness"=>50,"contrast"=>10))
    jQuery:
    Amend.load("baby", {transform:{height:200}, effect:{brightness:50,contrast:10}})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().height(200)).effect(new Effect().brightness(50).contrast(10)))
    iOS:
    AmendOption amendOption = [[AmendOption alloc] init];
    [amendOption  transformHeight:200];
    [amendOption brightness:50  andContrast:10];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image with brightness 50
  3. Converting the baby image to invert:
    .Net:
    Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Height(200)).Invert(true))
    PHP:
    Amend::load("baby", array("transform"=>array("height"=>200), "invert=>true)
    jQuery:
    Amend.load("baby", {transform:{height:200}, invert:true})
    Android:
    Amend.with(context).load("baby", new AmendOptions().transform(new Transform().height(200)).invert(true)))
    iOS:
    AmendOption amendOption = [[AmendOption alloc] init];
    [amendOption  transformHeight:200];
    [amendOption invert];
    [[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
    Image inverted

Image and text overlays

Overlays and text can be added dynamically to any location on an image while altering them to fit into your requirements. The section can be broadly segregated as given below:

Adding image overlays

Simply add an image as an overlay to the other or the base image using the overlay parameter with the name of the base image.For example, adding an overlay of the image called amend to the jpg image named baby.

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(500)).Overlay(new AmendOverlay().Image("amend").X(10).Width(100)))
PHP:
Amend::load("baby", array("transform"=>array("width"=>500) "overlay"=>array("image"=>"amend","x"=>10,"width"=>100)))
jQuery:
Amend.load("baby", {transform:{width:500}, overlay:{image:"amend", x:10, width:100}})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(500)).overlay(new AmendOverlay().image("amend").x(10).width(100)))
iOS:
AmendOption amendOption = [[AmendOption alloc] init];
[amendOption  transform:500];
[amendOption insertImage:@"amend" andPositionX:10 andPositionY:10];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Image with overlay

Adding text overlays

You can also overlay a text caption to an image by making use of the overlay parameter. The additional values required while passing this parameter are size and the text string to be overlaid on the base image. For example, to overlay the text string "Amend" in the size of 30 pixels: ot-Amend,size_30.

.Net:
Amend.Init().Load("baby", new AmendOptions().Transform(new Transform().Width(500)).Overlay(new AmendOverlay().Text("Amend").Size(30).X(10).Y(10)))
PHP:
Amend::load("baby", array("transform"=>array("width"=>500), "overlay"=>array("text"=>"Amend","size"=>30,"x"=>10,"y"=>10)))
jQuery:
Amend.load("baby", {transform:{width:500}, overlay:{text:"Amend",size:30,x:10,y:10}})
Android:
Amend.with(context).load("baby", new AmendOptions().transform(new Transform().width(500)).overlay(new AmendOverlay().text("Amend").size(30).x(10).y(10)))
iOS:
AmendOption amendOption = [[AmendOption alloc] init];
[amendOption  transform:500];
[amendOption insertText:@"Amend" andPositionX:10 andPositionY:10 andSize:30 andStyle:0 andColor:4];
[[[Amend alloc] init] getImage:[@"baby" setOn:self.ivProcessedImageOutlet withOption:amendOption];
Adding dynamic text to image

Notes: Text which consist of special characters need to be modified while applying the text overlay parameter. These special characters, which otherwise could not be overlaid as it is through the URL must be escaped with % with the text string (for example, replacing ? with %3F and using %20 for spacing between words). Amend SDK helper methods does it automatically, however the mentioned methods need to be followed in the manual URL method. .

Possible styling parameters include:

  • size - Required font size in pixels. e.g., 12
  • style - Optional font style. Possible values: normal (default value) or italic. e.g., italic
  • x_coordinate - Optional text alignment from x axis. e.g., x_20
  • y_coordinate - Optional text alignment from y axis. e.g., y_20
  • c - Optional text color. e.g., c_red

Fetching images from remote locations

Till now you have seen several examples signifying the methods to modify the local images uploaded to Amend. But apart from this few more kind of images can be modified using Amend:

  • Online images i.e. the images which already exist somewhere online and could be accessed through the public HTTP, HTTPS or FTP URLs.

Fetch image

Images could be fetched from exiting online locations through their URLs. The process is felicitated through a CDN Networks and also reduce the load on the servers thereby decreasing the hosting expenses and at the same time making the transformations and modifications on the go.

To create a Fetch URL, simply prepend the following prefix to the URL of the image: http://amend.cloud/<amend_name>/fetch/

For example, to fetch the following image from Trendsetterz:

http://trendsetterz.co.in/img/team/team-8.jpg

Access the following Amend fetch URL (this example uses Amend's test account):

.Net:
Amend.Init().Fetch("http://trendsetterz.co.in/img/team/team-8.jpg")
PHP:
Amend::fetch("http://trendsetterz.co.in/img/team/team-8.jpg")
jQuery:
Amend.fetch("http://trendsetterz.co.in/img/team/team-8.jpg")
Android:
Amend.with(context).fetch("http://trendsetterz.co.in/img/team/team-8.jpg")
iOS:
[[[Amend alloc] init] getImageByURL:[@"http://trendsetterz.co.in/img/team/team-8.jpg" setOn:self.ivProcessedImageOutlet];
Remote image retrieved and delivered using fetch

Images can also be fetched from online remote locations and can be delivered back after applying the required transformations or modifications directly to the image URL. You simply need to add the modification parameters directly to the URL between the fetch prefix and the image URL:

.Net:
Amend.Init().Fetch("http://trendsetterz.co.in/img/team/team-8.jpg", new AmendOption().Transform(new Transform().Width(200).Height(200).Fit(Amend.FIT_FACE)).Radius(Amend.MAX))
PHP:
Amend::fetch("http://trendsetterz.co.in/img/team/team-8.jpg", array("transform"=>array("width"=>200, "height"=>200, "fit"=>Amend.FIT_FACE),"radius"=>Amend.MAX))
jQuery:
Amend.fetch("http://trendsetterz.co.in/img/team/team-8.jpg", {transform:{width:200,height:200,fit:Amend.FIT_FACE},radius:Amend.MAX})
Android:
Amend.with(context).fetch("http://trendsetterz.co.in/img/team/team-8.jpg", new AmendOption().transform(new Transform().width(200).height(200).fit(Amend.FIT_FACE)).radius(Amend.MAX)))
iOS:
AmendOption amendOption = [[AmendOption alloc] init];
[amendOption transform:200 andHeight:200 andFit:FIT_FACE];
[amendOption cropMax];
[[[Amend alloc] init] getImageByURL:[@"http://trendsetterz.co.in/img/team/team-8.jpg" setOn:self.ivProcessedImageOutlet];
Remote image retrieved and delivered using fetch