vue项目实现添加图片裁剪组件
作者：帅_帅
这篇文章主要为大家详细介绍了vue项目实现添加图片裁剪组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue项目添加图片裁剪组件的具体代码，供大家参考，具体内容如下
功能如下图所示：
1、安装命令如下
npm i vue-cropper --save
2、调用组件，引入vue-cropper
import { VueCropper } from “vue-cropper”;3、封装组件代码如下:cropper.vue
<template>
<div class="cropper_model">
<el-dialog
title="图片剪裁"
width="800px"
class="cropper_model_dlg"
:visible.sync="dialogVisible"
append-to-body
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<div class="cropper_content">
<div class="cropper" style="text-align: center;">
<vueCropper
ref="cropper"
:img="options.img"
:outputSize="options.outputSize"
:outputType="options.outputType"
:info="options.info"
:canScale="options.canScale"
:autoCrop="options.autoCrop"
:autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight"
:fixed="options.fixed"
:fixedBox="options.fixedBox"
:fixedNumber="options.fixedNumber"
@realTime="previewImg"
>
</vueCropper>
<div class="cropper_btns">
<el-button type="primary" @click="goUpload" size="mini">
重新上传
</el-button>
<el-button
@click="rotateLeft"
icon="el-icon-refresh-left"
size="mini"
title="左旋转"
>
</el-button>
<el-button
@click="rotateRight"
icon="el-icon-refresh-right"
size="mini"
title="右旋转"
>
</el-button>
<el-button @click="changeScale(1)" size="mini" title="放大">
+
</el-button>
<el-button @click="changeScale(-1)" size="mini" title="缩小">
-
</el-button>
</div>
</div>
<div class="cropper_right">
<h3>预览</h3>
<!-- 预览 -->
<div
class="cropper_preview"
:style="{
width: preview.w + 'px',
height: preview.h + 'px',
overflow: 'hidden',
margin: '5px'
}"
>
<div :style="preview.div">
<img :src="preview.url" :style="preview.img" alt="" />
</div>
</div>
<div style="margin-top: 100px;">
<el-button type="primary" @click="uploadImg" :loading="loading">
确定上传
</el-button>
</div>
</div>
</div>
<!-- <div slot="footer" class="dialog-footer">
<el-button @click="downLoad('blob')">下载</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="uploadImg" :loading="loading">
确认
</el-button>
</div> -->
</el-dialog>
</div>
</template>
<script>
import { VueCropper } from "vue-cropper";
export default {
components: { VueCropper },
data() {
return {
dialogVisible: false,
loading: false,
options: {
img: "", // 裁剪图片的地址
outputSize: 1, // 裁剪生成图片的质量
outputType: "png", // 裁剪生成图片的格式
info: true, // 裁剪框的大小信息
canScale: true, // 图片是否允许滚动缩放
autoCrop: true, // 是否默认生成截图狂
autoCropWidth: 100, // 默认生成截图框宽度
autoCropHeight: 100, // 默认生成截图框高度
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [1, 1], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
fixedBox: true, // 固定截图框大小 不允许改变
canMove: true, // 上传图片是否可以移动
canMoveBox: true, // 截图框能否拖动
original: true, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
high: false, // 是否按照设备的dpr输出等比例图片
infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
maximgSize: 100, // 限制图片最大宽度和高度
enlarge: 1, // 图片根据截图框输出比例倍数
mode: "contain" // 图片默认渲染方式(contain, cover, 100px, 100% auto)
},
preview: {}
};
},
methods: {
open(data) {
this.options.img = window.URL.createObjectURL(data);
this.dialogVisible = true;
},
close(){
this.dialogVisible = false;
},
// base64转图片文件
dataURLtoFile(dataurl, filename) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let len = bstr.length;
let u8arr = new Uint8Array(len);
while (len--) {
u8arr[len] = bstr.charCodeAt(len);
}
return new File([u8arr], filename, { type: mime });
},
downLoad(type) {
event.preventDefault();
const aLink = document.createElement("a");
if (type === "blob") {
this.$refs.cropper.getCropBlob(data => {
let downImg = window.URL.createObjectURL(data);
aLink.download = "photo.png";
aLink.href = downImg;
aLink.click();
});
} else {
this.$refs.cropper.getCropData(data => {
let file = this.dataURLtoFile(data, "test");
aLink.href = file;
aLink.click();
});
}
},
// 左旋转
rotateLeft() {
this.$refs.cropper.rotateLeft();
},
// 右旋转
rotateRight() {
this.$refs.cropper.rotateRight();
},
// 放大缩小
changeScale(num) {
num = num || 1;
this.$refs.cropper.changeScale(num);
},
// 实时预览
previewImg(data) {
this.preview = data;
},
goUpload() {
this.$emit("upAgain");
},
// 上传图片
uploadImg() {
let self = this;
self.loading = true;
this.$refs.cropper.getCropData(data => {
let file = this.dataURLtoFile(data, "photo.png");
// 生成文件类型
self.loading = false;
this.$emit("getFile",file)
});
},
//自定义上传，裁剪后调用
}
};
</script>
<style lang="less" scoped>
.cropper_model_dlg {
.cropper_content {
margin: 0 auto;
width: 700px;
height: 450px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.cropper {
width: 400px;
height: 400px;
background: yellow;
}
.cropper_right {
width: 300px;
text-align: center;
}
.cropper_preview {
margin: 0 auto;
display: inline-block;
border: 1px solid #ddd;
}
.cropper_btns {
margin-top: 20px;
}
}
</style>4、在其他vue组件使用，引用cropper.vue
import MyCropper from "./cropper.vue"
export default里面添加
components:{MyCropper},html中引入
<my-cropper ref="myCropper" @getFile="getFile" @upAgain="upAgain"></my-cropper>
对应的js方法代码
upAgain(){
this.$refs['upload'].$refs["upload-inner"].handleClick();
},
getFile(file){
const formData = new FormData();
formData.append("file",file)
uploadSelfCompanyLogo(formData).then(res =>{
if (res.code === 0) {
this.companyInfo.logo = res.filename;
this.companyInfo.imageUrl = res.url;
this.imageUrl = res.url;
//上传成功后，关闭弹框组件
// this.handleCrop(file);
this.$refs.myCropper.close()
} else {
this.$message.error('上传出错');
}
})
// this.$refs.upload.submit();
},注意：以上代码并不完整， 裁剪组件和elementUI组件中的el-upload的结合使用方法如链接裁剪组件和el-uplod结合
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。