cropperjs 很多年中，对处理图片裁切做的体验非常棒。几个项目中，也使用过。那时候还是使用 jquery 这种传统的方式。现在想整一个使用 vue 和 element ui 组合在一起的模板。
cropperjs： https://github.com/fengyuanchen/cropperjs
photo-editor：https://github.com/fengyuanchen/photo-editor
操作一波
先下载：
npm install cropperjs
开干，在 src/components/ 下，新建 ImageCropper 目录。在 ImageCropper 下，新建 index.vue。
准备填入 code ，简单的弹出。
<template>
<div class="cropper-container">
<el-dialog title="" :visible.sync="visible">
<el-image
style="width: 100px; height: 100px"
:src="src"
:fit="fit"></el-image>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
visible: false
}
},
props: {
src: {
type: String,
default: ''
}
},
mounted() {
},
methods: {
open() {
this.visible = true
}
}
}
</script>
<style scoped>
</style>
使用
<template>
<div>
<div class="avatar" @click="handleAvatar">
<el-image
style="width: 100px; height: 100px"
:src="form.avatar"
:fit="fit"></el-image>
<i class="el-icon-edit">编辑</i>
</div>
<image-cropper>
<image-cropper ref="avatar" :src="avatar"></image-cropper>
</div>
</template>
<script>
import ImageCropper from '@/components/ImageCropper'
export default {
components: {
ImageCropper
},
data() {
return {
avatar: 'https://xxxx'
}
},
methods: {
handleAvatar() {
this.$refs.avatar.open()
}
}
}
先这样搞一波弹窗。然后进入正题，搞图片裁切。