安装cropperjs插件
npm install cropperjs
裁剪框以及图片的一些设置说明
ViewMode 视图控制
取值:
- 0 无限制,裁剪框可以移动到图片外,预览时图片外的地方用黑色填充
- 1 限制裁剪框只能在图片范围内移动
- 2 限制裁剪框不能超出图片的范围,且图片不全部占满后面的网格背景
- 3 限制裁剪框不能超出图片的范围,且图片占满后面全部网格背景(短的那边填充)
dragMode 拖拽图片模式
取值:
- crop 形成新的裁剪框
- move 图片可移动
- none 什么也没有
实现图片的裁剪以及预览
<template>
<div id="box">
<button @click="sureSave">裁剪</button>
<div class="box">
<div class="box_1">
<img src="./cropper.jpeg" ref="image" style="width:300px;height:300px"/>
</div>
<!-- 裁剪完的图片 -->
<p>裁剪后的图片为:</p>
<div class="cropper">
<img :src="afterImg" />
</div>
</div>
</div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
export default defineComponent({
setup () {
const data = reactive({
afterImg: '',
image: null,
myCropper: null
})
onMounted(() => {
data.myCropper = new Cropper(data.image, {
viewMode: 0, // 设置裁剪框可以超出图片范围
dragMode: 'move', // 设置被裁剪的图片可移动
backgrounde: true, // 是否显示图片后的网格背景
preview: '.before', // 进行图片预览效果
autoCropArea: 0.8, // 设置裁剪区域占图片的大小,值为0-1,0.8表示占80%区域
zoomOnWheel: true, // 设置图片是否可以进行收缩功能
center: true // 是否显示中间的 + 箭头
})
})
const sureSave = () => {
// 裁剪后的图片
data.afterImg = data.myCropper.getCroppedCanvas({
imageSmoothingQuality: 'high'
}).toDataURL('image/jpeg') // 设置图片格式
}
return {
// data,
sureSave,
// toRefs()函数可以将reactive()创建出来的响应式对象转换为普通对象,只不过这个普通对象上的每一个属性都是响应式的
...toRefs(data)
}
}
})
</script>