Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

README.md

CwCrop

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.

Screenshot

Demo

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

Docs

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

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.

You can’t perform that action at this time.