vue图片裁剪组件封装

约定不等于承诺〃 2023-03-01 10:49 72阅读 0赞

本文封装了一个上传图片裁剪功能的组件，这里引入了vue-cropper插件。
安装

  1. npm install vue-cropper

使用

  1. import VueCropper from 'vue-cropper'
  2. Vue.use(VueCropper)

创建个子组件

  1. <template>
  2.   <div class="cropper-box" >
  4.     <VueCropper 
  5.       :style="{width:option.autoCropWidth+'px',height:option.autoCropHeight+'px',margin:'0 auto'}"
  6.       ref="cropper"
  7.       :img="option.img"
  8.       :outputSize="option.outputSize"
  9.       :outputType="option.outputType"
  10.       :infoTrue="true"
  11.       :full="option.full"
  12.       :canMove="option.canMove"
  13.       :canMoveBox="option.canMoveBox"
  14.       :fixedBox="option.fixedBox"
  15.       :original="option.original"
  16.       :autoCrop="option.autoCrop"
  17.       :fixed="option.fixed"
  18.       :fixedNumber="option.fixedNumber"
  19.       :centerBox="option.centerBox"
  20.       :autoCropWidth="option.autoCropWidth"
  21.       :autoCropHeight="option.autoCropHeight"
  22.       :enlarge="option.enlarge"
  23.       :mode="option.mode"
  24.     ></VueCropper>
  25.     <div style="margin-top:10px;text-align:center">
  26.       <el-button type="info" @click="closeFun">取消</el-button>
  27.       <el-button type="primary" @click="finish('blob')">裁剪</el-button>
  28.       <el-button type="primary" @click="useOriginImage()">使用原图</el-button>
  29.     </div>
  30.   </div>
  31. </template>
  32. <script>
  33. import VueCropper from 'vue-cropper'
  34. export default {
  35.   name: 'Cropper', // 图片裁剪
  36.   props: {
  37.     widthSize: {
  38.       type: 'Number',
  39.       default: 750
  40.     },
  41.     heightSize: {
  42.       type: 'Number',
  43.       default: 750
  44.     },
  45.     imgUrl: {
  46.       default: ''
  47.     },
  48.     ratio: {
  49.         type: 'Number',
  50.         default: 2
  51.     }
  52.   },
  53.   data() {
  54.     return {
  55.       option: {
  56.         img: '',//裁切图片的地址
  57.         outputSize: 1,//裁剪生成图片的质量 0.1-1
  58.         full: false,//是否输出原图比例的截图
  59.         outputType: 'png',//裁剪生成图片的格式
  60.         canMove: true,//图片是否允许滚轮缩放
  61.         fixedBox: true,//固定截图框大小 不允许改变
  62.         original: true,//上传图片按照原始比例渲染
  63.         canMoveBox: false,//截图框能否拖动
  64.         centerBox: false,// 截图框是否被限制在图片里面
  65.         canMove:true,// 上传图片是否可以移动
  66.         autoCropWidth: 200,
  67.         autoCropHeight: 200,
  68.         autoCrop:true,//是否默认生成截图框
  69.         // 开启宽度和高度比例
  70.         fixed: true,
  71.         fixedNumber: [1, 1],  // 截图框的宽高比例
  72.         enlarge: 1,  // 图片根据截图框输出比例倍数
  73.         mode: 'contain'
  74.       },
  75.       previews: {}
  76.     }
  77.   },
  78.   created() {
  79.     this.option.img = this.imgUrl;
  80.     this.option.fixedNumber = [this.widthSize, this.heightSize];
  81.     this.option.enlarge = this.ratio;
  83.     this.option.autoCropWidth = this.widthSize / this.ratio;
  84.     this.option.autoCropHeight = this.heightSize / this.ratio;
  85.     console.log('this.option.autoCropWidth', this.option.autoCropWidth);
  86.     console.log('this.option.autoCropHeight', this.option.autoCropHeight);
  87.   },
  88.   methods: {
  89.     /**
  90.      * 裁剪返回图片（base 64）
  91.      */
  92.     finish (type) {
  93.       var that =this;
  94.       this.$refs.cropper.getCropData((data) => {
  95.         //裁切生成的base64图片
  96.         this.$emit("editCoverFunc", this.convertBase64UrlToBlob(data))
  97.       })
  98.     },
  99.     useOriginImage(){//使用原图，不做裁剪
  100.       this.$emit("useOriginImage")
  101.     },
  102.     convertBase64UrlToBlob(urlData) {
  103.       const bytes = window.atob(urlData.split(',')[1])// 去掉url的头，并转换为byte
  104.       // 处理异常,将ascii码小于0的转换为大于0
  105.       const ab = new ArrayBuffer(bytes.length)
  106.       const ia = new Uint8Array(ab)
  107.       for (var i = 0; i < bytes.length; i++) {
  108.         ia[i] = bytes.charCodeAt(i)
  109.       }
  110.       return new Blob([ab], { type: 'image/jpeg' })
  111.     },
  112.     closeFun() {
  113.       this.$emit("editCoverFunc", false)
  114.     }
  115.   }
  116. };
  117. </script>
  118. <style scoped>
  119. .cropper-box{
  120.   position: relative;
  121.   z-index: 99999999999 !important
  122. }
  123. </style>

