官方示例 https://fengyuanchen.github.io/cropper/ 參考:https://segmentfault.com/a/1190000012344970 ...
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>上傳頭像</title> <link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{ text-align: center; } #user-photo { width:300px; height:300px; margin-top: 10px; } #photo { max-width:100%; max-height:350px; } //這個一定要設置,是容器的大小 .img-preview-box { text-align: center; } .img-preview-box > div { display: inline-block;; margin-right: 10px; } .img-preview { overflow: hidden; } .img-preview-box .img-preview-lg { width: 150px; height: 150px; } .img-preview-box .img-preview-md { width: 100px; height: 100px; } .img-preview-box .img-preview-sm { width: 50px; height: 50px; border-radius: 50%; } </style> </head> <body> <button class="btn btn-primary" data-target="#changeModal" data-toggle="modal">打開</button><br/> <div class="user-photo-box"> <img id="user-photo" src=""> </div> </div> <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title text-primary"> <i class="fa fa-pencil"></i> 更換頭像 </h4> </div> <div class="modal-body"> <p class="tip-info text-center"> 未選擇圖片 </p> <div class="img-container hidden"> <img src="" alt="" id="photo"> </div> <div class="img-preview-box hidden"> <hr> <span>150*150:</span> <div class="img-preview img-preview-lg"> </div> <span>100*100:</span> <div class="img-preview img-preview-md"> </div> <span>30*30:</span> <div class="img-preview img-preview-sm"> </div> </div> </div> <div class="modal-footer"> <label class="btn btn-danger pull-left" for="photoInput"> <input type="file" class="sr-only" id="photoInput" accept="image/*"> <span>打開圖片</span> </label> <button class="btn btn-primary disabled" disabled="true" onclick="sendPhoto();">提交</button> <button class="btn btn-close" aria-hidden="true" data-dismiss="modal">取消</button> </div> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> var initCropperInModal = function(img, input, modal){ var $image = img; var $inputImage = input; var $modal = modal; var options = { aspectRatio: 1, // 縱橫比 viewMode: 2, preview: '.img-preview' // 預覽圖的class名 }; // 模態框隱藏後需要保存的數據對象 var saveData = {}; var URL = window.URL || window.webkitURL; var blobURL; $modal.on('show.bs.modal',function () { // 如果打開模態框時沒有選擇文件就點擊“打開圖片”按鈕 if(!$inputImage.val()){ $inputImage.click(); } }).on('shown.bs.modal', function () { // 重新創建 $image.cropper( $.extend(options, { ready: function () { // 當剪切界面就緒後,恢複數據 if(saveData.canvasData){ $image.cropper('setCanvasData', saveData.canvasData); $image.cropper('setCropBoxData', saveData.cropBoxData); } } })); }).on('hidden.bs.modal', function () { // 保存相關數據 saveData.cropBoxData = $image.cropper('getCropBoxData'); saveData.canvasData = $image.cropper('getCanvasData'); // 銷毀並將圖片保存在img標簽 $image.cropper('destroy').attr('src',blobURL); }); if (URL) { $inputImage.change(function() { var files = this.files; var file; if (!$image.data('cropper')) { return; } if (files && files.length) { file = files[0]; if (/^image\/\w+$/.test(file.type)) { if(blobURL) { URL.revokeObjectURL(blobURL); } blobURL = URL.createObjectURL(file); // 重置cropper,將圖像替換 $image.cropper('reset').cropper('replace', blobURL); // 選擇文件後,顯示和隱藏相關內容 $('.img-container').removeClass('hidden'); $('.img-preview-box').removeClass('hidden'); $('#changeModal .disabled').removeAttr('disabled').removeClass('disabled'); $('#changeModal .tip-info').addClass('hidden'); } else { window.alert('請選擇一個圖像文件!'); } } }); } else { $inputImage.prop('disabled', true).addClass('disabled'); } } var sendPhoto = function(){ $('#photo').cropper('getCroppedCanvas',{ width:300, height:300 }).toBlob(function(blob){ // 轉化為blob後更改src屬性,隱藏模態框 $('#user-photo').attr('src',URL.createObjectURL(blob)); $('#changeModal').modal('hide'); }); } $(function(){ initCropperInModal($('#photo'),$('#photoInput'),$('#changeModal')); }); </script> </body> </html>
官方示例 https://fengyuanchen.github.io/cropper/
參考:https://segmentfault.com/a/1190000012344970