图片裁剪
旋转:
重新裁切:
裁切后宽/高:
ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :fixedBox="option.fixedBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :centerBox="option.centerBox" :high="option.high" :infoTrue="option.infoTrue" :enlarge="option.enlarge" :maxImgSize="option.maxImgSize" @realTime="realTime" :canScale="option.canScale">
import { VueCropper } from 'vue-cropper'
export default {
components: { VueCropper },
data(){
return{
option: {
img: '',
outputSize: 1,
outputType: 'png', // 输出图片格式
full: true, // 是否输出原图比例的截图
canMove: true, // 能否拖动图片
canMoveBox: true, // 能否拖动截图框
fixedBox: false, // 截图框固定大小
original: true, // 上传图片是否显示原始宽高
autoCrop: true, // 是否自动生成截图框
autoCropWidth: 400, // 自动生成截图框宽度
autoCropHeight: 250, // 自动生成截图框高度
centerBox: false, // 截图框是否限制在图片里(只有在自动生成截图框时才能生效)
high: true, // 是否根据dpr生成适合屏幕的高清图片
infoTrue: true, // 截图信息展示是否是真实的输出宽高
cropData: {},
enlarge: 1, // 是否按照截图框比例输出
mode: 'cover', // 图片默认渲染方式
canScale: true, // 是否允许滚轮图片缩放
maxImgSize: 40000 // 最大上传图片尺寸
},
}
}
refreshCrop () {
// clear
this.$refs.cropper.refresh()
},
clearCrop () {
// clear
this.$refs.cropper.clearCrop()
},
changeScale (num) {
num = num || 1
this.$refs.cropper.changeScale(num)
},
rotateLeft () {
this.$refs.cropper.rotateLeft()
},
rotateRight () {
this.$refs.cropper.rotateRight()
},
finish (type) {
// 输出并上传服务器
var that = this
that.dialogVisible = !that.dialogVisible
if (type === 'blob') {
this.$refs.cropper.getCropBlob(data => {
var formData = new FormData()
var img = window.URL.createObjectURL(data)
this.model = true
this.modelSrc = img
var file = new File([data], 'img.png', { type: 'image/png' })
formData.append('img', file)
var axiosInstance = axios.create()
axiosInstance.post('/M/File/PostUploadFile', formData).then((res) => {
var param = {
'fileName': res.data.other.imgName,
'groupId': that.selectGroup, // 图片分组
'filePath': res.data.other.imgUrl,
'fileSpec': res.data.other.imgWidth + 'x' + res.data.other.imgHeight,
'fileSize': res.data.other.imgLength,
'fileType': res.data.other.imgType
}
that.$http.post('/api/BS_FileSourceMaterial/Create', param).then(function (res) {
that.getDataList()
})
})
})
} else {
this.$refs.cropper.getCropData((data) => {
this.model = true
this.modelSrc = data
})
}
},
// 实时尺寸
realTime () {
var previews = this.$refs.cropper.cropInfo
this.previews = {
width: previews.width,
height: previews.height
}
},
uploadImg (e, num) {
// 上传图片
var that = this
var file = e.target.files[0]
if (!/\.(jpg|jpeg|png|bmp|JPG|PNG)$/.test(e.target.value)) {
that.$message.error('亲,上传图片不能为空,并且裁切只支持jpeg,jpg,png,bmp格式哦!')
document.getElementById('uploads').value = null
return false
} else if (file.size / 1024 / 1024 > 1) {
that.$message.error('上传的图片大小不能超过 1MB,请使用批量上传!')
document.getElementById('uploads').value = null
} else {
that.isShowDialog()
var reader = new FileReader()
reader.onload = e => {
var data
if (typeof e.target.result === 'object') {
// 把Array Buffer转化为blob 如果是base64不需要
data = window.URL.createObjectURL(new Blob([e.target.result]))
} else {
data = e.target.result
}
this.option.img = data
}
reader.readAsArrayBuffer(file)
document.getElementById('uploads').value = null
}
}
},
}
其中你可能会碰到图片上传一次后不能再次上传同一张图片的坑，因为input在上传文件时候比较特殊，所以我们需要处理一下
document.getElementById('uploads').value = null 获取input ,在每次上传结束后把他的值清空，