vue项目添加Cropper.js实现裁剪功能
1.安装cropper.js npm install cropper
2.在vue项目的页面中引入
import Cropper from "cropperjs";
import "./image-editor/cropper.min.css"; //需要自己找
3.html页面
<div class="image-editor">
</div>
4.逻辑实现
mounted() {
3.html页面
<div class="image-editor">
<el-form ref="myFormRef" :model="myForm" :rules="myFormRules" label-width="50px">
<el-form-item label="照片" prop="picture">
<el-form-item label="照片" prop="picture">
<el-input type="text" v-model="myForm.picture" disabled v-show="false"/> <!--绑定一个隐藏作用域-->
<div>
<div style="width: 300px; height: 300px">
<div class="cropper">
<img id="cropimg1" :src="myForm.picture" alt=""/>
</div>
</div>
<div class="image-editor-con1-btn-con margin-top-10">
<input
type="file"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="handleChange1"
id="fileinput1"
class="fileinput"
/>
<label class="filelabel" for="fileinput1">选择图片</label>
<span
><el-button
type="primary"
size="mini"
class="ml10"
@click="rotateRight"
><i class="el-icon-refresh-right"></i></el-button
></span>
<span
><el-button
type="primary"
size="mini"
class="ml10"
@click="rotateLeft"
><i class="el-icon-refresh-left"></i></el-button
></span>
<span
><el-button
type="primary"
size="mini"
class="ml10"
@click="upload"
>上传</el-button
></span
>
</div>
</div>
</el-form-item>
</el-form>
</el-form>
</div>
4.逻辑实现
mounted() {
//初始化cropper1
this.$nextTick(function () {
let img1 = document.getElementById("cropimg1");
this.cropper1 = new Cropper(img1, {
dragMode: "move",
preview: "#preview1",
aspectRatio: 0.735, //设置裁剪框为固定的宽高比
restore: false,
center: false,
highlight: false,
cropBoxMovable: false,
toggleDragModeOnDblclick: false,
});
});
},
handleChange1(e) {
let file = e.target.files[0];
let reader = new FileReader();
reader.onload = () => {
this.cropper1.replace(reader.result);
reader.onload = null;
};
reader.readAsDataURL(file);
},
上述方法实现了裁剪功能！
参考文档： https://www.cnblogs.com/eightFlying/p/cropper-demo.html
rotateRight() {
if (document.getElementById("fileinput1").files[0]) {
this.cropper1.rotate(30);
} else {
this.cropper1.rotate(30);
}
},
rotateLeft() {
if (document.getElementById("fileinput1").files[0]) {
this.cropper1.rotate(-30);
} else {
this.cropper1.rotate(-30);
}
},
upload() {
}
base64toFile(dataurl, filename = "file") {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let suffix = mime.split("/")[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], `${filename}.${suffix}`, {
type: mime,
});
},
upload() {
let file = this.cropper1.getCroppedCanvas().toDataURL(); //获取裁剪后的图片，此时返回的是base64位
let data1 = this.base64toFile(file); //base64位转化成file文件
if (data1.size / 1024 / 1024 > 1) { //data1.size返回的单位是字节
this.$message.error("上传的图片必须小于1M!");
return;
}
//传递的参数是FormData对象
let param = new FormData(); // 创建form对象
param.append("file", data1); // 将文件存入file下面
param.append("id", "22");
axios({
method: "post",
url: _this.uploadUrl,
data: param,
headers: {
"Content-Type": "multipart/form-data", //并且header中的Content-type必须是multipart/form-data类型
},
})
5.样式
.image-editor{
.cropper{
box-sizing: border-box;
border: 1px solid #DCDFE6;
width: 100%;
height: 100%;
img{
max-height: 100%;
}
}
.fileinput{
display: none;
}
.filelabel{
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #409EFF;
border: 1px solid #DCDFE6;
color: white;
font-size: 12px;
font-family: sans-serif;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
transition: .1s;
font-weight: 500;
padding: 9px 15px 10px;
margin: 0 2px 0 6px;
border-radius: 4px;
&:hover{
background: #5cadff;
border: 1px solid #5cadff;
transition: all .2s;
}
}
.image-editor-con1 {
height: 300px;
.image-editor-con1-preview-con {
width: 100% !important;
height: 200px !important;
border: 1px solid #c3c3c3;
}
#preview1{
width: 100%;
height: 100%;
overflow: hidden;
}
}
}
参考文档： https://www.cnblogs.com/eightFlying/p/cropper-demo.html
