在项目中使用到了裁剪图片功能，通过vue-croppe实现
# npm 安装
npm install vue-cropper
# yarn 安装
yarn add vue-cropper
项目中引用引入，这里我的项目是 vue2
// 组件中
import { VueCropper } from 'vue-cropper'
components: {
VueCropper
}
// 全局
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
html
<el-tab-pane label="病理结果展示" name="third" style="pointer-events: auto;">
<el-row :gutter="20">
<el-col :span="11">
<el-upload
action="#"
:http-request="ringrequestUpload"
:show-file-list="false"
:before-upload="ringbeforeUpload"
accept=" .jpeg, .jpg, .png, .JPG, .JPEG, .PNG"
:on-change="changeImgClick"
:on-success="handleAvatarSuccess"
>
<el-button type="primary" size="small">原图片设置</el-button>
</el-upload>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="4" class="imagesStyle">
<h4>病理结果图片：</h4>
<img
:src="ringoptions.img"
alt=""
class="oImg"
@click="changeImageUrl"
/>
</el-col>
<!-- <div @click="tailoring">裁剪</div> -->
<el-col :span="14" style="text-align: center" class="oSpan">
<h4>切割图片操作</h4>
<vue-cropper
ref="ringcropper"
:img="ringoptions.img"
:info="true"
:autoCrop="ringoptions.autoCrop"
:fixedBox="ringoptions.fixedBox"
:canScale="ringoptions.canScale"
:original="ringoptions.original"
:canMove="ringoptions.canMove"
:infoTrue="ringoptions.infoTrue"
:outputSize="ringoptions.outputSize"
:autoCropWidth="ringoptions.autoCropWidth"
:autoCropWidth="ringoptions.autoCropWidth"
:autoCropHeight="ringoptions.autoCropHeight"
:canMoveBox="ringoptions.canMoveBox"
@realTime="ringrealTime"
style="
border: 1px dashed #000;
width: 100%;
height: 100%;
min-height: 1000px;
background-image: none;
"
/>
<p>
<span style="color: #d9001b; font-size: 14px"
>说明：选择需要切割的图片，用鼠标拖拽选取切割区域范围，点击确定按钮，图片修改完成。</span
>
</p>
<div>
<el-button type="primary" @click="cancleOperation">取 消</el-button>
<el-button type="primary" @click="ringuploadImg()">确 定</el-button>
</div>
</el-col>
<el-col :span="6">
<h4>修改后的图片：</h4>
<div class="avatar-upload-ringpreview">
<!-- 预览图片 -->
<div :style="{ width:'350px', height: '300px'}" >
<div v-html="previewHTML" v-if="imageUrl"></div>
</div>
<!-- 截图结果展示 -->
<img :src="imageBase64" :style="screenshotViews.img" @click="modifyImageUrl" class="imgStyle"/>
</div>
<br>
<div v-if="screenshotResults">
<h4>最新截图结果：</h4>
<div class="avatar-upload-ringpreview">
<!-- 图片预览 -->
<img :src="RecentScreenshots" :style="ringpreviews.img" alt="" class="RecentScreenImage">
</div>
</div>
</el-col>
</el-row>
</el-tab-pane>
// 弹出层标题
ringoptions: {
img: null, //裁剪图片的地址
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 400, // 默认生成截图框宽度
autoCropHeight: 300, // 默认生成截图框高度
fixedBox: false, // 固定截图框大小 不允许改变
outputType: "png", // 固定截图框大小 不允许改变
size: 1,
outputSize: 1, // 裁剪生成图片的质量 0.1 - 1
full: false,
canMove: false, //上传图片是否可以移动 默认true
original: false, // 上传图片按照原始比例渲染 false true | false
canMoveBox: true, //截图框能否拖动 true true | false
high: true,
infoTrue: true, // 为展示真实输出图片宽高 false 展示看到的截图框宽高 false true | false
downImg: "#",
fixed: true, //是否开启截图框宽高固定比例
canScale: false, // 图片是否允许滚轮缩放 默认true
maxImgSize: 3000, // 图片最大像素
fixedNumber: [1, 1], // 截图框的宽高比例 [宽度, 高度]
}
ringpreviews: {}, //预览控件
screenshotViews: {}, // 截图前
// 上传预处理
ringbeforeUpload(file) {
if (file.type.indexOf("image/") == -1) {
this.$modal.msgError(
"文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
);
} else {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.ringoptions.img = reader.result;
};
}
},
// 上传图片
ringrequestUpload(obj) {
let fd = new FormData();
fd.append('file', obj.file); //参数
fd.append("IsVal", "true")
fd.append("appUnid", this.data.unid);
UploadImage(fd).then((res) => {
if (res.code === 200) {
this.ImageLis()
this.$message.success("原图上传成功");
}
})
},
// 确定按钮方法，点击确定，对应的截图发生改变
ringuploadImg() {
if (this.ringoptions.img) {
this.$refs.ringcropper.getCropBlob((data) => {
let formData = new FormData();
let file = this.blobToFile(data, "filename.jpg");
formData.append("file", file);
formData.append("IsVal", "false");
formData.append("appUnid", this.data.unid);
UploadImage(formData).then((res) => {
if (res.code === 200) {
this.$message.success("上传成功");
this.ImageLis() // 截图实时更新接口
}
});
});
}
},
// /实时预览
ringrealTime(data) {
this.previewHTML = data.html
this.ringpreviews = data;
},
注意事项：