Image Manipulation

Image Manipulation is an art of transforming an image in a way you desire it to be exhibited as, rather than what the original image exhibits.

In applications related to rails manipulation has to be done while uploading the image as per the requisites of the application like back-ground, color and size, which would give a unique look to the applications.

We can achieve this by using ImageMagick. 

• ImageMagick is a software suite to create, edit, compose, or convert bitmap images.

• We can use ImageMagick to re-size, flip, mirror, rotate, distort, shear and transform images, adjust image colors, apply various special effects, or draw text, lines, polygons, ellipses and Bézier curves.

Features of ImageMagick : 

• Format conversion: convert an image from one format to another (e.g. PNG to JPEG).
• Transform: re-size, rotate, crop, flip or trim an image.
• Transparency: render portions of an image invisible.
• Draw: add shapes or text to an image.
• Decorate: add a border or frame to an image.
• Special effects: blur, sharpen, threshold, or tint an image.
• Animation: create a GIF animation sequence from a group of images.
• Text & comments: insert descriptive or artistic text in an image.
• Image identification: describe the format and attributes of an image.
• Composite: overlap one image over another.
• Montage: juxtapose image thumbnails on an image canvas.

Add gem rmagick for ruby or rmagick4j for jruby in your gem file.

Using paperclip convert_options we can give options for background-color, border-color, quality, re-size, shadow etc.,

Image Crop :

Is implemented using paperclip and jcrop

We can directly call jcrop using id/class. Then we can get the new height and width.

$(function() {

$(‘#cropbox’).Jcrop();

});

For default crop size

$(function() {

$(‘#cropbox’).Jcrop({

onChange: update_crop,

onSelect: update_crop,

setSelect: [0, 0, 500, 500],

aspectRatio: 1

});

});

For Update Crop Size

function update_crop(coords) {

$(‘#crop_x’).val(coords.x);

$(‘#crop_y’).val(coords.y);

$(‘#crop_w’).val(coords.w);

$(‘#crop_h’).val(coords.h);

}

Reference: http://railscasts.com/episodes/182-cropping-images?view=asciicast

In screen-shot attached Per-view is showing the selected crop part.

Image Background:

In our model we can add convert_option for the image field and we can set the required color as background.

For example given pink.

:convert_options => {

:all => ‘-background HotPink -alpha Background’

}

Attachments shown for white and pink background.

Image Dimension Validation:

Using Paperclip::Geometry we can set the image width and height to some value.

def file_dimensions(width = 100, height = 100)

dimensions = Paperclip::Geometry.from_file(photo.queued_for_write[:original].path)

unless dimensions.width < width && dimensions.height < height

errors.add :photo, “Width must be #{width}px and height must be #{height}px”

end

end

Reference:http://stackoverflow.com/questions/5454561/rails-paperclip-how-to-check-the-image-dimensions-before-saving

Image Resolution:

We can set image resolution using convert_options → quality option.

Using this option we only can set resolution.

:convert_options => {

:all => ‘-quality 75’

}

Here quality can be set in range of 0-100.

Reference:

http://www.imagemagick.org/script/command-line-options.php

http://www.imagemagick.org/script/convert.php

Conclusive Note:

The Image Manipulation is hence helpful in transforming the images as per the requirements of the user and hence making them feel their applications or images are even more attractive.

This allows to crop, rotate, re-size the images as per our requirements and has a wide range of applicability in these days.

Read More :

• An Introduction to Rails API
• A Simple Way To Increase The Performance Of Your Rails App
• Real-time Framework
• How to install Ruby on rails

With ingenious solutions, progressive business values, and proven track record, RailsCarma is best suited to help you with all your development needs. Our development process is established heavily on unrelenting attention to details, including quality, design and excellence. We convert your ideas into reality. Connect to us through our Contact Us page.