jQuery implementiert das Plug-in Croppie_jquery zum Hochladen und Zuschneiden von Bildern

In vielen Anwendungen müssen Sie lokale Bilder hochladen und diese dann entsprechend zuschneiden, um die Bildgrößenanforderungen der Website zu erfüllen. Am häufigsten sind Anwendungen, bei denen jedes Benutzersystem von Benutzern das Hochladen und Zuschneiden von Avataren verlangt. Heute stelle ich Ihnen ein Plug-in zum Hochladen und Zuschneiden von Bildern vor, das auf HTML5 und jQuery basiert und Croppie heißt.

Operationsrendering:

HTML
Zuerst laden wir die relevanten js- und css-Dateien in den Head.

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

Als nächstes platzieren wir einen Bild-Upload-Button auf der Seite. Wir können CSS verwenden, um das Dateiauswahl-Steuerelement von type="file" in einen Button-Stil umzuwandeln. Nachdem Sie das Bild ausgewählt haben, laden Sie das Bild hoch und rufen Sie das Zuschneide-Plugin Croppie in #upload-demo auf. #result wird verwendet, um das zugeschnittene Bild anzuzeigen.

<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
Mit dem folgenden CSS-Code konvertieren wir die Dateiauswahlsteuerung perfekt in einen Schaltflächenstil. Tatsächlich setzen wir die Transparenz von type="file" auf 0 und überlappen sie dann mit der Schaltfläche. Darüber hinaus setzen wir zunächst den Bildzuschneidebereich .crop auf unsichtbar und zeigen ihn dann nach Auswahl der Datei an.

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
Zuerst wird die FileReader-API von HTML5 verwendet, um die lokale Datei zu lesen, und dann ruft $('#upload-demo').croppie() das Croppie-Plugin auf. Option „Ansichtsfenster“ von Croppie: Sie können die Breite und Höhe des zugeschnittenen Bildes sowie den Typ (Kreis oder Quadrat) festlegen; die Option „Grenze“ ist die Umfangsgröße des Bildes. Es gibt auch Parameter: MouseWheelZoom: ob das Zoomen von Bildern mit dem Mausrad unterstützt werden soll; showZoom: ob das Zoomleisten-Tool angezeigt werden soll;

$(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); 
  } 
}); 

Nachdem Sie auf die Schaltfläche „Zuschneiden“ geklickt haben, rufen Sie die Ergebnismethode von Croppie erneut auf, um ein zugeschnittenes Bild zurückzugeben und es in #result anzuzeigen.

Das Obige ist der Hauptprozess der jQuery-Implementierung des Hochladens und Zuschneidens von Bildern. Ich hoffe, dass es für alle hilfreich ist, die Technologie zum Hochladen und Zuschneiden von Bildern zu erlernen.