第三方依赖:cropperjs
适用于原生js,jquery,vue及其他框架。
下载:
npm install cropperjs
引入css及js:
import 'cropperjs/dist/cropper.css'
import Cropper from 'cropperjs'
初始化:(必须在mounted中)
mounted() {
// 获取图片
const image = this.$refs.img
// 获取cropper实例
const cropper = new Cropper(image, {
viewMode: 1, // 只能在裁剪的图片范围内移动
dragMode: 'move', // 画布和图片都可以移动
aspectRatio: 1, // 裁剪区默认正方形
autoCropArea: 1, // 自动调整裁剪图片
cropBoxMovable: false, // 禁止裁剪区移动
cropBoxResizable: false, // 禁止裁剪区缩放
background: false, // 关闭默认背景
// crop可省略
crop(event) {
console.log(event.detail.x)
console.log(event.detail.y)
console.log(event.detail.width)
console.log(event.detail.height)
console.log(event.detail.rotate)
console.log(event.detail.scaleX)
console.log(event.detail.scaleY)
}
})
},
结构:
<div class="photo">
<img :src="img" ref="img" />
</div>
样式:
img {
max-width: 100%;
display: block;
}
- 注意:img要包裹在div中,并且display:block,设置最小宽度为了使图片能够在页面完全展示。
- 图片剪裁通常结合popup弹出层使用,准备一个弹层和一张图片即可。
剪裁完毕:
- 客户端剪裁使用getCroppedCanvas()方法,服务器端剪裁使用getData()方法。
confirm() {
this.cropper.getCroppedCanvas().toBlob(blob => {
console.log(blob)
// blob为剪裁完成后的图片地址
})
}