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

Dans de nombreuses applications, vous devez télécharger des images locales, puis les recadrer de manière appropriée pour répondre aux exigences de taille d'image du site Web. Les plus courantes sont les applications dans lesquelles chaque système utilisateur demande aux utilisateurs de télécharger et de recadrer leurs avatars. Aujourd'hui, je vais vous présenter un plug-in de téléchargement et de recadrage d'images basé sur HTML5 et jQuery, il s'appelle Croppie.

Opération de rendu :

HTML
Nous chargeons d’abord les fichiers js et css pertinents dans la tête.

<script src="jquery.min.js"></script> 
<script src="croppie.min.js"></script> 
<link rel="stylesheet" href="croppie.css"> 

Ensuite, nous plaçons un bouton de téléchargement d'image sur la page. Nous pouvons utiliser CSS pour convertir le contrôle de sélection de fichier de type="file" en un style de bouton. Après avoir sélectionné l'image, téléchargez l'image et appelez le plug-in de recadrage Croppie dans #upload-demo. #result est utilisé pour afficher l'image recadrée.

<div class="actions"> 
  <button class="file-btn"> 
    <span>上传</span> 
    <input type="file" id="upload" value="选择图片文件" /> 
  </button> 
  <div class="crop"> 
    <div id="upload-demo"></div> 
    <button class="upload-result">裁剪</button> 
  </div> 
  <div id="result"></div> 
</div> 

CSS
En utilisant le code CSS suivant, nous convertissons parfaitement le contrôle de sélection de fichier en style de bouton. En fait, nous définissons la transparence de type="file" sur 0, puis nous le superposons avec le bouton. De plus, nous définissons d'abord la zone de recadrage de l'image .crop sur invisible, puis nous l'affichons après avoir sélectionné le fichier.

button, 
a.btn { 
  background-color: #189094; 
  color: white; 
  padding: 10px 15px; 
  border-radius: 3px; 
  border: 1px solid rgba(255, 255, 255, 0.5); 
  font-size: 16px; 
  cursor: pointer; 
  text-decoration: none; 
  text-shadow: none; 
} 
button:focus { 
  outline: 0; 
} 
 
.file-btn { 
  position: relative; 
} 
.file-btn input[type="file"] { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0; 
} 
 
.actions { 
  padding: 5px 0; 
} 
.actions button { 
  margin-right: 5px; 
} 
.crop{display:none} 

jQuery
Tout d'abord, l'API FileReader de HTML5 est utilisée pour lire le fichier local, puis $('#upload-demo').croppie() appelle le plug-in Croppie. Fenêtre d'affichage des options de Croppie : vous pouvez définir la largeur et la hauteur de l'image recadrée, ainsi que le type (cercle ou carré) ; la limite de l'option est la taille périphérique de l'image. Il a également des paramètres mouseWheelZoom : s'il faut prendre en charge le zoom des images avec la molette de la souris ; showZoom : s'il faut afficher l'outil de barre de zoom ; mise à jour : fonction de rappel ;

$(function(){ 
  var $uploadCrop; 
 
    function readFile(input) { 
       if (input.files && input.files[0]) { 
        var reader = new FileReader(); 
         
        reader.onload = function (e) { 
          $uploadCrop.croppie('bind', { 
            url: e.target.result 
          }); 
        } 
         
        reader.readAsDataURL(input.files[0]); 
      } 
      else { 
        alert("Sorry - you're browser doesn't support the FileReader API"); 
      } 
    } 
 
    $uploadCrop = $('#upload-demo').croppie({ 
      viewport: { 
        width: 200, 
        height: 200, 
        type: 'circle' 
      }, 
      boundary: { 
        width: 300, 
        height: 300 
      } 
    }); 
 
    $('#upload').on('change', function () { 
      $(".crop").show(); 
      readFile(this); 
    }); 
    $('.upload-result').on('click', function (ev) { 
      $uploadCrop.croppie('result', 'canvas').then(function (resp) { 
        popupResult({ 
          src: resp 
        }); 
      }); 
    }); 
     
  function popupResult(result) { 
    var html; 
    if (result.html) { 
      html = result.html; 
    } 
    if (result.src) { 
      html = '<img src="' + result.src + '" />'; 
    } 
    $("#result").html(html); 
  } 
}); 

Après avoir cliqué sur le bouton "Recadrer", appelez à nouveau la méthode de résultat de Croppie pour renvoyer une image recadrée et l'afficher dans #result.

Ce qui précède est le processus principal de mise en œuvre de jQuery pour le téléchargement et le recadrage d'images. J'espère qu'il sera utile à tout le monde d'apprendre la technologie de téléchargement et de recadrage d'images.