Jcrop - Php - and others (colorBox)
Questo articolo nasce da una nostra esigenza sviluppata per fornire un piccolo Tool al nostro Content Management, ovvero avere la possibilità di realizzare una gallery con dei Thumbnail personalizzati.
Jcrop è esattamente ciò di cui avevamo bisogno. Unendo J-Crop con Php e JavaScript siamo arrivati alla creazione del notro tool, che ci permette di ritagliare la parte dell'immagine che più ci piace, in modo veloce senza possibilità di errore.
Nell'esempio oltre a mostrare alcuni parametri di J-crop (decisamente superflui al nostro scopo) abbiamo deciso di vivacizzare con J-ColorBox sia i report di eventuali errori che il feed del Crop finale. Sia la Home Page di J-Crop che il Manuale vi danno tutte le informazioni necessarie - noi le abbiamo solo assemblate e modificate per le nostre esigenze.
Vedremo quindi di seguito solo le parti di codice che abbiamo implementato/modificato.
(html) form con Browse File e due campi W e H (per definire le dimensioni della miniatura)
(php) esegue un controllo sui campi e genera eventualmente degli errori
(jQuery) eventuali messaggi vengono segnalati tramite colorBox in automatico
<!-- Jquery ColorBox dichiarazione-->
<link rel="stylesheet" href="../css/colorbox.css" type="text/css" />
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/colorbox/jquery.colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
// Script per verificare se la var "Msg" è valorizzata e mandarla in stampa automaticamente
$(document).ready(function(){
$(".inline").colorbox({<?php if($HTTP_GET_VARS['Msg']<>""){echo 'open:true, ';}?> width:"50%", inline:true,
href:"#inline_Message"});
});
</script>
........
<div class="inline">
<div class="hidden">
<div id="inline_Message">
<p><strong> ERRORE: </strong> <?php echo $HTTP_GET_VARS['Msg'];?></p>
</div>
</div>
</div>
Per questa parte vedere prima gli esempi di Jcrop API del Manuale ADVANCED qui e Event HANDLER qui
Noi abbiamo combinato/modificato gli esempi creando il pulsante 
che:
- a) prende i valori passati dal php ed imposta l'area di ritaglio con le dim. di W e H;
- b) elimina la possibilità di reSize dell'area di ritaglio;
- c) permette il movimento;
Poi per vederne il funzionamento, visualizziamo anche le coordinate dell'area, ed aggiungiamo una opzione che forza comunque il ritaglio dell'immagine rispettando i valori del Thumb assumendoli come valori Min e Max possibili.
Ripeto per il nostro caso sarebbero bastati i primi 3 punti a), b) e c)
Vediamo quindi solo i punti fondamentali del codice
<?PHP
// DA QUI LEGGO LE DIMENSIONI PREDEFINITE DEL THUMB
$setTBw=$HTTP_GET_VARS['newW'];
$setTBh=$HTTP_GET_VARS['newH'];
?>
..........
..........
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
// prendere codice completo esempio ADVANCED
<script type="text/javascript">
$(window).load(function(){
var jcrop_api;
var i, ac;
initJcrop();
function initJcrop()
{
jcrop_api = $.Jcrop('#cropbox');
$('#can_click,#can_move,#can_size').attr('checked','checked');
$('#ar_lock,#size_lock,#bg_swap').attr('checked',false);
};
// implementazione -----------------
$(function(){
$('#cropbox').Jcrop({onSelect: updateCoords });
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
function checkCoords()
{
if (parseInt($('#w').val())) return true;
alert('Please select a crop region then press submit.');
return false;
};
// fine implementazione -----------------------
// Attach interface buttons
// This may appear to be a lot of code but it's simple stuff
$('#setSelect').click(function(e) {
// nostra modifica al codice di esempio
// istruzioni array: x1,y1,x2=x1+w,y2=y1+h
// seleziona l'area dal punto 10,10 con dimensioni passate da php
jcrop_api.setSelect([ 10, 10, <?php echo $setTBw+10 ;?>, <?php echo $setTBh+10 ;?> ]);
// aggiorna coords
$('#cropbox').Jcrop({onChange: updateCoords});
// toglie il check resize
$('#can_size').attr('checked',false);
// toglie il resize area
jcrop_api.setOptions({ allowResize: !!this.checked });
// imposta il chech Respect
$('#size_lock').attr('checked','checked');
jcrop_api.focus();
});
// Tutto il resto del codice invariato
.........
// Tutto il resto del codice invariato
.........
$('#size_lock').change(function(e) {
// nostra modifica al codice di esempio
jcrop_api.setOptions(this.checked? {
minSize: [ <?php echo $setTBw;?>, <?php echo $setTBh ;?> ],
maxSize: [ <?php echo $setTBw;?>, <?php echo $setTBh ;?> ]
}: {
minSize: [ 0, 0 ],
maxSize: [ 0, 0 ]
});
jcrop_api.focus();
});
</script>
// LA PARTE DEL FORM
<div>
<span class="requiresjcrop">
<button id="setSelect">setThumb</button>
<button id="release">Release</button>
<button id="disable">Disable</button>
</span>
<button id="enable" style="display:none;">Re-Enable</button>
<button id="unhook">Destroy!</button>
<button id="rehook" style="display:none;">Attach Jcrop</button>
</div>
<fieldset class="optdual requiresjcrop">
<legend>Option Toggles</legend>
<div class="optlist offset">
<label><input type="checkbox" id="ar_lock" />Aspect ratio</label>
<label><input type="checkbox" id="size_lock" /> Respect Thumb-Size PHP setting</label>
</div>
<div class="optlist">
<label><input type="checkbox" id="can_click" />Allow new selections</label>
<label><input type="checkbox" id="can_move" />Selection can be moved</label>
<label><input type="checkbox" id="can_size" />Resizable selection</label>
</div>
</fieldset>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" onsubmit="return checkCoords();">
<label>X:</label>
<input name="x" type="text" id="x" size="5" />
<label>Y:</label>
<input name="y" type="text" id="y" size="5" />
<label>W:</label>
<input name="w" type="text" id="w" size="5" />
<label>H:</label>
<input name="h" type="text" id="h" size="5" />
<input type="submit" value="Crop Image" />
</form>
Tutta la parte del codice PHP per la rilevazione delle dimensioni e posizione inviate dal form, il ritaglio immagine, il salvataggio sul server la tralasciamo poichè direttamente dipendente da cosa vorrete sviluppare.
CLICCA QUI per J-Crop.TOOL()
CLICCA QUI per J-Crop.Solution() e rammenta di cliccare sul pulsante setTHUMB