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="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>
注意:必须先引入jquery文件,才能使用cropper.js插件
简单使用
- 构建截图所要用到的div容器
<!-- Wrap the image or canvas element with a block element (container) -->
<div>
![](picture.jpg)
</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请参考:github:cropper.js
封装成vue组件
封装成vue组件中需解决的问题
- cropper.js相关
- 模拟input框点击选择图片并对选择的图片进行格式、大小限制
- 重新选择图片裁剪
- 确认裁剪并获取base64格式的图片信息
- vue相关
- 非父子组件之间的通信问题
模拟input框点击选择图片并对选择的图片进行格式、大小限制
- 构建一个隐藏的input标签,然后模拟点击此input,从而达到能选择图片的功能
<!-- input框 -->
<input id="myCropper-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 =