创建个父组件

  1. <template>
  2.   <div>    
  3.     <el-upload class="avatar-uploader" :style="{ width: styleWidth+'px' }" :auto-upload="false" :show-file-list="false"
  4.       ref="uploadCover" :on-change="handleFilechange" :before-upload="beforeAvatarUpload" name="files">
  5.       <div :class="{'imageUrl-wp': imageUrl}"
  6.         :style="{ width: styleWidth+'px' ,height:styleHeight+'px' ,lineHeight:styleHeight+'px' }">
  7.         <img v-if="imageUrl" :src="imageUrl" class="avatar">
  8.         <i v-else class="el-icon-plus avatar-uploader-icon"
  9.           :style="{ width: styleWidth+'px' ,height:styleHeight+'px' ,lineHeight:styleHeight+'px' }"></i>
  10.       </div>
  11.     </el-upload>
  12.     <span :class="explain" v-if="crop">建议尺寸: {
  13.    {widthSize}} x {
  14.    {heightSize}}</span>
  15.     <el-dialog title="图片裁剪" :visible.sync="editCover" :close-on-click-modal="false" width="60%" center append-to-body
  16.       @close="close">
  17.       <CropperIndex v-if="editCover" :widthSize="widthSize" :heightSize="heightSize" :imgUrl="imageUrl" :ratio="ratio"
  18.         @editCoverFunc="handleCropped" @useOriginImage="handleNoCrop"></CropperIndex>
  19.     </el-dialog>
  20.   </div>
  21. </template>
  23. <script>
  24.   import CropperIndex from "@/components/cropperIndex";
  25.   import {
  26.     uploadFile
  27.   } from "@/api/table";
  29.   export default {
  30.     components: {
  31.       CropperIndex
  32.     },
  33.     props: {
  34.       widthSize: {
  35.         type: "Number",
  36.         default: 750
  37.       },
  38.       heightSize: {
  39.         type: "Number",
  40.         default: 750
  41.       },
  42.       initImgUrl: {
  43.         default: ""
  44.       },
  45.       styleWidth: {
  46.         type: "Number",
  47.         default: 70
  48.       },
  49.       ratio: {
  50.         type: "Number",
  51.         default: 2
  52.       },
  53.       explain: {
  54.         type: String
  55.       },
  56.       crop: {
  57.         type: Boolean,
  58.         default: true
  59.       },
  60.       sizeM:{
  61.         default:3
  62.       }
  63.     },
  64.     mounted(){
  65. console.log(this.explain);
  66.     },
  67.     data() {
  68.       return {
  69.         editCover: false, // 控制裁剪弹窗
  70.         imageUrl: this.initImgUrl, // 图片地址
  71.         imageOriginUr:"",//原图地址  
  72.         needClose:true,//是否需要判断close，直接关闭需要判断      
  73.       };
  74.     },
  75.     computed: {
  76.       styleHeight: function () {
  77.         return this.styleWidth * this.heightSize / this.widthSize;
  78.       }
  79.     },
  80.     created() {
  81.       console.log('imageUrl', this.imageUrl);
  82.       console.log('prop', this.initImgUrl);
  83.     },
  84.     methods: {
  85.       handleFilechange(file, files) {
  86.         let _this=this;
  87.         if (this.checkImg(file)) {          
  88.           if (file.raw.type === 'image/gif'){
  89.             const formData = new FormData();
  90.             formData.append('files', file.raw);
  91.             uploadFile(formData).then(res => {
  93.               this.imageUrl = res.data;
  94.               this.needClose=false;
  95.               this.$emit('imgEdit', this.imageUrl);
  96.             });
  97.           }else{
  98.             var image=new Image();
  99.             image.onload=function(){
  100.               if(image.width==parseInt(_this.widthSize)&&image.height==parseInt(_this.heightSize)){
  101.                 _this.crop=false;//如果图片的比例就是约定的比例，那么不会再触发裁剪
  102.               }              
  103.               if(parseInt(image.width)*parseInt(_this.heightSize)==parseInt(image.height)*parseInt(_this.widthSize)){
  104.                 _this.crop=false;//如果图片的比例与约定的比例相同，那么不再触发裁剪
  105.               }
  107.               const formData = new FormData();
  108.               formData.append('files', file.raw);
  109.               uploadFile(formData).then(res => {
  110.                 _this.imageOriginUr = res.data;
  111.                 if(!_this.crop){
  112.                   _this.imageUrl = _this.imageOriginUr;
  113.                   _this.needClose=false;
  114.                   _this.$emit('imgEdit', _this.imageUrl);
  115.                 }else{
  116.                   _this.imageUrl = URL.createObjectURL(file.raw);
  117.                   _this.editCover = true;
  118.                 }                
  119.               });
  120.             }
  121.             image.src=URL.createObjectURL(file.raw);
  122.           }   
  124.         }
  125.       },
  126.       checkImg(file) {                
  127.         const fileType = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type ===
  128.           'image/gif';
  129.         const isLt3M = file.size / 1024 / 1024 < this.sizeM;
  131.         if (!fileType) {
  132.           this.$message.error('上传图片只能是 jpg/png/gif 格式!');
  133.         }
  134.         if (!isLt3M) {
  135.           this.$message.error('上传图片大小不能超过 '+this.sizeM+'MB!');
  136.         }
  137.         return fileType && isLt3M;
  138.       },
  139.       handleCropped(data) {
  140.         this.needClose=false;
  141.         if (data !== false) {
  142.           const formData = new FormData();
  143.           console.log(data)
  144.           formData.append('files', data, 'jpg');
  145.           uploadFile(formData).then(res => {
  147.             this.imageUrl = res.data;
  148.             this.$emit('imgEdit', this.imageUrl);
  149.           });
  150.         } else {
  151.           this.imageUrl = this.initImgUrl;
  153.         }
  154.         this.editCover = false;
  156.       },
  157.       handleNoCrop(){//不做裁剪，使用原图
  158.         this.imageUrl = this.imageOriginUr;
  159.         this.$emit('imgEdit', this.imageUrl);        
  160.         this.needClose=false;
  161.         this.editCover = false;
  163.       },
  164.       close() {
  165.         if(this.needClose){
  166.           this.imageUrl = this.initImgUrl;
  167.         }
  168.       }
  169.     }
  170.   };
  172. </script>
  174. <style lang="scss" scoped>
  175.   .avatar-uploader-icon {
  176.     font-size: 28px;
  177.     color: #8c939d;
  178.     width: 120px;
  179.     height: 120px;
  180.     line-height: 120px;
  181.     text-align: center;
  182.     border: 1px dashed #d9d9d9;
  183.     border-radius: 4px;
  184.     cursor: pointer;
  185.     position: relative;
  186.     overflow: hidden;
  187.   }
  189.   .avatar-uploader-icon:hover {
  190.     border-color: #409eff;
  191.   }
  193.   .imageUrl-wp {
  194.     // width: 120px;
  195.     // height: 120px;
  196.     // line-height: 120px;
  197.     // margin-right: 20px;
  198.      border: 1px dashed #d9d9d9;
  199.      border-radius: 4px;
  200.      /*box-sizing: content-box;*/
  201.   }
  203.   .avatar {
  204.     // vertical-align: middle;
  205.     display: inline-block;
  206.     max-width: 100%;
  207.     max-height: 100%;
  208.     // display: block;
  209.     /*vertical-align: middle;*/
  210.     text-align: center;
  211.     display: table-cell;
  212.     display: inline;
  213.   }
  215.   .avatar-explain {
  216.     display: none;
  217.   }
  218.   .avatar-uploader {
  219.     line-height:0;
  220.   }
  222. </style>

