1、安装
npm install vue-cropperjs --save
2、引入
import VueCropper from 'vue-cropperjs'; import 'cropperjs/dist/cropper.css';
components: { VueCropper }
3、html
<div class="cropper"> <div class="cropper-wrapper"> <section class="cropper-content" v-if="state.imgSrc"> <vue-cropper ref="cropper" :aspect-ratio="16 / 16" :src="state.imgSrc" :min-container-width="350" :min-container-height="325" preview=".preview" /> </section> <section class="cropper-content" v-else> </section> <section class="preview-area"> <p>图片预览</p> <div class="preview-wrapper"> <div class="preview" /> </div> </section> </div> <section class="footer-btn"> <div class="scope-btn"> <label class="btn" for="uploads">选择图片</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="setimage($event)" /> <el-button type="primary" @click="zoom(0.2)"> + </el-button> <el-button type="primary" @click="zoom(-0.2)"> - </el-button> <el-button type="primary" @click="rotate(-90)"> <span style="font-weight: 600">↺</span></el-button > <el-button type="primary" @click="rotate(90)"> <span style="font-weight: 600">↻</span> </el-button> </div> <div class="upload-btn"> <el-button type="primary" @click="uploadAvator()"> 上传头像 </el-button> </div> </section> </div>
5、js
setup() { let state = reactive({ fileName: "doctor_avator.png", imgSrc: "", }); let cropper = ref(null); const setimage = (e) => { const file = e.target.files[0]; state.fileName = file.name; if (file.type.indexOf("image/") === -1) { ElMessage.error("请选择图片类型文件"); return; } if (typeof FileReader === "function") { const reader = new FileReader(); reader.onload = (event) => { state.imgSrc = event.target.result; cropper.value.replace(event.target.result); }; reader.readAsDataURL(file); } else { ElMessage.error("Sorry, FileReader API not supported"); } }; const rotate = (deg) => { cropper.value.rotate(deg); }; const zoom = (percent) => { cropper.value.relativeZoom(percent); }; const uploadAvator = () => { cropper.value.getCroppedCanvas().toBlob((blobData) => { let param = new FormData(); param.append("file", blobData, state.fileName); param.append("bucketName", INTERNET_BUCKET); //上传图片到后台服务 //uploadFile({ //param, //callback(filePath) { // uploadDoctorAvator(filePath); //}, //}); }); }; return { state, cropper, setimage, rotate, zoom, uploadAvator, }
}
6、css
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。