安装
npm install vue-cropper使用
main.js里面
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)使用element组件上传
<!-- element 上传图片按钮 --> <el-upload class="upload-demo" action="" drag list-type="picture" :auto-upload="false" :show-file-list="false" :on-change="changeUpload"> <i class="el-icon-upload" /> <div class="el-upload__text">点击上传</div> <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div> </el-upload> <!-- element 上传图片按钮 --> <el-upload class="upload-demo" action="" drag list-type="picture" :auto-upload="false" :show-file-list="false" :on-change="changeUpload"> <i class="el-icon-upload" /> <div class="el-upload__text">点击上传</div> <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div> </el-upload>设置一个弹出层，放剪裁图片的cropper
<!-- vueCropper 图片剪裁--> <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body> <div class="cropper-content"> <div class="cropper" style="text-align:center"> <vueCropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType" :info="true" :full="option.full" :can-move="option.canMove" :can-move-box="option.canMoveBox" :original="option.original" :auto-crop="option.autoCrop" :fixed="option.fixed" :fixed-number="option.fixedNumber" :center-box="option.centerBox" :info-true="option.infoTrue" :fixed-box="option.fixedBox" /> </div> </div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" :loading="loading" @click="finish">确认</el-button> </div> </el-dialog>完整代码
<template> <div> <!-- element 上传图片按钮 --> <el-upload class="upload-demo" action="" drag list-type="picture" :auto-upload="false" :show-file-list="false" :on-change="changeUpload"> <i class="el-icon-upload" /> <div class="el-upload__text">点击上传</div> <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div> </el-upload> <!-- vueCropper 图片剪裁--> <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body> <div class="cropper-content"> <div class="cropper" style="text-align:center"> <vueCropper ref="cropper" :img="option.img" :output-size="option.size" :output-type="option.outputType" :info="true" :full="option.full" :can-move="option.canMove" :can-move-box="option.canMoveBox" :original="option.original" :auto-crop="option.autoCrop" :fixed="option.fixed" :fixed-number="option.fixedNumber" :center-box="option.centerBox" :info-true="option.infoTrue" :fixed-box="option.fixedBox" /> </div> </div> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" :loading="loading" @click="finish">确认</el-button> </div> </el-dialog> </div></template><script>export default { data () { return { dialogVisible: false, option: { img: '', info: true, outputSize: 0.8, outputType: 'jpeg', canScale: false, autoCrop: true, fixedBox: true, fixed: true, fixedNumber: [95, 80], full: true, canMoveBox: true, original: false, centerBox: false, infoTrue: true }, picsList: [], loading: false } }, methods: { changeUpload (file, fileList) { console.log('file', file, fileList) const isLt5M = file.size / 1024 / 1024 < 5 if (!isLt5M) { this.$message.error('上传文件大小不能超过 5MB!') return false } this.fileinfo = file this.$nextTick(() => { this.option.img = file.url this.dialogVisible = true }) }, finish () { // 获取截图的base64 数据 this.$refs.cropper.getCropData((data) => { // do something console.log(data) }) // 获取截图的blob数据 this.$refs.cropper.getCropBlob((data) => { // do something console.log(data) }) } }}</script><style lang="scss">.cropper-content { .cropper { width: auto; height: 300px; }}</style>
