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:

Image Zoom – there are many jQuery zoom plugins like this and while this works for some use cases, it does not work well with crop functionality. It also does not let you set the zoom level so I would not say it is optimal for photo editing. The same issue applies to a loupe, ql zoom, or a tile zoom.
HTML5 mouse wheel event – Simple example on how to zoom an image with a mousewheel. While this shows how to use the mouse wheel event, it isn’t very helpful to our image editor as we will be transforming the canvas element which cannot just get new dimensions with CSS. Jwindowcrop has the same problem.
scroller – accelerated panning and zooming for HTML and Canvas. This looks really good in terms of a zoom JavaScript solution but I do not require most of the features.
jQuery-PanZoom – jQuery plugin to pan and zoom an image within a parent div. It does not use a mousewheel.
jquery.panzoom – jQuery plugin for panning and zooming elements using CSS3. It has mobile and SVG support and you can use a mousewheel to zoom to a focal point. This is my favorite zoom plugin.
Canvas Zoom to Cursor – awesome zoom script that uses HTML5 CANVAS context to enable zoom via mouse and supports a mousewheel, mouse clicks, and drag events to move the image.
viewport-crop – a proof of concept that shows a different take on image cropping, zooming an actual image and dragging the selection into a viewport
cropzoom – zoom, rotation, and crop all in one but the crop selection is persistent and the zoom and rotation controls use separate UI elements.
croppic – looks really nice from first glance but it resizes an image within a container using plus and minus buttons and then allows you to crop the image via the container. Personally, this is not my favorite cropping experience.
imgAreaSelect – a jQuery plugin for selecting a rectangular area of an image.
UvumiTools Crop – a nice crop tool for images but it does not seem to leverage CANVAS which is going to be needed for other image editing operations.
cropper – A jQuery image cropping plugin that looks very promising but does not work with Canvas
HTML5 Image Cropping – simple selection and crop tool that does use CANVAS but is very basic and always keeps the selection element on the image.
Jcrop – is a very popular JavaScript image selection and crop jQuery plugin. You can see more examples here. I really like the API and the plugin is done well but I wish it would not wrap the image or canvas element around its own elements.
canvascropper – simple, small, and works with HTML5 Canvas. I love how it uses doubleclick for enabling crop and for the actual cropping.
evroneCrop – JavaScript crop plugin, based on canvas and written with CoffeeScript. It comes with a preview to show the selection.
html5 image crop tool – one of my favorite canvas crop scripts as it really shows you how easy it is to implement image cropping

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