Design, CG Graphics & Inspiration
Client-side evroneCrop on Canvas

Client-side evroneCrop on Canvas

In one of my projects it was necessary to do a crop for profile pictures that were loaded by users. Standard decisions, such as Jcrop, after a selection of the area send coordinates to the server, and crop images must be carried out already on a server. Meantime, modern browsers already reached the state, when similar actions can be carried out at once on a client. It urged me to write the crop with the use of canvas, which would produce all actions on a client and sent the prepared image as base64 string on a server. Besides the acceleration of work and unloading of server, it similarly will allow us to change user’s profile image on a page at once, without the need to load it from a server.

Technologies and the task

The crop was written on CoffeeScript – small language compilable in JavaScript. It is executed as a plugin for jQuery. After loading of image we implement the crop on it – over the image it will draw a canvas with the ability to select the area. After every change of the distinguished area a new picture is written down in data images and it is possible easily to get the access to it from the outside. The crop must allow including preview, setting the fixed relation of sides and setting a selection right after activating. And, certainly, it must work in all major browsers.

Realization

The area of selection and corners with the help of which an area can be stretched are presented by the class of Rect. It has nothing special: properties with coordinates, methods for determination of hit into the point and updating of coordinates. The class of EvroneCrop is responsible for creation of canvas, drawing it over a picture, hanging of handlers and saving the cropped picture in data.

To save the picture the transient element of canvas is created, coordinates are calculated taking into account the original size of the image, through the method of drawImage() the distinguished area is being drawn to the temporal canvas, and through the method of toDataURL() from canvas we get a resulting image which as a base64 string can be passed on a server and saved.
In our case for saving it on a server a next code (Ruby) is used:

encoded_image = params[:image].sub('data:image/png;base64,', '')
avatar_io = FilelessIO.new(Base64.decode64(encoded_image))
avatar_io.original_filename = "avatar.png" # any value, the necessary parameter for CarrierWave
Rails.logger.info "IO: #{avatar_io.inspect}"
@user.avatar = avatar_io
@user.save

When creating the crop it is possible to set the next parameters:

$(this).evroneCrop({
    preview: '#preview1',     // selector of  img element, in which to represent the preview
    size: {w: 150, h: 150},   // size of resulting image
    ratio: 1,                 // ratio of sides of the selection area, in this case it is a square
    setSelect: 'center',      // setting of selection by default
    log: true                 // conclusion of debugging information
});

All parameters are optional. Demo.

setSelect can posses the value of center, automatically calculating the center of image and the size of selection, or can accept an object {x :0, y: 0, w: 100, h: 100} and to set a selection in the specified position. If you set the ratio parameter then you need not give the height in an object for setSelect. ratio possesses a number, greater than zero, and fixes sides with the relation of lengths, equal to this number. For example, it is possible to pass 1 for a square or 16/9 for the ratio of sides 16 by 9.

Browsers support

This instrument works in all main browsers – Chrome, Firefox > 4, Safari, Opera >11, IE 9. The next plan is writing of fallback in flash for IE8. It was initially planned to use Google’s excanvas, but that, as appeared, does not give us a toDataURL(); method, which is necessary for our task.

Source Code

  • Arseny Zarechnev,
  • November 29, 2011

SHARE THIS POST

Freelancer with experience. I am interested in everything concerning the sphere of web development, especially the latest trends in HTML5 and CSS3. Front-end developer Evrone.com.

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.