VUE图片裁剪组件,基于VueCropper_sixlabors.imagesharp 接口返回图片大小

VUE图片裁剪组件,基于VueCropper

搬砖的同志麻烦点个赞支持下

效果图

第一步安装vue-cropper插件

npm install vue-cropper
1

第二步创建组件,把下面的代码复制过去,注意修改下上传图片的接口

<template>
  <a-card :bordered="false">
    <div style="font-size: 16px" v-if="hflag">选择图片版式：</div>
    <div class="cropper" style="display: flex" >
      <div style="width: 25%; display: flex; flex-direction: column; justify-content: center; align-items: center" v-if="hflag">
        <div :class="{'col1': hvType, 'col2': !hvType}" class="btn1" @click="chageHVType(1)">
          竖版
        </div>
        <div :class="{'col1': !hvType, 'col2': hvType}" class="btn2" @click="chageHVType(0)">
          横板
        </div>
      </div>
      <div style="width: 75%">
        <VueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :info="true"
          :full="option.full"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :autoCrop="option.autoCrop"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :centerBox="option.centerBox"
          :infoTrue="option.infoTrue"
          :fixedBox="option.fixedBox"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          style="height: 500px; width: 100%"></VueCropper>
      </div>
    </div>
    <div style="display: flex; border-top: 1px solid rgba(0, 0, 0, 0.2); padding-top: 22px; margin-top: 20p; justify-content: flex-end; margin-top: 30px">
      <a-button style="width: 120px; height: 48px; font-size: 16px;" @click="close">取消</a-button>
      <a-button
        style="width: 120px; height: 48px; font-size: 16px;margin-left: 20px;"
        key="submit"
        type="primary"
        :loading="confirmLoading"
        @click="finish">确定</a-button>
    </div>
  </a-card>
</template>
<script>
	import {
		VueCropper
	} from 'vue-cropper'
	import {
		uploadoss
	} from '@/api'
	export default {
		components: {
			VueCropper
		},
		inject: ['closeCurrent'],
		props: {
			hflag: {
				type: Boolean,
				default: () => { return true }
			},
			fileData: {
				type: String,
				default: () => { return '' }
			},
			type: {
				type: String,
				default: () => { return '' }
			},
			fixedNumber: {
				type: Array,
				default: () => { return [9, 16] }
			},
			autoCropWidth: {
				type: Number,
				default: () => {
					return 300
				}
			},
			autoCropHeight: {
				type: Number,
				default: () => {
					return 300
				}
			},
			fixed: {
				type: Boolean,
				default: () => {
					return true
				}
			},
			centerBox: {
				type: Boolean,
				default: () => {
					return true
				}
			},
			infoTrue: {
				type: Boolean,
				default: () => {
					return true
				}
			}
		},
		data() {
			return {
				confirmLoading: false,
				dialogVisible: false,
				// 裁剪组件的基础配置option
				option: {
					img: '', // 裁剪图片的地址
					info: true, // 裁剪框的大小信息
					outputSize: 1, // 裁剪生成图片的质量
					outputType: 'jpeg', // 裁剪生成图片的格式
					canScale: false, // 图片是否允许滚轮缩放
					autoCrop: true, // 是否默认生成截图框
					autoCropWidth: 500, // 默认生成截图框宽度
					autoCropHeight: 500, // 默认生成截图框高度
					fixedBox: true, // 固定截图框大小 不允许改变
					fixed: false, // 是否开启截图框宽高固定比例
					fixedNumber: [9, 16], // 截图框的宽高比例
					full: true, // 是否输出原图比例的截图
					canMoveBox: true, // 截图框能否拖动
					original: true, // 上传图片按照原始比例渲染
					centerBox: false, // 截图框是否被限制在图片里面
					infoTrue: false // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
				},
				picsList: [], // 页面显示的数组
				// 防止重复提交
				loading: false,
				hvType: 1
			}
		},
		watch: {
			infoTrue(e) {
				this.option.infoTrue = e
			},
			centerBox(e) {
				this.option.centerBox = e
			},
			fixed(e) {
				this.option.fixed = e
			},
			autoCropWidth(e) {
				this.option.autoCropWidth = e
			},
			autoCropHeight(e) {
				this.option.autoCropHeight = e
			},
			fileData() {
				this.option.img = this.fileData
			},
			fixedNumber() {
				this.option.fixedNumber = this.fixedNumber
			}
		},
		created() {
			this.option.fixedNumber = this.fixedNumber
		},
		methods: {
			close() {
				this.$emit('close')
			},
			// 点击裁剪，这一步是可以拿到处理后的地址
			finish() {
				var that = this
				this.confirmLoading = true
				this.$refs.cropper.getCropBlob((data) => {
					const formData = new FormData()
					formData.append('avatar', data)
					formData.append('type', this.type)
					uploadoss(formData).then(res => {
						that.confirmLoading = false
						if (res.success != 'false') {
							that.$message.success('上传成功')
							that.$emit('getUrl', res.path)
							that.close()
						} else {
							that.$message.error('上传失败：' + res.message)
						}
					})
				})
			},
			chageHVType(e) {
				this.hvType = e

				if (e == 1) {
					this.option.fixedNumber = [9, 16]
				} else {
					this.option.fixedNumber = [16, 9]
				}
				this.$refs.cropper.refresh()
			}
		}
	}
