npm install vue-cropper --save-dev
<template>
<div>
<div class="home-tab-body-img">
<img :src="cutImg" alt @click="handlePictureCardPreview(cutImg)" />
</div>
<label
class="btn btn-orange"
for="uploads"
style="display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;"
>选择图片</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="beforeAvatarUploadPS"
/>
<!-- 剪切图片的弹框-->
<div class="upload-dialog">
<a-modal title="图片裁剪" class="upload_dialog_a" v-model="isCropper" :on-ok="false" footer>
<div class="vue-cropper-box">
<div class="vue-cropper-content" style="height:400px;width:100%;">
<a-row>
<a-col :span="16">
<vueCropper
style="height:400px;"
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="option.info"
:full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:centerBox="option.centerBox"
:original="option.original"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixedBox="option.fixedBox"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
@realTime="realTime"
@imgLoad="imgLoad"
></vueCropper>
</a-col>
<a-col :span="8" style="padding-left:50px;">
<div class="preview-box" >
<div>预览：</div>
<div
:style="previews.div"
class="preview"
style="overflow:hidden;border:1px solid #f1f1f1;"
>
<img :src="previews.url" :style="previews.img" />
</div>
</div>
<div style="margin-top:20px;text-align:center;">
<a-button class="up_foot_button" style="display:inline-block;" type="primary" @click="onCubeImg">确认插入图片</a-button>
</div>
</a-col>
</a-row>
</div>
</div>
<div class="operate-wrap">
<div class="up_foot_box clearfix">
<a-button
class="up_foot_button"
type="primary"
style="position:relative;display:inline-block;width: 70px;padding: 0;text-align: center;line-height: 28px;"
>
选择图片
<input
type="file"
id="uploads"
style="position:absolute;z-index:1001;left:0;top:0; width:70px;opacity:0;"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="beforeAvatarUploadPS"
/>
</a-button>
<a-button class="up_foot_button" type="primary" plain @click="turnLeft">左旋转</a-button>
<a-button class="up_foot_button" type="primary" plain @click="turnRight">右旋转</a-button>
<a-button class="up_foot_button" type="primary" plain @click="changeScale(1)">放大</a-button>
<a-button class="up_foot_button" type="primary" plain @click="changeScale(-1)">缩小</a-button>
</div>
</div>
</a-modal>
</div>
</div>
</template>
<script>
import { VueCropper } from "vue-cropper";
// import Api from '@/js/api.js' //接口url配置文件
export default {
data() {
return {
cutImg: require("./img/cut.jpg"),
fileImgList: [],
isCropper: false,
//裁剪组件的基础配置option
previews: {},
option: {
img: "", // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 1, // 剪切后的图片质量（0.1-1）
full: true, // 输出原图比例截图 props名full
outputType: "jpg", // 裁剪生成额图片的格式
canMove: false, // 能否拖动图片
original: false, // 上传图片是否显示原始宽高
canMoveBox: true, // 能否拖动截图框
centerBox: true, //截图框是否限制在图片里面
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 180, // 默认生成截图框宽度
autoCropHeight: 180, // 默认生成截图框高度
fixedBox: false, // 截图框固定大小
fixed: true,
fixedNumber: [1, 1] //截图框的宽高比例
}
};
},
components: {
VueCropper
},
methods: {
handlePictureCardPreview(cutImg) {
this.option.img = cutImg;
console.log(this.option.img);
this.isCropper = true;
},
beforeAvatarUploadPS(e) {
var file = e.target.files[0];
this.option.img = URL.createObjectURL(file);
const isDWG = file.name.split(".");
const format = isDWG[isDWG.length - 1];
// this.uploadParams.isFile = "1";
// uploadParams.file="";
if (format != "png" && format != "jpg") {
this.$message.error("上传文件只能是 png或jpg 格式!");
return false;
}
this.isCropper = true;
},
// 然后我加了几个剪切的按钮进行旋转或放大，并把上传方法一并粘贴到如下：
turnLeft() {
this.$refs.cropper.rotateLeft();
},
turnRight() {
this.$refs.cropper.rotateRight();
},
cancleCropper() {
//取消截图
this.isCropper = false;
},
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
imgLoad(msg) {
console.log("imgLoad");
console.log(msg);
},
// 实时预览函数
realTime(data) {
console.log("realTime:", data);
this.previews = data;
},
onCubeImg() {
//剪切上传
// 获取cropper的截图的base64 数据
this.$refs.cropper.getCropData(data => {
// this.fileinfo.url = data;
//先将显示图片地址清空，防止重复显示
this.option.img = "";
this.cutImg = data;
//将剪裁后base64的图片转化为file格式
// let file = this.convertBase64UrlToBlob(data);
// this.fileImg=URL.createObjectURL(file);
console.log(data);
this.isCropper = false;
// this.fileList=[{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]
});
},
// 将base64的图片转换为file文件
convertBase64UrlToBlob(urlData) {
let bytes = window.atob(urlData.split(",")[1]); //去掉url的头，并转换为byte
//处理异常,将ascii码小于0的转换为大于0
let ab = new ArrayBuffer(bytes.length);
let ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/jpeg" });
}
// 处理完这些你就可以看看你的也页面了
}
};
</script>
<style >
.upload_dialog_a .ant-modal {
width: 750px !important;
}
.upload_flex {
display: flex;
}
img {
max-width: none;
}
.up_foot_box {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #e8e8e8;
}
.up_foot_button {
margin-right: 20px;
background: #ff4c19;
border: 1px solid #ff4c19;
}
.up_foot_button:hover,.up_foot_button:focus {
margin-right: 20px;
background: #f06640;
border: 1px solid #f06640;
}
</style>
网友评论