#文章首发挑战赛#

简介

Vue Cropper 是一款实用的 JavaScript 图片裁剪插件，基于 Vue.js 实现了在 web 上对图片的放大缩小、旋转、拖选区域裁剪、图片压缩上传等功能，API 也很简单，使用很方便。

特性

• 基于 Vue 开发，支持最新的 Vue 3.x，兼容 Vue 2.x
• 支持 Vite 和 TypeScript
• 无论是输入和输出图片，图片数据类型都支持 base 64 和 blob，对图片输入和导出上传处理很友好
• 支持压缩图片大小，输出主流的 JPG / PNG / WebP 图片格式
• 除了可以在 web 端使用，也支持在服务端使用

安装

npm install vue-cropper --save

使用

import { VueCropper }  from 'vue-cropper' 
components: {
  VueCropper
}

<el-dialog title="图片预览" width="900px" :visible.sync="addFormVisible" :close-on-click-modal="false">
            <el-row>
                <el-col :span="12">
                    <div style="height: 350px">
                        <vueCropper
                            ref="cropper"
                            :img="options.img"
                            :info="true"
                            :auto-crop="options.autoCrop"
                            :auto-crop-width="options.autoCropWidth"
                            :auto-crop-height="options.autoCropHeight"
                            :fixed-box="options.fixedBox"
                            @realTime="realTime"
                        ></vueCropper></div
                ></el-col>
                <el-col :span="12" style="height: 350px; display: flex; justify-content: center; align-items: center">
                    <div :style="previews.div" class="avatar-upload-preview">
                        <img :src="previews.url" :style="previews.img" />
                    </div>
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="getCropData">确定</el-button>
            </div>
        </el-dialog>

addFormVisible: false,
options: {
	img: '', // 需要剪裁的图片
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框的宽度
  autoCropHeight: 150, // 默认生成截图框的长度
  fixedBox: true // 是否固定截图框的大小 不允许改变
},
previews: {}

realTime(data) {
            this.previews = data
            this.previews.div.overflow = 'hidden'
            this.previews.div['border-radius'] = '50%'
            this.previews.div.border = '1px solid #eee'
        },
        getCropData() {
            this.$refs.cropper.getCropData(data => {
                console.log(data)
            })
        }