cropper工具是一個功能強，相容性好的一個圖片裁剪和上傳工具
GitHub地址：https://github.com/kesixin/Head_Cut_PC
<div class="container" style="margin-top:20px; display: none" id="prop"> <div class="row"> <div class="col-md-9"> <div class="img-container"> <img id="image"> </div> </div> <div class="col-md-3"> <div class="docs-preview clearfix"> <!-- <span> 預覽效果</span> --> <div class="img-preview preview-lg" id="img-preview"></div> <div class="img-preview preview-lg" id="img-preview_sm" style="border-radius: 200px;"></div> </div> </div> </div> <div class="row"> <div class="col-md-9 docs-buttons"> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="點選放大"> 放大 </span> </button> <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="點選縮小"> 縮小 </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="點選向左移"> 左移 </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="點選向右移"> 右移 </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="點選向上移"> 上移 </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="點選下右移"> 下移 </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate Left"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="點選向左轉90º"> 左轉90º </span> </button> <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate Right"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="點選向右轉90º"> 右轉90º </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="reset" title="Reset"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="點選還原"> 重新整理 </span> </button> <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"> <button type="button" class="btn btn-primary" data-method="reset" title="Reset"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="選擇圖片"> 選擇圖片 </span> </button> </div> <div class="btn-group btn-group-crop"> <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ 'width': 180, 'height': 90 }" type="button"> 上傳頭像 </button> </div> <div class="modal fade docs-cropped" id="getCroppedCanvasModal" style="display: none;" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="getCroppedCanvasTitle">修剪</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button> <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">下載</a> </div> </div> </div> </div> </div> </div>
這是一個完整的案例，只需要不提交和顯示的東西調整一下就行啦
$(function () { 'use strict';//表示強規則 var console = window.console || { log: function () {} }; var URL = window.URL || window.webkitURL; var $image = $('#image'); var $download = $('#download'); //獲取圖片擷取的位置 var $dataX = $('#dataX'); var $dataY = $('#dataY'); var $dataHeight = $('#dataHeight'); var $dataWidth = $('#dataWidth'); var $dataRotate = $('#dataRotate'); var $dataScaleX = $('#dataScaleX'); var $dataScaleY = $('#dataScaleY'); var options = { movable: false, center: true, aspectRatio: 1 / 1, //裁剪框比例1:1 preview: [document.getElementById('img-preview'),document.getElementById('img-preview_sm')],//這一塊是對選區後的展示框進行須按則，這裡是在兩個快元素中， crop: function (e) { $dataX.val(Math.round(e.x)); $dataY.val(Math.round(e.y)); $dataHeight.val(Math.round(e.height)); $dataWidth.val(Math.round(e.width)); $dataRotate.val(e.rotate); $dataScaleX.val(e.scaleX); $dataScaleY.val(e.scaleY); } }; var originalImageURL = $image.attr('src'); var uploadedImageURL; // Cropper $image.on({ ready: function (e) { // console.log(e.type); }, cropstart: function (e) { // console.log(e.type, e.action); }, cropmove: function (e) { // console.log(e.type, e.action); }, cropend: function (e) { // console.log(e.type, e.action); }, crop: function (e) { // console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY); }, zoom: function (e) { // console.log(e.type, e.ratio); } }).cropper(options); // Buttons if (!$.isFunction(document.createElement('canvas').getContext)) { $('button[data-method="getCroppedCanvas"]').prop('disabled', true); } if (typeof document.createElement('cropper').style.transition === 'undefined') { $('button[data-method="rotate"]').prop('disabled', true); $('button[data-method="scale"]').prop('disabled', true); } // Download if (typeof $download[0].download === 'undefined') { $download.addClass('disabled'); } // Options $('.docs-toggles').on('change', 'input', function () { var $this = $(this); var name = $this.attr('name'); var type = $this.prop('type'); var cropBoxData; var canvasData; if (!$image.data('cropper')) { return; } if (type === 'checkbox') { options[name] = $this.prop('checked'); cropBoxData = $image.cropper('getCropBoxData'); canvasData = $image.cropper('getCanvasData'); options.ready = function () { $image.cropper('setCropBoxData', cropBoxData); $image.cropper('setCanvasData', canvasData); }; } else if (type === 'radio') { options[name] = $this.val(); } $image.cropper('destroy').cropper(options); }); // Methods $('.docs-buttons').on('click', '[data-method]', function () { var $this = $(this); var data = $this.data(); var $target; var result; if ($this.prop('disabled') || $this.hasClass('disabled')) { return; } if ($image.data('cropper') && data.method) { data = $.extend({}, data); // Clone a new one if (typeof data.target !== 'undefined') { $target = $(data.target); if (typeof data.option === 'undefined') { try { data.option = JSON.parse($target.val()); } catch (e) { // console.log(e.message); } } } if (data.method === 'rotate') { $image.cropper('clear'); } result = $image.cropper(data.method, data.option, data.secondOption); if (data.method === 'rotate') { $image.cropper('crop'); } switch (data.method) { case 'scaleX': case 'scaleY': $(this).data('option', -data.option); break; case 'getCroppedCanvas'://上傳頭像 if (result) { var imgBase=result.toDataURL('image/jpeg'); var data={img:imgBase};//這一塊是上傳資料，對裁切好的圖片以base64的格式進行進行上傳，其他 的保持不懂就行 JgAjax({ url:"sub_act.php", type:"POST", dataType:"json", data:"act=upload_avatar&type=1&img="+imgBase, success:function(e) { layer.msg(e.des,{time:1500}); if (e.state == "success") { $image.cropper('destroy').attr('src', originalImageURL).cropper(options); getAjax(); layer.closeAll("page"); } } }) } break; case 'destroy': if (uploadedImageURL) { URL.revokeObjectURL(uploadedImageURL); uploadedImageURL = ''; $image.attr('src', originalImageURL); } break; } if ($.isPlainObject(result) && $target) { try { $target.val(JSON.stringify(result)); } catch (e) { // console.log(e.message); } } } }); // Keyboard $(document.body).on('keydown', function (e) { if (!$image.data('cropper') || this.scrollTop > 300) { return; } switch (e.which) { case 37: e.preventDefault(); $image.cropper('move', -1, 0); break; case 38: e.preventDefault(); $image.cropper('move', 0, -1); break; case 39: e.preventDefault(); $image.cropper('move', 1, 0); break; case 40: e.preventDefault(); $image.cropper('move', 0, 1); break; } }); // Import image var $inputImage = $('#inputImage'); 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 (uploadedImageURL) { URL.revokeObjectURL(uploadedImageURL); } uploadedImageURL = URL.createObjectURL(file); $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options); $inputImage.val(''); } else { window.alert('Please choose an image file.'); } } }); } else { $inputImage.prop('disabled', true).parent().addClass('disabled'); } });