本文主要為大家詳細介紹了jQuery用戶頭像裁剪插件cropbox.js的使用方法,具有一定的參考價值,有興趣的小伙伴們可以參考一下,希望能幫助到大家。
幾乎每一個網頁都是必備圖片上傳,圖片裁切功能,這裡透過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: '.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>
相關推薦:
jQuery實作圖片上傳與裁切外掛程式Croppie_jquery
以上是jQuery使用者頭像裁切外掛程式cropbox.js實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!