vue项目添加图片裁剪组件

清疚 2022-12-28 09:02 276阅读 0赞

vue项目添加图片裁剪组件  
功能如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]

1，安装命令如下

> npm i vue-cropper --save

2，调用组件，引入vue-cropper

> import \{ VueCropper \} from “vue-cropper”;

3,封装组件代码如下:cropper.vue

<template>
      <div class="cropper_model">
        <el-dialog
          title="图片剪裁"
          width="800px"
          class="cropper_model_dlg"
          :visible.sync="dialogVisible"
          append-to-body
          :close-on-click-modal="false"
          :close-on-press-escape="false"
        >
          <div class="cropper_content">
            <div class="cropper" style="text-align: center;">
              <vueCropper
                ref="cropper"
                :img="options.img"
                :outputSize="options.outputSize"
                :outputType="options.outputType"
                :info="options.info"
                :canScale="options.canScale"
                :autoCrop="options.autoCrop"
                :autoCropWidth="options.autoCropWidth"
                :autoCropHeight="options.autoCropHeight"
                :fixed="options.fixed"
                :fixedBox="options.fixedBox"
                :fixedNumber="options.fixedNumber"
                @realTime="previewImg"
              >
              </vueCropper>
              <div class="cropper_btns">
                <el-button type="primary" @click="goUpload" size="mini">
                  重新上传
                </el-button>
                <el-button
                  @click="rotateLeft"
                  icon="el-icon-refresh-left"
                  size="mini"
                  title="左旋转"
                >
                </el-button>
                <el-button
                  @click="rotateRight"
                  icon="el-icon-refresh-right"
                  size="mini"
                  title="右旋转"
                >
                </el-button>
                <el-button @click="changeScale(1)" size="mini" title="放大">
                  +
                </el-button>
                <el-button @click="changeScale(-1)" size="mini" title="缩小">
                  -
                </el-button>
              </div>
            </div>
            <div class="cropper_right">
              <h3>预览</h3>
              
              <div
                class="cropper_preview"
                :style="{
                  width: preview.w + 'px',
                  height: preview.h + 'px',
                  overflow: 'hidden',
                  margin: '5px'
                }"
              >
                <div :style="preview.div">
                  <img :src="preview.url" :style="preview.img" alt="" />
                </div>
              </div>
              <div style="margin-top: 100px;">
                <el-button type="primary" @click="uploadImg" :loading="loading">
                  确定上传
                </el-button>
              </div>
            </div>
          </div>
          
        </el-dialog>
      </div>
    </template>
    
    <script>
    import { VueCropper } from "vue-cropper";
    export default {
      components: { VueCropper },
      data() {
        return {
          dialogVisible: false,
          loading: false,
          options: {
            img: "", // 裁剪图片的地址
            outputSize: 1, // 裁剪生成图片的质量
            outputType: "png", // 裁剪生成图片的格式
            info: true, // 裁剪框的大小信息
            canScale: true, // 图片是否允许滚动缩放
            autoCrop: true, // 是否默认生成截图狂
            autoCropWidth: 100, // 默认生成截图框宽度
            autoCropHeight: 100, // 默认生成截图框高度
            fixed: true, // 是否开启截图框宽高固定比例
            fixedNumber: [1, 1], // 截图框的宽高比例
            full: true, // 是否输出原图比例的截图
            fixedBox: true, // 固定截图框大小 不允许改变
            canMove: true, // 上传图片是否可以移动
            canMoveBox: true, // 截图框能否拖动
            original: true, // 上传图片按照原始比例渲染
            centerBox: false, // 截图框是否被限制在图片里面
            high: false, // 是否按照设备的dpr输出等比例图片
            infoTrue: true, // true为展示真实输出图片宽高false展示看到的截图框宽高
            maximgSize: 100, // 限制图片最大宽度和高度
            enlarge: 1, // 图片根据截图框输出比例倍数
            mode: "contain" // 图片默认渲染方式(contain, cover, 100px, 100% auto)
          },
          preview: {}
        };
      },
      methods: {
        open(data) {
          this.options.img = window.URL.createObjectURL(data);
          this.dialogVisible = true;
        },
        close(){
          this.dialogVisible = false;
        },
        // base64转图片文件
        dataURLtoFile(dataurl, filename) {
          let arr = dataurl.split(",");
          let mime = arr[0].match(/:(.*?);/)[1];
          let bstr = atob(arr[1]);
          let len = bstr.length;
          let u8arr = new Uint8Array(len);
          while (len--) {
            u8arr[len] = bstr.charCodeAt(len);
          }
          return new File([u8arr], filename, { type: mime });
        },
        downLoad(type) {
          event.preventDefault();
          const aLink = document.createElement("a");
          if (type === "blob") {
            this.$refs.cropper.getCropBlob(data => {
              let downImg = window.URL.createObjectURL(data);
              aLink.download = "photo.png";
              aLink.href = downImg;
              aLink.click();
            });
          } else {
            this.$refs.cropper.getCropData(data => {
              let file = this.dataURLtoFile(data, "test");
              aLink.href = file;
              aLink.click();
            });
          }
        },
        // 左旋转
        rotateLeft() {
          this.$refs.cropper.rotateLeft();
        },
        // 右旋转
        rotateRight() {
          this.$refs.cropper.rotateRight();
        },
        // 放大缩小
        changeScale(num) {
          num = num || 1;
          this.$refs.cropper.changeScale(num);
        },
        // 实时预览
        previewImg(data) {
          this.preview = data;
        },
        goUpload() {
          this.$emit("upAgain");
        },
        // 上传图片
        uploadImg() {
          let self = this;
          self.loading = true;
          this.$refs.cropper.getCropData(data => {
            let file = this.dataURLtoFile(data, "photo.png");
            // 生成文件类型
            self.loading = false;
            this.$emit("getFile",file)
          });
        },
        //自定义上传，裁剪后调用
      }
    };
    </script>
    
    <style lang="less" scoped>
    .cropper_model_dlg {
      .cropper_content {
        margin: 0 auto;
        width: 700px;
        height: 450px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }
      .cropper {
        width: 400px;
        height: 400px;
        background: yellow;
      }
      .cropper_right {
        width: 300px;
        text-align: center;
      }
      .cropper_preview {
        margin: 0 auto;
        display: inline-block;
        border: 1px solid #ddd;
      }
      .cropper_btns {
        margin-top: 20px;
      }
    }
    </style>

4,在其他vue组件使用，引用cropper.vue

import MyCropper from "./cropper.vue"

export default里面添加

components:{MyCropper},

html中引入

<my-cropper ref="myCropper" @getFile="getFile" @upAgain="upAgain"></my-cropper>

对应的js方法代码

upAgain(){
                    this.$refs['upload'].$refs["upload-inner"].handleClick();
                },
    
    getFile(file){
                    const formData = new FormData();
                    formData.append("file",file)
                    uploadSelfCompanyLogo(formData).then(res =>{
                        if (res.code === 0) {
                            this.companyInfo.logo = res.filename;
                            this.companyInfo.imageUrl = res.url;
                            this.imageUrl = res.url;
                            //上传成功后，关闭弹框组件
                            // this.handleCrop(file);
                            this.$refs.myCropper.close()
    
                        } else {
                            this.$message.error('上传出错');
                        }
                    })
                   // this.$refs.upload.submit();
                },

注意：以上代码并不完整， 裁剪组件和elementUI组件中的el-upload的结合使用方法如链接[裁剪组件和el-uplod结合][el-uplod]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: /images/20221120/72e52072f130465296e89c32ee32e0c2.png
[el-uplod]: https://blog.csdn.net/weixin_44994731/article/details/111264151