最后在最外层组件引用

  1. <template>
  2.     <div>
  3.         <el-form ref="dataForm" :rules="rules" :model="info" label-position="left" label-width="90px" style="width: 500px; margin-left:50px;">
  4.             <el-form-item label="明星姓名" prop="starName">
  5.                 <el-input v-model="info.starName" placeholder="请填写明星姓名" />
  6.             </el-form-item>
  7.             <el-form-item label="明星头像" prop="starAvatar">
  8.                 <ImgEditor :widthSize="200" :heightSize="200" :initImgUrl="info.starAvatar" :styleWidth="120" :key="info.starAvatar" @imgEdit="onImgEdited"></ImgEditor>
  9.             </el-form-item>
  10.             <el-form-item label="稿件ID" prop="articleId">
  11.                 <p class="tip_text">ID填写完毕后点击 回车键 自动获取标题和封面</p>
  12.                 <el-input v-model="info.articleId" placeholder="请填写稿件ID" @keyup.enter.native="findArticle(info.articleId)" />
  13.                 <p class="tip_text">请选择视频、图文</p>
  14.             </el-form-item>
  15.             <el-form-item label="标题" prop="title">
  16.                 <el-input v-model.trim="info.title" placeholder="请填写标题" maxlength="40" show-word-limit/>
  17.             </el-form-item>
  18.             <el-form-item label="图片" prop="cover">
  19.                 <ImgEditor :widthSize="750" :heightSize="600" :initImgUrl="info.cover" :styleWidth="120" :key="info.cover" @imgEdit="onImgEdited1"></ImgEditor>
  20.             </el-form-item>
  21.         </el-form>
  22.         <div style="margin:0 auto;width:200px;">
  23.             <el-button @click="close()">
  24.                 取消
  25.             </el-button>
  26.             <el-button type="primary" @click="detailEdit('dataForm')">
  27.                 保存
  28.             </el-button>
  29.         </div>
  30.     </div>
  31. </template>
  32. <script>
  33.     import ImgEditor from '@/components/imgEditor'
  34.     import { addStarVideo, updateStarVideo } from '@/api/chunjieActivity'
  35.     import { findArticle } from '@/api/table'
  37.     //校验必须为正整数
  38.     let isNumber = (rule, value, callback) => { //就是我们的回调函数，需要大家注意的是，这个没有在return的对象中，在data中                
  39.         if(value.length > 0) {
  40.             var testResult = /^\d+$/.test(value);
  41.             if(!testResult) {
  42.                 callback(new Error('必须为数字'));
  43.             } else {
  44.                 callback();
  45.             }
  46.         } else {
  47.             callback()
  48.         }
  49.     }
  51.     export default {
  52.         components: {
  53.             ImgEditor
  54.         },
  55.         props: {
  56.             info: {
  57.                 type: Object,
  58.                 default: {
  59.                     starName: '',
  60.                     starAvatar: '',
  61.                     title: '',
  62.                     cover: '',
  63.                     articleId: null,
  64.                 }
  65.             },
  66.         },
  67.         data() {
  68.             return {
  69.                 cropperImage: '',
  70.                 rules: {
  71.                     starName: [{
  72.                         required: true,
  73.                         message: '请填写明星姓名',
  74.                         trigger: 'change'
  75.                     }],
  76.                     starAvatar: [{
  77.                         required: true,
  78.                         message: '请上传明星头像',
  79.                         trigger: 'change'
  80.                     }],
  81.                     title: [{
  82.                         required: true,
  83.                         message: '请填写标题',
  84.                         trigger: 'change'
  85.                     }],
  86.                     cover: [{
  87.                         required: true,
  88.                         message: '请上传图片',
  89.                         trigger: 'change'
  90.                     }],
  91.                     articleId: [{
  92.                         required: true,
  93.                         message: '请输入稿件ID',
  94.                         trigger: 'change'
  95.                     }, {
  96.                         validator: isNumber,
  97.                         trigger: "blur"
  98.                     }],
  99.                 }
  100.             }
  101.         },
  102.         methods: {
  103.             onImgEdited(img) {
  104.                 this.info.starAvatar = img;
  105.             },
  106.             onImgEdited1(img) {
  107.                 this.info.cover = img;
  108.             },
  109.             saveItem(params) { //新增数据
  110.                 addStarVideo(params).then(response => {
  111.                     if(response.code == 200) {
  112.                         this.$message.success('新增成功')
  113.                         this.$refs.dataForm.clearValidate()
  114.                         this.$emit('dialogClose', {
  115.                             submitType: true
  116.                         })
  117.                         this.$refs.dataForm.clearValidate();
  118.                         this.$refs.dataForm.resetFields();
  119.                     } else {
  120.                         this.$message.error(response.message)
  121.                     }
  122.                 })
  124.             },
  125.             updateItem(params) { //更新数据
  126.                 updateStarVideo(params).then(response => {
  127.                     if(response.code == 200) {
  128.                         this.$message.success('修改成功')
  129.                         this.$refs.dataForm.clearValidate()
  130.                         this.$emit('dialogClose', {
  131.                             submitType: true
  132.                         })
  133.                         this.$refs.dataForm.clearValidate();
  134.                         this.$refs.dataForm.resetFields();
  135.                     } else {
  136.                         this.$message.error(response.message)
  137.                     }
  138.                 })
  139.             },
  140.             checkArticle(id, callback) { //要校验article的有效性
  141.                 var params = {
  142.                     id: id
  143.                 }
  144.                 findArticle(params).then(response => {
  145.                     if(response.code == 200) {
  146.                         if(response.data.showStatus != 1) {
  147.                             this.$message.error("只能选择正常稿件");
  148.                             return false;
  149.                         }
  151.                         var articleType = parseInt(response.data.type);
  153.                         //限定是1图文 2视频
  154.                         if(articleType != 1 && articleType != 2) {
  155.                             this.$message.error("不能选择此类型稿件");
  156.                             return false;
  157.                         }
  158.                         if(callback) {
  159.                             callback(response);
  160.                         }
  161.                     } else {
  162.                         this.$message.error(response.data.message)
  163.                     }
  164.                 })
  166.             },
  167.             //稿件信息
  168.             findArticle(id) {
  169.                 this.info.title = ""
  170.                 this.info.cover = ""
  171.                 this.$refs.dataForm.validateField('articleId', (errorMsg) => {
  172.                     if(errorMsg != "") {
  173.                         return false;
  174.                     }
  175.                     let _this = this;
  176.                     this.checkArticle(id, function(response) {
  177.                         _this.info.title = response.data.title
  178.                         _this.info.cover = response.data.cover
  179.                     })
  180.                 });
  181.             },
  182.             detailEdit(formName) {
  183.                 this.$refs[formName].validate((valid) => {
  184.                     if(valid) {
  185.                         if(this.info.cover) {
  186.                             var params = {};
  187.                             if(this.info.id) {
  188.                                 params = {
  189.                                     'id': this.info.id,
  190.                                     'starName': this.info.starName,
  191.                                     'starAvatar': this.info.starAvatar,
  192.                                     'title': this.info.title,
  193.                                     'cover': this.info.cover,
  194.                                     'articleId': this.info.articleId
  195.                                 }
  196.                             } else {
  197.                                 params = {
  198.                                     'starName': this.info.starName,
  199.                                     'starAvatar': this.info.starAvatar,
  200.                                     'title': this.info.title,
  201.                                     'cover': this.info.cover,
  202.                                     'articleId': this.info.articleId
  203.                                 }
  204.                             }
  205.                             let _this = this;
  206.                             this.checkArticle(params.articleId, function() {
  207.                                 //正式提交
  208.                                 if(_this.info.id) {
  209.                                     _this.updateItem(params);
  210.                                 } else {
  211.                                     _this.saveItem(params);
  212.                                 }
  213.                             })
  214.                         } else {
  215.                             return false
  216.                         }
  217.                     } else {
  218.                         return false
  219.                     }
  220.                 })
  221.             },
  222.             close() {
  223.                 this.$emit('dialogClose', {
  224.                     submitType: false
  225.                 })
  226.                 this.$refs.dataForm.clearValidate();
  227.                 this.$refs.dataForm.resetFields();
  228.             },
  230.         }
  231.     }
  232. </script>

发表评论

表情：
评论列表 （有 0 条评论，72人围观）

还没有评论，来说两句吧...

相关阅读