HTML首先我们将相关js和css文件载入head中。
<script src="jquery.min.js"></script> <script src="croppie.min.js"></script> <link rel="stylesheet" href="croppie.css">接下来我们在页面上放置一个图片上传按钮，我们可以用css将type="file"的文件选择控件转成按钮样式。选择完图片后，在#upload-demo展示上传图片，以及调用裁剪插件Croppie。#result用来展示裁剪后的图片。
<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使用以下CSS代码，我们很完美的将选择文件的控件转成按钮的样式，其实就是将type="file"透明度设成0，然后和button重叠。此外，我们先将图片裁剪区域.crop设置为不可见，等选择文件后再显示。
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首先利用HTML5的FileReader API读取本地文件，然后$('#upload-demo').croppie()调用了Croppie插件。Croppie的选项viewport：可以设置所裁剪图片的宽度和高度，以及类型（圆形或方形）；选项boundary是图片的外围尺寸。它还有参数mouseWheelZoom：是否支持鼠标滚轮缩放图像；showZoom：是否展示缩放条工具；update：回调函数。
$(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); //jax上传后台保存 $.ajax({ url: "{{route('user.setting.avatar',['id'=>$data->id])}}", method:"post", data:{avatar:result.src}, dataType:'text', success:function (data) { if (data=='0') { window.location.reload(); }else { $('.text-danger1').html(data); $('#modol1').modal('show'); } }}) } });//后台laravel代码 $strName=str_random(50);$img= $request->get('avatar');$img = str_replace('data:image/png;base64,', '', $img);$img = str_replace(' ', '+', $img);$data = base64_decode($img);$save_file = './upload/user/avatar/'.$strName.'.png';$result = file_put_contents($save_file, $data);$status= DB::table('crm_member')->where('id',$id)->update([ 'avatar'=>'/upload/user/avatar/'.$strName.'.png',]);if ($status){ return 0;}else{ return 'failed';}转载于:https://www.cnblogs.com/F4natasy/p/11445431.html
相关资源：croppic裁剪Web端js插件