CwCrop 0.71

This is a mootools plugin to select a part of an image to crop it (or whatever). It provides a draggable and resizable layer above an image (showing the current dimensions, optionally) and a "crop"-button, which delivers the coordinates of the selection.

Demo

http://www.chipwreck.de/blog/software/cwcrop/cwcrop-demo/

Docs

http://www.chipwreck.de/blog/software/cwcrop/help/

Details

Author
Mario Fischer
Current version
0.71
GitHub
mariofischer/cwcrop
Downloads
3247
Category
Widgets
Tags
Report
GitHub Issues

Releases

Dependencies

  • core/1.2.3: *
  • more/1.2.3: Drag.*

How to use

Requires

If you use the default settings, the HTML-code found in /Demo/ can simply be used (except filename and sizes of course):

  • A div-structure where the image is present two times as background image
  • Width and Height are set once
  • Here a form is prepared to capture the resulting rectangle dimensions (x,y and w,h)

  • The method ch.doCrop() triggers the onCrop event, which writes the dimensions to the form fields and submits it.

    JS

    ch = new CwCrop({
    onCrop: function(values) {
        document.forms["crop"].elements["crop[x]"].value = values.x;
        document.forms["crop"].elements["crop[y]"].value = values.y;
        document.forms["crop"].elements["crop[w]"].value = values.w;
        document.forms["crop"].elements["crop[h]"].value = values.h;
        document.forms["crop"].submit();
    },
    maxratio: {x: 2, y: 1},
    fixedratio: false
});

More Information

See http://www.chipwreck.de/blog/software/cwcrop/help/ for more information.