</script>

<style scoped>
	.btn1 {
		width: 63px;
		height: 112px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer
	}

	.btn2 {
		width: 112px;
		height: 63px;
		margin-top: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer
	}

	.col1 {
		border: 2px dashed #70b603;
		color: #70b603
	}

	.col2 {
		border: 2px dashed #aaaaaa;
		color: #aaa
	}
</style>

<style>
	.ant-upload.ant-upload-drag .ant-upload {
		padding: 16px;
	}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235

最后一步使用组件

<template>
 <Cropper
        :fileData="file"
        type="pro_main"
        v-show="flag"
        @close="flag = false"
        :autoCropWidth="500"
        :autoCropHeight="500"
        :hflag="false"
        :fixed="false"
        :centerBox="false"
        :infoTrue="false"
        @getUrl="getUrl"></Cropper>
</template>
<script>
export default {
		data() {
			return {
			file:'',
			flag:false			
			}
		},
		methods: {
			addFile(file, fileList) {
				console.log(file)
				var that = this
				// 上传之前判断文件类型
				// 图片  1； 视频 2
				var type = checkVideoOrImage(file.name)
				if (type === 1) {
					console.log('type====' + type)
					file2Base64(file).then(res => {
						// 裁剪
						console.log(res)
						that.file = res
						that.flag = true
					})
					return false
				} else {
					this.$message.error('请上传图片格式文件!')
				}				
			}
		}
}
function checkVideoOrImage(fileName) {
		if (fileName.indexOf('.bmp') > 0 || fileName.indexOf('.png') > 0 || fileName.indexOf('.gif') > 0 || fileName.indexOf(
				'.jpg') > 0 || fileName.indexOf('.jpeg') > 0) {
			return 1
		} else if (fileName.indexOf('.mp4') > 0 || fileName.indexOf('.rmvb') > 0 || fileName.indexOf('.avi') > 0) {
			return 2
		} else {
			return 3
		}
	}
function file2Base64(file) {
		var reader = new FileReader() // 实例化文件读取对象
		reader.readAsDataURL(file) // 将文件读取为 DataURL,也就是base64编码
		var dataURL = ''
		return new Promise((resolve, reject) => {
			reader.onload = function(ev) { // 文件读取成功完成时触发
				dataURL = ev.target.result // 获得文件读取成功后的DataURL,也就是base64编码
				resolve(dataURL)
			}
		})
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66