vue 图片裁剪并回传显示
vue 图片裁剪并回传显示
数据页面：:ResourceUrl="resourceUrl"，注意，该代码是向裁剪页回传图片数据
<template>
<div>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
<el-form-item prop="coverUrl" :label="$t('course.coverUrl')">
<div class="list-img-box">
<img :src="courseUrl" style='width:120px;height:120px;border:none;' alt="自定义图片" @error="imgError()"><br/>
<el-button type="text" @click="uploadPicture('flagImg')">修改图片</el-button>
</div>
<input type="hidden" v-model="dataForm.coverUrl" placeholder="请添加图片">
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="visible = false">{{ $t('cancel') }}</el-button>
<el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
</template>
</el-dialog>
<!-- 弹窗, 上传文件 -->
<upload v-if="uploadVisible" ref="upload" @uploadback="uploadUrl"></upload>
<!-- 剪裁组件弹窗 -->
<el-dialog title="裁切封面" :visible.sync="cropperModel" v-if="cropperModel" width="1130px" center append-to-body :before-close="dialogClose">
<cropper-image :Name="cropperName" :ResourceUrl="resourceUrl" @uploadImgSuccess = "handleUploadSuccess" ref="child" :key="componentKey">
</cropper-image>
</el-dialog>
<!--查看大封面-->
<el-dialog title="查看大封面" :visible.sync="imgVisible" center>
<img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看">
</el-dialog>
</div>
</template>
<script>
import debounce from 'lodash/debounce'
import CropperImage from './cropperImage'
export default {
data () {
return {
visible: false,
dataForm: {
id: '',
coverUrl: ''
},
courseUrl: '',
// 裁切图片参数
cropperModel: false,
cropperName: '',
resourceUrl: '',
imgName: '',
imgVisible: false,
// 该参数作用是点击上传图片确定按钮后，刷新页面数据
componentKey: 0
}
},
components: {
CropperImage
},
methods: {
init () {
this.visible = true
this.$nextTick(() => {
this.courseUrl = ''
this.$refs['dataForm'].resetFields()
if (this.dataForm.id) {
this.getInfo()
}
})
},
// 封面设置
uploadPicture (name) {
this.cropperName = name
this.cropperModel = true
},
// 点击叉号，关闭弹窗
dialogClose () {
this.cropperModel = false
// 点击叉号，清除之前上传的图片
this.resourceUrl = ''
this.$emit('refreshDataList')
},
// 图片上传成功后
handleUploadSuccess (data) {
this.dataForm.coverUrl = data.url
this.courseUrl = `${window.SITE_CONFIG['apiURL']}` + data.url
this.cropperModel = false
// 清除之前上传的图片
this.resourceUrl = ''
this.$emit('refreshDataList')
},
// 默认头像
imgError() {
this.courseUrl = require('@/assets/img/course.png');
},
// 获取信息
getInfo () {
this.$http.get(`/cd/course/info/${this.dataForm.id}`).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.dataForm = {
...this.dataForm,
...res.data
}
if (res.data.coverUrl != null) {
let prefixUrl = `${window.SITE_CONFIG['apiURL']}`
this.courseUrl = prefixUrl + res.data.coverUrl
// 回显的图片路径
this.resourceUrl = res.data.coverUrl
}
}).catch(() => {})
},
// 上传文件
uploadHandle () {
this.uploadVisible = true
let type = 0
this.$nextTick(() => {
this.$refs.upload.init(type)
})
},
// 上传文件成功后，子组件回传到父组件资源id
uploadUrl (val) {
this.dataForm.coverUrl = val.resourceUrl
let prefixUrl = `${window.SITE_CONFIG['apiURL']}`
this.courseUrl = prefixUrl + val.resourceUrl
},
// 表单提交
dataFormSubmitHandle: debounce(function () {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/cd/course', this.dataForm).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.componentKey += 1;
this.$emit('refreshDataList')
}
})
}).catch(() => {})
})
}, 1000, { 'leading': true, 'trailing': false })
}
}
</script>
裁剪页面：
<template>
<div class="cropper-content">
<div class="cropper-box">
<div class="cropper">
<vue-cropper
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:full="option.full"
:fixedBox="option.fixedBox"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:centerBox="option.centerBox"
:height="option.height"
:infoTrue="option.infoTrue"
:maxImgSize="option.maxImgSize"
:enlarge="option.enlarge"
:mode="option.mode"
@realTime="realTime"
@imgLoad="imgLoad">
</vue-cropper>
</div>
<!--底部操作工具按钮-->
<div class="footer-btn">
<div class="scope-btn">
<label class="btn" for="uploads" >选择封面</label>
<input type="file" id="uploads" 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"></i></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 Cookies from 'js-cookie'
export default {
name: 'CropperImage',
components: {
VueCropper
},
props: ['Name','ResourceUrl'],
data () {
return {
name: this.Name,
resourceUrl: this.ResourceUrl,
previews: {},
option: {
img: '', // 裁剪图片的地址
outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
outputType: 'jpeg', // 裁剪生成图片的格式（jpeg || png || webp）
info: true, // 图片大小信息
canScale: true, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 500, // 默认生成截图框宽度
autoCropHeight: 320, // 默认生成截图框高度
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [25, 16], // 截图框的宽高比例
full: false, // false按原比例裁切图片，不失真
// fixedBox: true, // 固定截图框大小，不允许改变
canMove: false, // 上传图片是否可以移动
canMoveBox: true, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
height: true, // 是否按照设备的dpr 输出等比例图片
infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
maxImgSize: 3000, // 限制图片最大宽度和高度
enlarge: 1, // 图片根据截图框输出比例倍数
mode: '500px 320px', // 图片默认渲染方式
filename: '',
//centerBox: false, // 截图框是否被限制在图片里面
fixed: false, // 是否开启截图框宽高固定比例
}
}
},
mounted() {
let prefixUrl = `${window.SITE_CONFIG['apiURL']}`
let url = prefixUrl + this.resourceUrl;
// 回传的数据是base64，所以在这里将接收到的图片路径转base64格式
this.toBase64(url)
},
methods: {
toBase64(imgUrl) {
// 一定要设置为let，不然图片不显示
let image = new Image();
// 解决跨域问题
image.setAttribute('crossOrigin', 'anonymous');
let imageUrl = imgUrl;
image.src = imageUrl
// image.onload为异步加载
image.onload = () => {
let canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
let quality = 0.8;
// 这里的dataurl就是base64类型
// 使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！
let dataurl = canvas.toDataURL('image/jpeg', quality);
this.option.img = dataurl
}
},
// 初始化函数
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) {
let file = e.target.files[0]
this.filename = file.name
if (!/\.(jpg|jpeg|png|gif|JPG|PNG|GIF)$/.test(e.target.value)) {
this.$message({
message: '图片类型要求：jpeg、jpg、png',
type: 'error'
})
return false
}
// 转化为blob
let 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
}
// 转化为base64
reader.readAsDataURL(file)
},
// 上传图片
uploadImg (type) {
if (type === 'blob') {
// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
let formData = new FormData()
formData.append('file', data, this.filename)
this.$http({
url: `${window.SITE_CONFIG['apiURL']}/cd/resource/upload?token=${Cookies.get('token')}`,
method: 'post',
data: formData
}).then(({data}) => {
if (data.code === 0) {
this.$message({
message: '上传成功',
type: 'success'
})
console.log("-------",data)
let imgInfo = {
name: this.Name,
url: data.data.resourceUrl
}
this.$emit('uploadImgSuccess', imgInfo)
} else {
this.$message({
message: '文件服务异常，请联系管理员！',
type: 'error'
})
}
})
})
}
}
}
}
</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: 400px;
}
}
.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: .1s;
transition: .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>