Data, Maps, Usability, and Performance

Image Zoom, Drag, and Crop with HTML5

Last updated on September 22, 2015 in Development

html5 canvas image zoom and crop

I am on a mission to create an amazing HTML5 image editor and want to write a little about zoom, crop, and drag or pan. These are 3 features with a lot of overlap, depending on the design choice and implementation, so I would like to first consider the user experience. Panning or dragging the image, or a selection of the image, is going to be a clear need that is shared by both zoom and crop. If I click on an image and drag, am I moving the image or selecting an area to crop? One way to fix this dilemma is to only allow one of these operations at a time, but that requires extra user clicks. An alternative is to drop a special “crop selection area” on the image at all times and allow resize or drag of that element while dragging outside of that area moves the image. What is the best user experience?

Zoom could be implemented with plus or minus buttons that change the scale of an image or a canvas object. I have also seen dropdowns that let you set a zoom level in percentages but both of these implementation require extra unnecessary clicks. They also require shifting the mouse between clicking and dragging of the image, so the act of zooming in and out seems to have a better user experience with a mousewheel implementation. Cropping an image, in my opinion, should also work using a mouse selection and personally, I would vote for enable/disable action instead of keeping a persistent selection area on the image at all times. So, you can use zoom at all times but cropping an image requires selecting the crop tool. Finally, how do you zoom to a mouse cursor and does the zoom actually change image data via html5 CANVAS or should it just manipulate the CSS transform property and if so, how would the CSS change affect cropping?

Ideally, zooming is a CSS3 transform change because I want to enable zoom functionality for the purpose of looking closer at a certain area of an image and thus, I don’t really care about re-scaling and re-painting the image on canvas. However, since the crop tool needs to be selected, it could always zoom out at first so it doesn’t really matter if the zoom works via transform or redrawing as I will be bringing it back to the original size before allowing the crop operation. Finally, since this is part of a larger project that requires HTML5 CANVAS, zoom scripts that modify CSS width and height properties of IMG tags will not meet my requirements. Either way, let’s explore what is out there in terms of image zoom and crop plugins, scripts, and demos:

From the list above, I really like the simplicity of imgareaselect and here are some imgareaselect jsfiddle examples. In terms of zooming to a mouse cursor, I love jQuery.panzoom as it uses CSS transforms and matrix functions for speed and efficiency. To make these work together, we need to have control that enables and disables the crop, or enables/disables the zoom, as crop selection and image panning use the mouse click event.

Here is an example of how these 2 plugins work together with an image loaded onto a CANVAS element: Zoom and Crop with HTML5.

If you are already using some HTML5 Canvas JavaScript frameworks like KineticJS or FabricJS, the following zoom and crop demos and plugins might be useful:

darkroomjs – crop and rotate with FabricJS
FabricJS crop zoom demo
zoom, move, and rotate with FabricJS
zoom and drag with FabricJS
KineticJS image resize
KineticJS image crop with selection area

Update:

OpenSeadragon – open-source, JavaScript viewer for zoomable images on mobile or desktop

External:

jQuery PhotoShoot Plugin
KineticJS HTML5 Tutorials
Tracking History with HTML5 Canvas
KineticJS and CamanJS with draggable elements
FabricJS Painter
Jquery Alpha Image – change selected colours to transparent on your image
bitmapdata.js – HTML5 Canvas API implementation of the AS3 BitmapData class
jQuery-Fakecrop: Cropping Images with jQuery
photo zoom-out effect with jquery
JavaScript and the scroll wheel
Smooth image zooming with CSS transitions
Smoothzoom – jQuery plugin to smoothly zoom inline images
Get Mouse Coordinates on click
jQuery wheelzoom
jQuery zoom
smartJQueryZoom

Tags: , ,

Facebook Twitter Hacker News Reddit More...