Beispiel für die Verwendung des jQuery-Avatar-Zuschneidetools jcrop (mit Demonstration und Download des Demo-Quellcodes)

Beispiel für die Verwendung des jQuery-Avatar-Zuschneidetools jcrop (mit Demonstration und Download des Demo-Quellcodes)_jquery

WBOY

Freigeben： 2016-05-16 15:18:47

Original

1288 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Verwendung des jQuery-Avatar-Zuschneidetools jcrop. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die beliebtesten Tools zum Zuschneiden von Avataren sind Flash und JQuery. Persönlich denke ich, dass es besser ist, Jquery zu verwenden, denn wenn man den Code sorgfältig studiert, kann man grundsätzlich verstehen, was vor sich geht, und es ist einfacher, ihn zu ändern, wenn man möchte.

Es gibt ein Beispiel, siehe: jcrop-Beispieldemo, das gegenüber dem jcrop-Beispiel modifiziert ist und die folgenden zwei Funktionen hinzufügt:

1 wird in der Mitte angezeigt und kann gezogen werden, um die Größe des Abfangbereichs zu ändern
2. Das Vorschaubild ist proportional zur Größe des Root-Drags.

Das Folgende ist der js-Code, der einfach gekapselt ist

<!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>

Nach dem Login kopieren

Wenn JQuery Jcrop mit JQuery Ajax Upload kombiniert wird, kann die Avatar-Upload- und Abfangfunktion verwendet werden, was sehr benutzerfreundlich ist.

Klicken Sie hier für den vollständigen BeispielcodeDownload von dieser Website.

Leser, die an weiteren Inhalten zu jQuery-Plug-ins interessiert sind, können sich das Spezialthema dieser Website ansehen: „ Zusammenfassung gängiger jQuery-Plug-ins und deren Verwendung“

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.