Maison >interface Web >js tutoriel >Exemple d'utilisation de l'outil de recadrage d'avatar jQuery jcrop (avec démonstration et téléchargement du code source de démonstration)_jquery

Exemple d'utilisation de l'outil de recadrage d'avatar jQuery jcrop (avec démonstration et téléchargement du code source de démonstration)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal: 2016-05-16 15:18:471326parcourir

L'exemple de cet article décrit l'utilisation de l'outil de recadrage d'avatar jQuery, jcrop. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Les outils de recadrage d'avatar les plus populaires sont Flash et Jquery. Personnellement, je pense qu'il est préférable d'utiliser jquery, car si vous étudiez attentivement le code, vous pouvez comprendre ce qui se passe et il est plus facile de le modifier si vous le souhaitez.

Il existe un exemple, veuillez vous référer à : exemple de démonstration jcrop, qui est modifié à partir de l'exemple jcrop et ajoute les deux fonctionnalités suivantes :

1, affiché au centre, et peut être glissé pour modifier la taille de l'interception
2. L'image prévisualisée est proportionnelle à la taille du glissement racine.

Ce qui suit est le code js, qui est simplement encapsulé

<!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">
 <head>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
  <title>jcrop 图片拖动</title>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="jquery.Jcrop.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
  <link rel="stylesheet" href="demos.css" type="text/css" />
 </head>
 <body>
 <div id="outer">
 <div class="jcExample">
 <div class="article">
  <h1>上传头像拖动例子</h1>
  <table>
   <tr>
    <td>
     <img src="sago.jpg" id="target" alt="Flowers" />
    </td>
    <td>
     <div style="width:100px;height:100px;overflow:hidden;" id="aa">
      <img src="sago.jpg" id="preview" alt="Preview" class="jcrop-preview" />
     </div>
    </td>
   </tr>
  </table>
 </div>
 </div>
 </div>
 </body>
<script type="text/javascript">
new cutImage().init();
function cutImage(){
  var oop = this;
  this.option = {
    x:170,
    y:110,
    w:350,
    h:200,
    t:'target',
    p:'preview',
    o:'aa'
  }
  this.init = function(){
    oop.target();
  }
  this.target = function(){
   $('#'+oop.option['t']).Jcrop({
     onChange: oop.updatePreview,
     onSelect: oop.updatePreview,
     aspectRatio: 1,
     setSelect: [ oop.option['x'], oop.option['y'], oop.option['w'],oop.option['h'] ],
     bgFade:   true,
     bgOpacity: .5
    });
  }
  this.updatePreview = function(obj){
    if (parseInt(obj.w) > 0)
    {
     var rx = $('#'+oop.option['o']).width()/ obj.w;
     var ry = $('#'+oop.option['o']).height()/ obj.h;
     $('#'+oop.option['p']).css({
      width: Math.round(rx*$('#'+oop.option['t']).width()) + 'px',
      height: Math.round(ry*$('#'+oop.option['t']).height()) + 'px',
      marginLeft: '-' + Math.round(rx * obj.x) + 'px',
      marginTop: '-' + Math.round(ry * obj.y) + 'px'
     });
    }
  }
}
</script>
</html>

Si jquery jcrop est combiné avec jquery ajax upload, la fonction de téléchargement et d'interception d'avatar peut être utilisée, ce qui est très convivial.

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

Les lecteurs intéressés par plus de contenu lié aux plug-ins jQuery peuvent consulter le sujet spécial de ce site : " Résumé des plug-ins jQuery courants et de leur utilisation"

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des méthodes JavaScript traditionnelles pour implémenter les compétences asynchrones de vérification_javascriptArticle suivant：Explication détaillée des méthodes JavaScript traditionnelles pour implémenter les compétences asynchrones de vérification_javascript

Articles Liés

Voir plus