Dopo aver scelto l'immagine dai tuoi file, seleziona la parte di interesse muovendo i 4 vertici o spostando l'intera selezione.
Tenendo premuto SHIFT la selezione diventa quadrata.
Puoi ridimensionare il ritaglio impostando una nuova dimensione di altezza e/o larghezza nel riquadro sotto.
Alla fine del ridimensionamento (o spostamento) verrà generata l'anteprima del ritaglio, al di sotto dell'editor. La qualità del ridimensionamento dell'anteprima potrebbe essere bassa se l'immagine scelta è molto grande, per ragioni di efficienza del browser.
Il plugin dipende da jQuery.
I browser supportati sono: Chrome, Firefox, Opera, IE10+, Safari 7.1+
Nella sezione head del documento aggiungiamo il link allo script base:
<head>
...
<script src="path/to/jquery.js"></script>
<script src="JS/editor.1.6.1.min.js"></script>
...
</head>
Vengono forniti gli stili base per avere tutto up'n'running:
<head>
...
<style>
#canvas-wrap{
display:block;
position:relative;
}
#canvas-editor{
display:block;
position:absolute;
}
#canvas-image{
display:block;
}
#canvas-editor.move{
cursor: move;
}
#canvas-editor.v0{
cursor: nw-resize;
}
#canvas-editor.v1{
cursor: ne-resize;
}
#canvas-editor.v2{
cursor: se-resize;
}
#canvas-editor.v3{
cursor: sw-resize;
}
</style>
...
</head>
Nella sezione body del documento aggiungiamo invece i canvas e il file input:
<body>
...
<input id="file-input" type="file">
...
<div id="canvas-wrap">
<canvas id="canvas-editor"></canvas>
<canvas id="canvas-image"></canvas>
</div>
...
</body>
L'oggetto CE prende in input i parametri sotto elencati, tutti opzionali:
//first time CE.init() accepts selectors (unique ids). After that, they cannot be changed anymore!
CE.init({
//selectors. see HTML section
input : '#file-input',
wrap : '#canvas-wrap',
img : '#canvas-image',
editor : '#canvas-editor',
//callback if image is succesfully read from the file input (success = true), or fail (success = false)
oninputchange : function(success){},
//callback for crop ends or selection move ends
onselectend : function(){},
//max width of displayed image in the editor
maxw : 900,
//max height of displayed image in the editor
maxh : 580,
//initial position of the crop: x, y, width, height [%]
iselection : [0.1, 0.1, 0.8, 0.8],
//define area where nodes (e.g. vertex) are activated when clicking
nodeRadius : 30,
//[ms] to next crop update when moving mouse
framerate : 30
});
Tutti i callback sono a cura del programmatore.
Si può avere un esempio del loro utilizzo in questa pagina (ispeziona con strumento sviluppatori).
I parametri interessanti per i callback personalizzati sono:
CE.canvas.w; //width of editor's canvas
CE.canvas.h; //height of editor's canvas
CE.img.wrap; //[jquery element] editor's container
CE.img.el; //[jquery element] editor's canvas containing original image
CE.canvas.el; //[jquery element] editor's canvas containing crop selection
CE.img.image; //original Image() element from the file input
CE.sel.getReal(w,h); //return the crop position and dimensions, related to original image.
//"w" and "h" are the final dimensions:
//if "w" and "h" aren't 0, the resulting cropped selection will be stretched to "w" and "h".
//if "w" or "h" are 0, the resulting dimensions "nw" and "nh" are calculate proportionally.
//if "w" and "h" are both 0, "nw" and "nh" are the same as "ow" and "oh".
/* from CE.sel.getReal() you get this object:
{
ox : (int), //original crop x-position
oy : (int), //original crop y-position
ow : (int), //original crop width
oh : (int), //original crop height
nw : (int), //new scaled crop width
nh : (int) //new scaled crop height
}
*/