Heim > Artikel > Web-Frontend > jQuery-Benutzer-Avatar-Zuschneide-Plug-in, Cropbox.js, Beispielfreigabe
Dieser Artikel stellt hauptsächlich die Verwendung des jQuery-Benutzer-Avatar-Zuschneide-Plug-ins „cropbox.js“ vor. Ich hoffe, dass er jedem helfen kann.
Fast jede Webseite verfügt über eine unverzichtbare Bild-Upload- und Bildzuschneidefunktion. Diese Funktion wird hier über das Cropbox.js-Plug-in implementiert.
<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: '.thumbBox', spinner: '.spinner', imgSrc: 'images/avatar.png' } var cropper = $('.imageBox').cropbox(options); $('#file').on('change', function(){ var reader = new FileReader(); reader.onload = function(e) { options.imgSrc = e.target.result; cropper = $('.imageBox').cropbox(options); } reader.readAsDataURL(this.files[0]); this.files = []; }) $('#btnCrop').on('click', function(){ var img = cropper.getDataURL(); $('.cropped').append('<img src="'+img+'">'); }) $('#btnZoomIn').on('click', function(){ cropper.zoomIn(); }) $('#btnZoomOut').on('click', function(){ cropper.zoomOut(); }) }); </script>
Verwandte Empfehlungen:
Jquery-Plug-in zum Zuschneiden von Bildern
5 spätestens das jQuery-Plug-in zum Zuschneiden von Bildern
jQuery implementiert das Plug-in zum Hochladen und Zuschneiden von Bildern Croppie_jquery
Das obige ist der detaillierte Inhalt vonjQuery-Benutzer-Avatar-Zuschneide-Plug-in, Cropbox.js, Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!