Plug-in de recadrage d'avatar de l'utilisateur jQuery, partage d'exemples cropbox.js

Cet article présente principalement en détail l'utilisation du plug-in de recadrage d'avatar d'utilisateur jQuery cropbox.js. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Presque toutes les pages Web disposent des fonctions de téléchargement et de recadrage d'images nécessaires. Cette fonction est implémentée ici via le plug-in cropbox.js.

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/cropbox.js"></script>
<script type="text/javascript">
  $(window).load(function() {
    var options =
    {
      thumbBox: &#39;.thumbBox&#39;,
      spinner: &#39;.spinner&#39;,
      imgSrc: &#39;images/avatar.png&#39;
    }
    var cropper = $(&#39;.imageBox&#39;).cropbox(options);
    $(&#39;#file&#39;).on(&#39;change&#39;, function(){
      var reader = new FileReader();
      reader.onload = function(e) {
        options.imgSrc = e.target.result;
        cropper = $(&#39;.imageBox&#39;).cropbox(options);
      }
      reader.readAsDataURL(this.files[0]);
      this.files = [];
    })
    $(&#39;#btnCrop&#39;).on(&#39;click&#39;, function(){
      var img = cropper.getDataURL();
      $(&#39;.cropped&#39;).append(&#39;<img src="&#39;+img+&#39;">&#39;);
    })
    $(&#39;#btnZoomIn&#39;).on(&#39;click&#39;, function(){
      cropper.zoomIn();
    })
    $(&#39;#btnZoomOut&#39;).on(&#39;click&#39;, function(){
      cropper.zoomOut();
    })
  });
</script>

Recommandations associées :

Plug-in de recadrage d'image Jquery

5 dernières le plug-in de recadrage d'image jQuery

jQuery implémente le plug-in de téléchargement et de recadrage d'image Croppie_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!