RotationZoomer jQuery plugin

This plugin allows you to easily rotate and zoom images/canvas elements in simplistic fashion. It offers rotation in place without worrying about padding or margin. Elements can only be rotated by 90 degree angles.

By default the elements will become responsive = their widths will be set to maximum width of their containing parent element. This is by design to target mobile devices first, it can be disabled via option.

Once you call the function on image or canvas element, that element gets replaced in DOM by new canvas element where the actual manipulation occurs.

The source is written in CoffeeScript v. 1.11.0 and composed & minified using coffeebar. The images are by artist Matthew Divito and are taken from his personal webpage.

Compatibility

For now, the plugin is only tested against newest browsers (Safari 10 & Chrome 50). The version of jQuery used is 3.1.1.

Usage

Include the library in your script tag (minified version is called rotation-zoomer.min.js) or use this rawgit CDN link instead. It points to newest version in master branch.

The behaviour is as expected from any other jQuery plugin. This is the most simple configuration:

          
            $('#example1').rotationZoomer();

In this configuration without any arguments you get just default behaviour. This default behaviour is just zoom function, no rotation (you need to specify rotation buttons for that). The zoom window is disabled when you click outside of it.

Configuration

Following options can be specified:

rotation: (Integer: [0, 90, 180, 270] - Starting rotation (in degrees). Default is 0.
rotateButton: (ID of HTML element) - Button that rotates canvas clock-wise
antiRotateButton: (ID of HTML element) - Button that rotates canvas anti clock-wise
zoomerEnabled: (Boolean) - Enable or disable zooming functionality. Default is true.
zoomerWidth: (Integer) - The width (converted to px) of the zoomer window. Default is 150.
zoomerHeight: (Integer) - The height (converted to px) of the zoomer window. Default is 100.
scale: (Float, Integer) - The amount of scale factor that is applied to zoomer. Default is 2.5.
zoomerBorderWidth: (Integer) - Border width of zoomer window (converted to px). Default is 1.
zoomerBorderColor: (String, Hexcode) - Border color of zoomer window.
zoomerBackgroundColor: (String, Hexcode) - The fill of zoomer window. It's used when the zoomer window is on the edge of canvas, otherwise it'd be transparent. Default is white.
closeOnClick: (Boolean) - When zoomer window is clicked, it is also closed. Default is false.
closeOnClickOutside: (Boolean) - When outside of zoomer window is clicked, it will be closed. Default is true.
showZoomerAfterRotation: (Boolean) - When you leave zoomer window opened and you rotate image, the zoomer window will be kept open in new recalculated position. Default is true.
responsive: (Boolean) - Specify whether width of image/canvas should be stretched to maximum of its parent. Default is 'true'.
cursorZoomIn: (String) - CSS property of cursor on areas that can be zoomed in (canvas without zoomer window opened). Default is 'zoom-in'.
cursorZoomClose: (String) - CSS property of cursor indicating that zoomer window will be closed. Default is 'zoom-out'.
cursorZoomNoAction: (String) - CSS property of cursor indicating that nothing will happen on click. Default is 'default'.

Examples

Zooming and rotating

            
              $('#example2').rotationZoomer({
                zoomerWidth: 350,
                zoomerHeight: 250,
                zoomerBorderColor: 'orange',
                scale: 5.0,
                rotation: 180,
                closeOnClick: true,
                rotateButton: '#rotateButton',
                antiRotateButton: '#antiRotateButton'
              });

Multiple images with set widths

IMG tags have set widths, canvas keeps the same size and constraints to correct ratio.

Set responsive option to false to retain fixed widths.

            
              $('#set01, #set02, #set03').rotationZoomer({
                rotateButton: '#rotateButton02',
                antiRotateButton: '#antiRotateButton02',
                responsive: false,
                scale: 1.8,
                zoomerWidth: 100,
                zoomerHeight: 60,
                zoomerBorderWidth: 2,
                zoomerBorderColor: 'white',
                closeOnClick: true
              });

250px

300px

450px

PDFs & pages

You can also use other canvases as target element. Here it's demonstrated with multiple-paged PDF document rendered via PDFjs library which outputs the pages as canvas elements.

          
            var canvasContainer = document.getElementById('pdf');
            var scale = 1.5;

            function renderPage(page) {
                var viewport = page.getViewport(scale);
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                  canvasContext: context,
                  viewport: viewport
                };
                canvasContainer.appendChild(canvas)
                page.render(renderContext).then(function() {
                  $(context.canvas).rotationZoomer({
                    closeOnClick: true,
                    rotateButton: '#pdfRotate'
                  });
                });
            }

            PDFJS.getDocument('compressed.tracemonkey-pldi-09.pdf').then(function(pdf) {
              for (var num = 1; num <= 3; num++) {
                pdf.getPage(num).then(renderPage);
              }
            });