Aujourd'hui, je vais vous présenter un outil de capture d'écran (comme un avatar, etc.) souvent utilisé sur le web :
JcropDémo
Structure du projet :
Rendu :
C'est utile :
Après avoir vu cela, tout le monde veut l'essayer lui-même.
============================================
Partie codée :
============================================
Préparation:
Télécharger : Jcrop-0.9.10 (format zip)
Décompressez-le et insérez-le dans votre projet, tout comme la structure du projet ci-dessus...
/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial1.html
jQuery(fonction($){
// Est-ce facile ??
$('#target').Jcrop();
});
</script>
</tête>
<corps>
<div id="extérieur">
<div>
<div>
<h1>Jcrop – Bonjour tout le monde</h1>
<img src="demo_files/pool.jpg" id="target" />
<p>
<b>Cet exemple montre le comportement par défaut de Jcrop.</b>
Puisqu'aucun gestionnaire d'événements n'a été attaché, il effectue uniquement
le comportement de culture.
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Accueil Jcrop</a> |
<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manuel (Documents)</a>
</div>
</div>
</div>
</div>
</corps>
</html>
Copiez le code comme suit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<tête>
<méta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Jcrop » Tutoriels » aspectRatio avec aperçu</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script type="text/javascript">
jQuery(fonction($) {
// Créer des variables (dans cette portée) pour contenir l'API et la taille de l'image
var jcrop_api,boundx,boundy;
$('#cible').Jcrop({
onChange : updatePreview,
onSelect : updatePreview,
rapport d'aspect : 1
}, fonction() {
// Utilisez l'API pour obtenir la taille réelle de l'image
var limites = this.getBounds();
boundx = limites[0];
limite = limites[1];
// Stocke l'API dans la variable jcrop_api
jcrop_api = ceci ;
});
fonction updatePreview(c) {
si (parseInt(cw) > 0) {
var rx = 100/cw ;
var ry = 100/ch;
$('#aperçu').css({
largeur : Math.round(rx *boundx) + 'px',
hauteur : Math.round(ry *boundy) + 'px',
marginLeft : '-' + Math.round(rx * cx) + 'px',
marginTop : '-' + Math.round(ry * cy) + 'px'
});
}
}});
</script>
</tête>
<corps>
<div id="extérieur">
<div>
<div>
<h1>Jcrop – Rapport d'aspect avec volet d'aperçu</h1>
<tableau>
<tr>
<td>
<div>
<img src="demo_files/pool.jpg" id="target"/>
</div>
</td>
<td>
<div>
<img src="demo_files/pool.jpg" id="preview" />
</div>
</td>
</tr>
</table>
<p>
<b>Un exemple d'implémentation d'un volet de prévisualisation.</b> De toute évidence, la démo la plus visuelle, le volet de prévisualisation est entièrement réalisé en dehors de Jcrop avec un simple rappel à saveur jQuery. Ce type d'interface pourrait être utile pour créer une vignette ou un avatar. . Le gestionnaire d'événements onChange est utilisé pour mettre à jour la vue dans le volet d'aperçu.
</p>
<div id="dl_links">
<a href="http://deepliquid.com/content/Jcrop.html">Accueil Jcrop</a> | <a href="http://deepliquid.com/content/Jcrop_Manual.html">Manuel (Documents )</a>
</div>
</div>
</div>
</div>
</corps>
</html>
/Jcrop/WebContent/tapmodo-Jcrop/demos/tutorial4.html