<!-- 图片剪裁 -->
<el-dialog
title="图片剪裁"
width="860px"
:visible.sync="cropperVisible"
:before-close="cropperClose">
<div class="cropper-wrapper clearfix">
<div class="cropper-sider">
<div class="cropper-preview">
<template v-if="false">
<div class="preview"></div>
</template>
<template v-if="false">
<div class="cropped">
<img
v-if="cropperImg"
:src="cropperImg"
alt="" />
</div>
</template>
</div>
<div class="cropper-scale">
<el-radio-group v-model="cropperRadioVal" @change="cropperRadioChange">
<el-radio :label="1/1">1:1</el-radio>
<el-radio :label="3/4">3:4</el-radio>
<el-radio :label="4/3">4:3</el-radio>
<el-radio :label="9/16">9:16</el-radio>
<el-radio :label="16/9">16:9</el-radio>
<el-radio :label="0">自由拖拽</el-radio>
</el-radio-group>
</div>
<div class="cropper-actions">
<ul class="rows">
<li>
<a
href="javascript:;"
role="button"
class="move-left"
title="向左移动"
@click.prevent="cropperMove(-10, 0)">向左移动</a>
</li>
<li>
<a
href="javascript:;"
role="button"
class="move-right"
title="向右移动"
@click.prevent="cropperMove(10, 0)">向右移动</a>
</li>
<li>
<a
href="javascript:;"
role="button"
class="move-up"
title="向上移动"
@click.prevent="cropperMove(0, -10)">向上移动</a>
</li>
<li>
<a
href="javascript:;"
role="button"
class="move-down"
title="向下移动"
@click.prevent="cropperMove(0, 10)">向下移动</a>
</li>
</ul>
<ul class="rows">
<li>
<a
href="javascript:;"
role="button"
class="rotate-right"
title="向右旋转90度"
@click.prevent="cropperRotate(90)">向右旋转90度</a>
</li>
<li>
<a
href="javascript:;"
role="button"
class="rotate-left"
title="向左旋转90度"
@click.prevent="cropperRotate(-90)">向左旋转90度</a>
</li>
</ul>
<ul class="rows">
<li>
<a
ref="flipX"
href="javascript:;"
role="button"
class="flip-x"
title="上下翻转"
@click.prevent="cropperFlipX()">上下翻转</a>
</li>
<li>
<a
ref="flipY"
href="javascript:;"
role="button"
class="flip-y"
title="左右翻转"
@click.prevent="cropperFlipY()">左右翻转</a>
</li>
</ul>
<ul class="rows">
<li>
<a
href="javascript:;"
role="button"
class="zoom-out"
title="放大"
@click.prevent="cropperZoom(0.2)">放大</a>
</li>
<li>
<a
href="javascript:;"
role="button"
class="zoom-in"
title="缩小"
@click.prevent="cropperZoom(-0.2)">缩小</a>
</li>
</ul>
<ul class="rows">
<li>
<a
href="javascript:;"
role="button"
class="reset"
title="全部重置"
@click.prevent="cropperReset()">全部重置</a>
</li>
</ul>
<input
ref="input"
type="hidden"
name="image"
accept="image/*"
@change="cropperSetImage" />
</div>
</div>
<div class="cropper-content">
<div class="cropper-area">
<div class="cropper-img cropper-bg">
<vue-cropper
ref="cropper"
preview = ".preview"
:auto-crop = true
:view-mode = 1
:auto-crop-area = 1
:min-container-width = 600
:min-container-height = 400
:aspect-ratio = "cropperAspectWH"
:src = "cropperImgSrc"
:container-style = "{ 'width': '100%', 'height': '400px' }"
:img-style = "{ 'max-width': '100%', 'max-height': '100%' }"
:class = "cropperImgSrc == '' ? 'loading' : 'loaded'" />
</div>
</div>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button
size="small"
@click.prevent="cropperCancel()">取 消</el-button>
<el-button
type="primary"
size="small"
@click.prevent="cropperStart()"
v-loading="cropperUploadloading">确 定</el-button>
</div>
</el-dialog>
import VueCropper from 'vue-cropperjs';
export default {
components: {
VueCropper
},
data() {
return {
// 图片剪裁
cropperVisible: false,
cropperLoading: false,
cropperUploadloading: false,
cropperRadioVal: 1,
cropperAspectWH: 1,
cropperImgSrc: '',
cropperImg: '',
cropperData: null,
cropperForm: {
id: 0,
purpose: 2,
group_id: 0,
file_name: '',
file_address: '',
}
}
},
// 图片裁剪
piccropper(scope, index) {
var that = this;
// console.log(scope.id);
that.cropperVisible = true;
that.cropperImgSrc = '';
if(scope.id){
that.cropperForm.id = scope.id;
that.$http.post("/api/PictureOpera", {
id: that.cropperForm.id,
businessType: 'api.picture.opera',
type: "op.get.img"
})
.then(res => {
if (res.data.code == 0) {
that.cropperForm = res.data.result;
//this.$message("成功");
//保存图片到本地
that.$http.post("/Upload/LocalDownLoadImage", {
id: res.data.result.id,
Url:res.data.result.file_address,
FileName: res.data.result.file_name
})
.then(res1 => {
if (res1.data.code == 0) {
//that.$message("图片保存本地成功");
that.cropperImgSrc = res1.data.imgurl;
that.$refs.cropper.replace(res1.data.imgurl);
} else {
that.$message(res1.data.msg);
}
that.cropperLoading = false;
})
} else {
that.$message(res.data.msg);
}
})
}else{
console.log('ERROR: ID传参错误');
}
},
//确定裁剪
cropperStart() {
this.cropperUploadloading = true;
// get image data for post processing, e.g. upload or setting image src
this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
// console.log(this.cropImg);
// 上传裁剪后的图片
this.normTagIcoUpload2();
},
//上传图片
normTagIcoUpload2: function() {
let that = this;
let formData = new FormData();
//base64转文件
var imgFile = that.dataURLtoFile(that.cropImg,that.cropperForm.file_name);
// console.log("正在上传的文件:");
// console.log(imgFile);
// return false;
formData.append("oldFile", that.imgSrc);//本地原图地址
formData.append("file", imgFile);
formData.append("purpose", that.cropperForm.purpose);
formData.append("group_id", that.cropperForm.group_id);
formData.append("fileName", that.cropperForm.file_name);
let config = {"Content-Type": "multipart/form-data"};
that.$http
.post("/upload/CropperSaveImage", formData, {
headers: config
}).then(function(res) {
that.cropperUploadloading = false;
if (res.data.ok) {
that.$message("图片裁剪成功");
} else {
that.$message("图片裁剪失败");
}
// 异步更新数据
that.cropperVisible = false;
that.pictureData();
// that.$router.push('/api/List');
})
.catch(function(error) {
that.$message("ajax error");
});
// 初始化默认数据
},
// 关闭操作框
cropperClose(){
var that = this;
that.cropperVisible = false;
},
// 取消操作框
cropperCancel(){
var that = this;
that.cropperVisible = false;
},
//将图片Base64 转成文件
dataURLtoFile(dataurl, filename) {
// console.log("转文件")
// 获取文件扩展名称
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1];
var extension=mime.split("/")[1];
var bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], filename+"."+extension, {type:mime});
},
cropperRadioChange(e){
this.aspectWH=e;
// console.log("当前比例:");
// console.log(this.aspectWH);
this.$refs.cropper.setAspectRatio(this.aspectWH);
},
cropperFlipX() {
const dom = this.$refs.flipX;
let scale = dom.getAttribute('data-scale');
scale = scale ? -scale : -1;
this.$refs.cropper.scaleX(scale);
dom.setAttribute('data-scale', scale);
},
cropperFlipY() {
const dom = this.$refs.flipY;
let scale = dom.getAttribute('data-scale');
scale = scale ? -scale : -1;
this.$refs.cropper.scaleY(scale);
dom.setAttribute('data-scale', scale);
},
cropperMove(offsetX, offsetY) {
this.$refs.cropper.move(offsetX, offsetY);
},
cropperReset() {
this.$refs.cropper.reset();
},
cropperRotate(deg) {
this.$refs.cropper.rotate(deg);
},
cropperZoom(percent) {
this.$refs.cropper.relativeZoom(percent);
},
cropperGetCropBoxData() {
this.data = JSON.stringify(this.$refs.cropper.getCropBoxData(), null, 4);
},
cropperGetData() {
this.data = JSON.stringify(this.$refs.cropper.getData(), null, 4);
},
cropperSetCropBoxData() {
if (!this.data) return;
this.$refs.cropper.setCropBoxData(JSON.parse(this.data));
},
cropperSetData() {
if (!this.data) return;
this.$refs.cropper.setData(JSON.parse(this.data));
},
cropperSetImage(e) {
const file = e.target.files[0];
if (file.type.indexOf('image/') === -1) {
alert('Please select an image file');
return;
}
if (typeof FileReader === 'function') {
const reader = new FileReader();
reader.onload = (event) => {
this.cropperImgSrc = event.target.result;
// rebuild cropperjs with the updated source
this.$refs.cropper.replace(event.target.result);
console.log(event.target.result);
};
reader.readAsDataURL(file);
} else {
alert('Sorry, FileReader API not supported');
}
},
cropperShowFileChooser() {
this.$refs.input.click();
}
}
<style >
@import "../../../assets/css/cropper.css";
</style>