vue如何利用插件实现按比例切割图片

这篇文章给大家分享的是有关vue如何利用插件实现按比例切割图片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

1.使用插件——vueCropper

安装该插件：npm install vue-cropper
结合el-element的上传组件

2.示例：

主页面

data(){  return {      formData:{         currentBannerImg:""      },      isShowCropper :false,  } } <el-upload       class="avatar-uploader"       list-type="picture-card"       action=""       accept=".jpg, .jpeg, .png"       :with-credentials="true"       :on-change="fileChangeBanner"       :auto-upload="false"       :show-file-list="false"     >     <div class="imgBoX">         <img class="bannerImg" v-if="formData.currentBannerImg" title="点击更换" :src="formData.currentBannerImg" alt="" />         <i class="el-icon-delete delImg" v-if="formData.currentBannerImg" title="删除"></i>         <i v-if="!formData.currentBannerImg" slot="default" class="el-icon-plus"></i>       </div>       <div slot="tip" class="el-upload__tip">只能上传jpg、jpeg、png且单个文件不超过10M</div> </el-upload> // 上传图片，成功后调裁剪     async fileChangeBanner(file, fileList) {       const fileType = file.name.substring(file.name.lastIndexOf(".") + 1);       const fileTypeArr = ["jpg", "jpeg", "png", "JPG", "JPEG", "PNG"];       if (fileTypeArr.indexOf(fileType) < 0) {         this.$alert("请上传格式为jpg、jpeg、png的图片！", "系统提示", {           confirmButtonText: "确定"         });         fileList.splice(fileList.length - 1);         return;       }       // 大小限制       const isLt2M = file.size / 1024 / 1024 < this.$FileSize;       if (!isLt2M) {         this.$alert(`上传文件大小不能超过 ${this.$FileSize}MB！`, "系统提示", {           confirmButtonText: "确定"         });         fileList.splice(fileList.length - 1);         return;       }       // 添加裁剪部分       this.isShowCropper = true;       this.$nextTick(() => {         this.$refs.vueCropperDialog.open(file);       });     },

vueCropperDialog作为组件被引入

<vueCropperDialog @cutImgEnter="cutImgEnter" v-if="isShowCropper" ref="vueCropperDialog"></vueCropperDialog>

vueCropperDialog.vue

<!--  --> <template>   <!-- vueCropper 剪裁图片实现-->   <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>     <div class="cropper-content">       <div class="cropper" >         <vueCropper           ref="cropper"           :img="option.img"           :outputSize="option.size"           :outputType="option.outputType"           :info="true"           :full="option.full"           :canMove="option.canMove"           :canMoveBox="option.canMoveBox"           :original="option.original"           :autoCrop="option.autoCrop"           :fixed="option.fixed"           :fixedNumber="option.fixedNumber"           :centerBox="option.centerBox"           :infoTrue="option.infoTrue"           :fixedBox="option.fixedBox"         ></vueCropper>       </div>     </div>     <div slot="footer" class="dialog-footer btnBox">       <div>         <el-button icon="el-icon-refresh-left" @click="turnLeftOrRight('left')">左旋转</el-button>         <el-button icon="el-icon-refresh-right" @click="turnLeftOrRight('right')">右旋转</el-button>       </div>       <div>         <el-button @click="dialogVisible = false">取 消</el-button>         <el-button type="primary" @click="finish" :loading="loading">确认</el-button>       </div>     </div>   </el-dialog> </template> <script> export default {   data() {     return {       fileinfo:"",       dialogVisible: false,       // 裁剪组件的基础配置option       option: {         img: "", // 裁剪图片的地址         info: true, // 裁剪框的大小信息         outputSize: 0.8, // 裁剪生成图片的质量         outputType: "jpeg", // 裁剪生成图片的格式         canScale: false, // 图片是否允许滚轮缩放         autoCrop: true, // 是否默认生成截图框         // autoCropWidth: 563, // 默认生成截图框宽度         // autoCropHeight: 387, // 默认生成截图框高度         fixedBox: true, // 固定截图框大小 不允许改变         fixed: true, // 是否开启截图框宽高固定比例         fixedNumber: [1.45, 1], // 截图框的宽高比例         full: true, // 是否输出原图比例的截图         canMoveBox: false, // 截图框能否拖动         original: false, // 上传图片按照原始比例渲染         centerBox: false, // 截图框是否被限制在图片里面         infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高       },       picsList: [], //页面显示的数组       // 防止重复提交       loading: false     };   },   methods: {     open(file) {       this.fileinfo = file;       this.option.img = file.url;       this.dialogVisible = true;     },     blobToFile(theBlob, file) {       const files = new window.File([theBlob], file.name, { type: theBlob.type });       return files;     },     //左旋转     turnLeftOrRight(type) {       if (type == "left") {         this.$refs.cropper.rotateLeft();       } else {         this.$refs.cropper.rotateRight();       }     },     // 点击裁剪，这一步是可以拿到处理后的地址     finish() {       this.$refs.cropper.getCropBlob((data) => {         this.loading = true;         const changeFile = this.blobToFile(data, this.fileinfo);         const fielUrl = window.URL.createObjectURL(data);         //裁剪成功后的回调         this.$emit("cutImgEnter", changeFile, fielUrl);         this.loading = false;         this.dialogVisible = false;       });     }   } }; </script> <style lang="scss" scoped> // 截图 .cropper-content {   .cropper {     width: auto;     height: 300px;   } } .btnBox {   display: flex;   align-items: center;   justify-content: space-between; } </style>

感谢各位的阅读！关于“vue如何利用插件实现按比例切割图片”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！