You can resize or crop the images in various ways. Doing so is done by simply directing your users to an address URL that includes the transformation instructions. You can change the required transformations at any time and all transformed images will be created on-demand (lazily) and delivered to your users. You can also give effects to images such as sepia, negate etc. You can also compress image using JPEG compression.
You can use images from two sources. Either uploaded image can used or you can also specify image url. Parameter which is used to provide image source is path. Path parameter can be set by following ways.
Setting path for allready uploaded image path=sample.jpg
Setting path as url of image path =http://indianapublicmedia.org/arts/files/2012/04/sample-gates-9-940x626.jpg
Following examples show how to access uploaded image and remote images by providing url
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg
You can resize image by providing image width or height. Other dimension will be calculated form provided dimension and aspect ratio of image.
For example following url aks for image width 400 in this case height is automatically calculated. In second example only height is provided.
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&width=400,
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=400
You can also resize image by providing image width or height in fraction. Other dimension will be calculated form provided dimension and aspect ratio of image.
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&width=0.6
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=0.3
If you provide both the height and width of required image then provided dimension may not keep aspect ratio. So to keep aspect ratio six scaling modes are provided. For selecting a mode you need to use mode parameter. The default mode is pad mode and default pad color is white. Here are the supported modes and some examples:
Change image size to fit in the given width & height while retaining original proportions. All original image parts are visible. Both width and height dimensions of the transformed image must not exceed the specified width & height. However, they may be smaller than the specified values in order to keep the original proportion.For example, fitting the sample image 300x300:
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=300&width=300&mode=fit
The generated image is actually 300x200 in order to keep the original proportions 1.5. Fitting the image to 300x300 will actually generate a 300x200 image (retaining the 1.5 aspect ratio)
Create an image with the exact given width and height while retaining original proportions. Use only part of the image that fills the given dimensions. Only part of the original image might be visible if the required proportions are different than the original ones.
For example, filling a 300x300 rectangle based on the sample image:
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=300&width=300&mode=fill
The generated image is exactly 300x300 while not all flowers are visible.
When using the 'fill' mode, you can specify which part of the original image to use for filling the required dimensions in case the proportions do not match. You can do so by using the orientation parameter, which defined which part of the image to take.
The supported gravity values are: top, bottom, left, right, top-left,top-right, bottom-left, bottom-right.
In the example above, no orientation was specified, so the default 'center' orientation was used. In the following example we fill a 300x100 rectangle while using top corner of the sample image:
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=100&width=300&mode=fill&orientation=top
The limit mode is used for creating an image that does not exceed the given width or height. If the original image is smaller than the given limits, the generated image is identical to the original one. If the original is bigger than the given limits, it will be resized while retaining original proportions (similar to the 'fit' mode in this case).For example, limiting the sample image to 300x300 will generate an image identical to the 'fit' mode:
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=300&width=300&mode=limit
Specifying width & height bigger than the original will simply return the original image:
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=3000&width=3000&mode=limit
Resize the image to fill the given width & height while retaining original proportions.If proportions of the originals image do not match the required ones, pad the image for reaching exactly the required size. You can specify the 'orientation' to selecting which part of the original image to use for filling the rectangle.
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=300&width=300&mode=pad&orientation=bottom
You can also provide pad color. The parameter used for providing color is 'color'. Color can pe give in 3 ways
Color name ex. blue, green, violet
Hex values color=0xffddee
RGB values ex color=r_122,g_233,b_145
For example: Resizing image to 300*300 with pad color=yellow
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=300&width=300&mode=pad&color=yellow
The 'crop' mode is used to extract only part of a given width & height out of the original image. The original proportions are retained and so is the size of the graphics. You can specify the orientation to use for selecting which image part to take.
For example, generating a 300x300 image based on the 300x300 top left pixels of the original image:
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=300&width=300&mode=crop&orientation=top-left
Another way to crop image is by providing value of 'x' and 'y' parameter and required height and width. You can specify either height or width or both.
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=300&width=300&mode=crop&x=20&y=30
Transforming an image to a rounded version is done using the 'radius' parameter. It accepts the number of pixels the radius of all four corners should be.
The following example transforms an uploaded JPG to a 300x200 with rounded corners of 30 pixels.
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&height=300&width=200&mode=fit&radius=30
Various effect can be applied to image. To select effect 'effect' parameter is used. Provided effects are sepia, grayscale, blackwhite, negate, oilpaint, pixelate, brightness.The following example gives sample.jpg image a sepia effect
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&effect=sepia
Image can be rotated using angle parameter. You can specify angle in degrees. Positive value of angle will rotate image clockwise and viceversa.Also you can specify modes.Two modes are provided vflip and hflip. Modes should also be assigned to angle parameter.
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&angle=10
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&angle=hflip
Static or dynamic image are uploaded to Cloudinary in various formats. You might want to convert them for displaying in your web site in your desired format.
If you know you display photos and you want them to load quickly, you might want to use a low quality JPG format. If you know the image contains a drawing with only a few colors, then the GIF format might suite you best. When you need to display high quality illustrations with a transparent background the PNG (24 bit) format is the best choice.
You can specify the format as part of the resource name.
For example, if you want to display a GIF version of the uploaded sample JPG file:
http://imagetransformer.herokuapp.com/image/transform?path=sample.jpg&format=gif