效果图如下所示，
cropper.js
cropper.js 安装
npm或bower安装
npm install cropper # or bower install cropper
clone下载：下载地址
git clone https://github.com/fengyuanchen/cropper.git
引用cropper.js
主要引用cropper.js跟cropper.css两个文件
<script src="https://www.jb51.net/path/to/jquery.js"></script><!-- jQuery is required --> <link href="https://www.jb51.net/path/to/cropper.css"> <script src="https://www.jb51.net/path/to/cropper.js"></script>
注意：必须先引入jquery文件，才能使用cropper.js插件
简单使用
构建截图所要用到的div容器
<!-- Wrap the image or canvas element with a block element (container) --> <div>  </div>
添加容器的样式，让img填充满整个容器（很重要）
/* Limit image width to avoid overflow the container */ img { max-width: 100%; /* This rule is very important, please do not ignore this! */ }
调用cropper.js方法，初始化截图控件
$('#image').cropper({ aspectRatio: 16 / 9, crop: function(e) { // Output the result data for cropping image. console.log(e.x); console.log(e.y); console.log(e.width); console.log(e.height); console.log(e.rotate); console.log(e.scaleX); console.log(e.scaleY); } });
其他详细api请参考：
封装成vue组件
封装成vue组件中需解决的问题
cropper.js相关
模拟input框点击选择图片并对选择的图片进行格式、大小限制
重新选择图片裁剪
确认裁剪并获取base64格式的图片信息
vue相关
非父子组件之间的通信问题
模拟input框点击选择图片并对选择的图片进行格式、大小限制
构建一个隐藏的input标签，然后模拟点击此input，从而达到能选择图片的功能
<!-- input框 --> <input type="file" :accept="imgCropperData.accept" ref="inputer" @change="handleFile"> //模拟点击 document.getElementById('myCropper-input').click();
给input绑定一个监听内容变化的方法，拿到上传的文件，并进行格式、大小校验
// imgCropperData: { // accept: 'image/gif, image/jpeg, image/png, image/bmp', // } handleFile (e) { let _this = this; let inputDOM = this.$refs.inputer; // 通过DOM取文件数据 _this.file = inputDOM.files[0]; // 判断文件格式 if (_this.imgCropperData.accept.indexOf(_this.file.type) == -1) { _this.$Modal.error({ title: '格式错误', content: '您选择的图片格式不正确！' }); return; } // 判断文件大小限制 if (_this.file.size > 5242880) { _this.$Modal.error({ title: '超出限制', content: '您选择的图片过大，请选择5MB以内的图片！' }); return; } var reader = new FileReader(); // 将图片将转成 base64 格式 reader.readAsDataURL(_this.file); reader.onload = function () { _this.imgCropperData.imgSrc = this.result; _this.initCropper(); } }
重新选择图片裁剪
当第一次选择图片之后，肯定会面临需要重选图片的问题，那么就会面临如何替换掉裁剪框中的图片，上面的步骤选择了图片后通过FileRender()方法拿到了图片的主要信息，现在就需要重新构建裁剪框就可以解决问题了，查看cropper.js给出的官方demo，发现官方是使用动态添加裁剪容器的方法，进行操作的，这里我们仿照官方进行实现。
// 初始化剪切 initCropper () { let _this = this; // 初始化裁剪区域 _this.imgObj = $(''); let $avatarPreview = $('.avatar-preview'); $('#myCropper-workspace').empty().html(_this.imgObj); _this.imgObj.cropper({ aspectRatio: _this.proportionX / _this.proportionY, preview: $avatarPreview, crop: function(e) { } }); }
确认裁剪并获取base64格式的图片信息
let $imgData = _this.imgObj.cropper('getCroppedCanvas') imgBase64Data = $imgData.toDataURL('image/png');
构造用于上传的数据