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

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

1.使用插件--vueCropper

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

2.示例：

主页面

data(){ return {     formData:{        currentBannerImg:""     },     isShowCropper :false, }}    
                              
      
只能上传jpg、jpeg、png且单个文件不超过10M// 上传图片，成功后调裁剪    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.vue

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