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

image2