vue图片裁剪
Silent1376 人气:1一、效果展示：
1、表单的图片上传项：
- 新增时默认一个空白Input框
- 更新时展示以往上传存放的图片，
- 点击【查看】浏览完整大小
- 点击【删除】清空src地址，重新上传新照片
2、裁剪框页面
- 先选择裁剪的图片
- 右侧展示裁剪区域
- 支持放大缩小，图片旋转
- 点击【上传图片】调用后台上传接口进行上传
二、代码部分
1、首先安装Vue-Cropper，基于此组件的基础上开发的裁剪页面
npm install vue-cropper "vue-cropper": "^0.5.8"
2、裁剪弹窗的组件编写：
<template>
<div
v-loading="loading"
class="cropper-content"
>
<div class="cropper-box">
<div class="cropper">
<vue-cropper
ref="cropper"
:img="option.img"
:output-size="option.outputSize"
:output-type="option.outputType"
:info="option.info"
:can-scale="option.canScale"
:auto-crop="option.autoCrop"
:auto-crop-width="autoCropWidth"
:auto-crop-height="autoCropHeight"
:fixed="option.fixed"
:fixed-number="option.fixedNumber"
:full="option.full"
:fixed-box="option.fixedBox"
:can-move="option.canMove"
:can-move-box="option.canMoveBox"
:original="option.original"
:center-box="option.centerBox"
:height="option.height"
:info-true="option.infoTrue"
:max-img-size="option.maxImgSize"
:enlarge="option.enlarge"
:mode="option.mode"
@realTime="realTime"
@imgLoad="imgLoad"
/>
</div>
<!--底部操作工具按钮-->
<div class="footer-btn">
<div class="scope-btn">
<label
class="btn"
for="uploads"
>选择图片</label>
<input
id="uploads"
type="file"
style="position:absolute; clip:rect(0 0 0 0);"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="selectImg($event)"
>
<el-button
size="mini"
type="danger"
plain
icon="el-icon-zoom-in"
@click="changeScale(1)"
>放大</el-button>
<el-button
size="mini"
type="danger"
plain
icon="el-icon-zoom-out"
@click="changeScale(-1)"
>缩小</el-button>
<el-button
size="mini"
type="danger"
plain
@click="rotateLeft"
>↺ 左旋转</el-button>
<el-button
size="mini"
type="danger"
plain
@click="rotateRight"
>↻ 右旋转</el-button>
</div>
<div class="upload-btn">
<el-button
size="mini"
type="success"
@click="uploadImg('blob')"
>上传图片<i class="el-icon-upload" /></el-button>
</div>
</div>
</div>
<!--预览效果图-->
<div class="show-preview">
<div
:style="previews.div"
class="preview"
>
<img
:src="previews.url"
:style="previews.img"
>
</div>
</div>
</div>
</template>
<script>
import { VueCropper } from 'vue-cropper'
import { uploadFile } from '@/api/smrz/setting'
import { regularFileName } from '@/utils'
export default {
name: 'CropperImage',
components: {
VueCropper
},
/* props: ['name2'],*/
props: {
autoCropWidth: { // 默认生成截图框宽度
type: Number,
default: 410
},
autoCropHeight: { // 默认生成截图框高度
type: Number,
default: 150
},
busType: {
type: String,
default: 'advertPic'
}
},
data() {
return {
loading: false,
name: this.Name,
previews: {},
option: {
img: '', // 裁剪图片的地址
outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
outputType: 'jpeg', // 裁剪生成图片的格式（jpeg || png || webp）
info: true, // 图片大小信息
canScale: true, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
// autoCropWidth: 410, 默认生成截图框宽度
// autoCropHeight: 150, 默认生成截图框高度
fixed: false, // 是否开启截图框宽高固定比例
fixedNumber: [1.53, 1], // 截图框的宽高比例
full: true, // false按原比例裁切图片，不失真
fixedBox: true, // 固定截图框大小，不允许改变
canMove: true, // 上传图片是否可以移动
canMoveBox: true, // 截图框能否拖动
original: true, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
height: true, // 是否按照设备的dpr 输出等比例图片
infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
maxImgSize: 3000, // 限制图片最大宽度和高度
enlarge: 1, // 图片根据截图框输出比例倍数
mode: '230px 150px' // 图片默认渲染方式
},
randomFileName: ''
}
},
methods: {
// 初始化函数
imgLoad(msg) {
console.log('工具初始化函数=====' + msg)
},
// 图片缩放
changeScale(num) {
num = num || 1
this.$refs.cropper.changeScale(num)
},
// 向左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft()
},
// 向右旋转
rotateRight() {
this.$refs.cropper.rotateRight()
},
// 实时预览函数
realTime(data) {
this.previews = data
},
// 选择图片
selectImg(e) {
const file = e.target.files[0]
if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
this.$message({
message: '图片类型要求：jpeg、jpg、png',
type: 'error'
})
return false
}
// 转化为blob
const reader = new FileReader()
reader.onload = (e) => {
let data
if (typeof e.target.result === 'object') {
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else {
data = e.target.result
}
this.option.img = data
}
console.log(`file.name => ${file.name}`)
// 转化为base64
reader.readAsDataURL(file)
},
// 上传图片
uploadImg(type) {
const _this = this
if (type === 'blob') {
// 获取截图的blob数据
this.$refs.cropper.getCropBlob(async(data) => {
_this.loading = true
const formData = new FormData()
// formData.append('file', data, this.createNewFileName())
// if (this.autoCropWidth === 100) {
// formData.append('subDir', 'exchange')
// } else if (this.autoCropHeight === 80) {
// formData.append('subDir', 'task')
// } else {
// formData.append('subDir', 'rotate')
// }
_this.randomFileName = this.createNewFileName()
// 给blob对象的filename属性赋值文件名
formData.append('rpc', data, _this.randomFileName)
// 给参数赋值文件名
formData.append('fileName', _this.randomFileName)
formData.append('busType', _this.busType)
/* this.fileName = data.file.name
formData.append('fileName', this.fileName)*/
// 调用axios上传
/* const { data: res } = await _this.$http.post('/api/file/imgUpload', formData)*/
uploadFile(formData).then(res => {
/* this.handleSuccess(res)*/
if (res.code === 200) {
_this.$message({
message: '图片上传成功',
type: 'success'
})
// const data = res.data.replace('[', '').replace(']', '').split(',')
// const imgInfo = {
// name: 'DX.jpg',
// url: res.data.agentUrl,
// storeUrl: res.data.storeUrl,
// uploadResult: res.data.uploadResult
// }
// _this.$emit('uploadImgSuccess', imgInfo)
// 添加随机生成的文件名
res.fileName = _this.randomFileName
_this.$emit('uploadImgSuccess', res)
} else {
_this.$message({
message: '文件服务异常，请联系管理员！',
type: 'error'
})
}
}).finally(() => {
_this.loading = false
})
})
/* if (flag) {
this.$message.warning('请选择图片')
}*/
}
},
createNewFileName() {
// const now = Date.now()
// const fileName = now + '-' + Math.ceil(Math.random() * 100)
// return fileName + '.jpg'
const fileName = regularFileName()
return fileName + '.jpg'
}
}
}
</script>
<style scoped lang="scss">
.cropper-content {
display: flex;
display: -webkit-flex;
justify-content: flex-end;
.cropper-box {
flex: 1;
width: 100%;
.cropper {
width: auto;
height: 300px;
}
}
.show-preview {
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
.preview {
overflow: hidden;
border: 1px solid #67c23a;
background: #cccccc;
}
}
}
.footer-btn {
margin-top: 30px;
display: flex;
display: -webkit-flex;
justify-content: flex-end;
.scope-btn {
display: flex;
display: -webkit-flex;
justify-content: space-between;
padding-right: 10px;
}
.upload-btn {
flex: 1;
-webkit-flex: 1;
display: flex;
display: -webkit-flex;
justify-content: center;
}
.btn {
outline: none;
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
-webkit-transition: 0.1s;
transition: 0.1s;
font-weight: 500;
padding: 8px 15px;
font-size: 12px;
border-radius: 3px;
color: #fff;
background-color: #409eff;
border-color: #409eff;
margin-right: 10px;
}
}
</style>需要更改成自己的上传接口：
import { uploadFile } from '@/api/smrz/setting'后台接口参数如下，要求表单方式上传
/**
* 上传附件
*
* @param file 文件流(注意带文件后缀,统一使用.jpg结尾)
* @param fileName 文件名称(唯一性)
* @param busType 业务类型(具体值参考ApiConstants类中FILE_开头常量说明)
* @author wangkun
* @createTime 2022/7/19 17:18
*/
@PostMapping(value = "/file/upload", consumes = "multipart/form-data")
public RpcResult uploadFile(@RequestParam(value = "rpc") MultipartFile file, @RequestParam(value = "fileName") String fileName, @RequestParam(value = "busType") String busType) {在uploadImg函数这里，使用FormData对象包装请求参数
注意append方法，要给文件对象指定文件名，必须要入参第三个参数
否则默认名称blob
按实际接口对应调整参数即可
const formData = new FormData()
_this.randomFileName = this.createNewFileName()
// 给blob对象的filename属性赋值文件名
formData.append('rpc', data, _this.randomFileName)
// 给参数赋值文件名
formData.append('fileName', _this.randomFileName)
formData.append('busType', _this.busType)
uploadFile(formData)其它自定义参数，通过Props属性传入此组件
props: {
autoCropWidth: { // 默认生成截图框宽度
type: Number,
default: 410
},
autoCropHeight: { // 默认生成截图框高度
type: Number,
default: 150
},
busType: {
type: String,
default: 'advertPic'
}
},文件名的生成方法，就是当前时间按单位数值排序
实际使用根据业务实际情况改写
export function regularFileName() {
const now = new Date()
const year = now.getFullYear()
const month = digitFix(now.getMonth() + 1)
const dayOfMonth = digitFix(now.getDate())
const hour = digitFix(now.getHours())
const minute = digitFix(now.getMinutes())
const second = digitFix(now.getSeconds())
const millSecond = now.getMilliseconds()
return `${year}${month}${dayOfMonth}${hour}${minute}${second}${millSecond}`
}const fileName = `${regularFileName()}3、【图片上传表单项】组件编写
<template>
<div class="cropper-app">
<el-form
ref="ruleForm"
:model="formValidate"
:rules="ruleValidate"
label-width="110px"
class="demo-ruleForm"
>
<el-form-item
:label="label"
prop="mainImage"
>
<div class="list-img-box">
<div
v-if="formValidate.mainImage !== ''"
class="img_div"
style="height: 100px;"
>
<img
:src="formValidate.mainImage"
alt="图片找不到"
>
<a href="#" rel="external nofollow" >
<div class="mask">
<h3 style="">
<i
class="el-icon-zoom-in"
@click="clickImg('zoom-in')"
/>
<i
class="el-icon-delete"
@click="clickImg('delete')"
/>
</h3>
</div>
</a>
</div>
<div
v-else
class="upload-btn"
style="height: 100px;width: 200px"
@click="uploadPicture('flagImg')"
>
<i
class="el-icon-plus"
style="font-size: 30px;"
/>
<!--<span>封面设置</span>-->
</div>
</div>
<input
v-model="formValidate.mainImage"
type="hidden"
placeholder="请添加封面"
>
</el-form-item>
</el-form>
<!-- 剪裁组件弹窗 -->
<el-dialog
v-if="cropperModel"
title="图片剪切"
:visible.sync="cropperModel"
width="1020px"
center
append-to-body
>
<cropper-image
v-if="cropperModel"
ref="child"
:auto-crop-width="autoCropWidth"
:auto-crop-height="autoCropHeight"
:bus-type="busType"
@uploadImgSuccess="handleUploadSuccess"
/>
</el-dialog>
<!--查看大封面-->
<el-dialog
title=""
:visible.sync="imgVisible"
center
append-to-body
>
<img
v-if="imgVisible"
:src="imgUrl"
style="width: 100%"
alt="查看"
>
</el-dialog>
</div>
</template>
<script>
import CropperImage from '@/components/CropperImage'
import { commonsDownloadAPI } from '@/api/smrz/setting'
export default {
name: 'Tailoring',
components: { CropperImage },
props: {
label: {
type: String,
default: '上传图片'
},
url: {
type: String
},
autoCropWidth: { // 默认生成截图框宽度
type: Number,
default: 410
},
autoCropHeight: { // 默认生成截图框高度
type: Number,
default: 150
},
isSignFlag: {
type: Boolean,
default: false
},
busType: {
type: String,
default: 'busType'
}
},
data() {
var imageUrl2 = (rule, value, callback) => {
if (!this.isSignFlag) {
return callback()
}
if (!value) {
return callback(new Error('请输上传图片'))
}
return callback()
}
return {
formValidate: {
mainImage: ''
},
ruleValidate: {
mainImage: [
/* { required: true, message: '请上传图片', trigger: 'blur' }*/
{ required: true, validator: imageUrl2, trigger: 'blur' }
]
},
// 裁切图片参数
cropperModel: false,
cropperName: '',
imgUrl: '',
imgVisible: false,
dialogImageUrl: '',
dialogVisible: false
}
},
created() {
this.formValidate.mainImage = this.url
this.imgUrl = this.url
},
methods: {
validateForm() {
this.$refs['ruleForm'].validate((valid) => {
this.$emit('validVal', valid)
})
},
// 封面设置
uploadPicture(name) {
this.cropperName = name
this.cropperModel = true
},
// 图片上传成功后
async handleUploadSuccess(data) {
// this.formValidate.mainImage = data.url
// 图片回显
const { data: res2, code } = await commonsDownloadAPI({
fileName: data.fileName,
busType: 'advertPic'
})
const imgBase64 =
code !== 200
? '-1' : `data:image/jpeg;base64,${res2.data}`
this.formValidate.mainImage = imgBase64
/* switch (data.name) {
case 'flagImg':
this.formValidate.mainImage = data.url
console.log('最终输出' + data.name)
console.log('最终输出2' + this.formValidate)
break
}*/
this.cropperModel = false
this.$emit('uploadSuccess', data)
},
clickImg(val) {
if (val === 'delete') {
this.formValidate.mainImage = ''
this.$emit('deleteImage')
} else if (val === 'zoom-in') {
//
this.imgUrl = this.formValidate.mainImage
this.imgVisible = true
}
}
}
}
</script>
<style scoped>
.upload-list-cover {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 40px;
align-items: center;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 1s;
}
.cover_icon {
font-size: 30px;
}
.upload-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border: 1px solid #cccccc;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 1px #cccccc;
}
.upload-btn:hover {
border: 1px solid #69b7ed;
}
.upload-btn i {
margin: 5px;
}
.img_div img {
width: 200px !important;
height: 100px !important;
/* margin: 20px 400px 0 400px;
position: relative;
width: 531px;
height: 354px;*/
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background: rgba(101, 101, 101, 0.6);
color: #ffffff;
opacity: 0;
}
.mask h3 {
text-align: center;
line-height: 60px;
}
.img_div a:hover .mask {
opacity: 0.8;
}
</style>表单项组件需要引入
1、裁剪组件
2、图片下载接口
import CropperImage from '@/components/CropperImage'
import { commonsDownloadAPI } from '@/api/smrz/setting'3、表单项设置了自定义校验
var imageUrl2 = (rule, value, callback) => {
if (!this.isSignFlag) {
return callback()
}
if (!value) {
return callback(new Error('请输上传图片'))
}
return callback()
}就是检查src有没有地址或者base64资源，校验触发的效果：
4、图片上传后的回调处理：
上传成功后，回到表单页需要立即回显之前上传的图片
所以需要调用图片下载接口来获取刚刚上传的资源，
在这个回调方法中实现，因为下载接口提供的资源不是图片地址，而是返回Base64编码
这里我写的是base64编码资源的回显处理
实际使用根据业务实际情况改写
// 图片上传成功后
async handleUploadSuccess(data) {
// this.formValidate.mainImage = data.url
// 图片回显
const { data: res2, code } = await commonsDownloadAPI({
fileName: data.fileName,
busType: 'advertPic'
})
const imgBase64 =
code !== 200
? '-1' : `data:image/jpeg;base64,${res2.data}`
this.formValidate.mainImage = imgBase64
/* switch (data.name) {
case 'flagImg':
this.formValidate.mainImage = data.url
console.log('最终输出' + data.name)
console.log('最终输出2' + this.formValidate)
break
}*/
this.cropperModel = false
this.$emit('uploadSuccess', data)
},4、业务功能引用
引入表单项
import Tailoring from '@/components/Tailoring'
声明组件，并注入参数
<div class="ant-upload-preview">
<tailoring
v-if="true"
ref="child"
label="广告图片"
:is-sign-flag="true"
:url="url"
:bus-type="businessType"
:auto-crop-height="80"
:auto-crop-width="410"
@uploadSuccess="uploadSuccess"
@validVal="validVal"
/>
</div>- url是一开始加载组件需要回显的图片资源地址
- isSignFlag变量用来辅助自定义校验的，为false时直接放行校验，所以默认写死true
- bus-type是自定义的业务参数
- auto-crop的宽高用来配置裁剪的宽高，预览大小和裁剪大小合并使用这两个参数
上传成功的回调，uploadSuccess，可以在组件自定义需要的参数
这里是以图片名称作为记录主键，所以要传入这个文件名
实际使用根据业务实际情况改写
async uploadSuccess(res) {
console.log(`上传结果 res -> ${JSON.stringify(res)}`)
const fileName = res.fileName
this.newId = fileName.substring(0, fileName.lastIndexOf('.'))
},校验值，应该是返回校验后的src值，但我这里没用上，所以不执行任何逻辑
validVal(val) {},
要触发【裁剪表单项】校验，使用
this.$refs.child.validateForm()
加载全部内容