vue 图片剪裁插件

最近在用Vue做后台管理系统，需要用到图片剪裁的插件。之前用的element-ui的upload组件，但是这个不支持剪裁，在网上找了几个插件，最后决定用vue-image-crop-upload这个插件。还挺好用的，但是有一个问题，就是他不能按尺寸比例去剪裁，只能写剪裁后的图片的固定的宽和高才行。

view视图这样写：

其中width=320   height="180"就是固定的尺寸。

<el-form-item label="封面图"
                    prop="coverImg"
                    hide-required-asterisk="false">
        <my-upload ref="uploader" field="file"
                   enctype="multipart/form-data"
                   :langExt="zh"
                   @crop-success="cropSuccess"
                   @crop-upload-success="cropUploadSuccess"
                   @crop-upload-fail="cropUploadFail"
                   v-model="show"
                   :withCredentials="withCredentials"
                   :no-circle="true"
                   :width="320"
                   :height="180"
                   :url="uploadImgUrl"
                   :params="params"
                   :headers="headers"
                   img-format="png"></my-upload>
        <el-button size="small"
                   type="primary"
                   @click="toggleShow">点击上传</el-button>
        <div class="">只能上传jpeg/jpg/png/gif格式的图片，且不超过5M</div>
        <img class="coverImg"
             :src="detailRuleForm.coverImg">
      </el-form-item>

data中代码：

data(){

    return{
      show: false,
      withCredentials: true,
      params: {
        size: 5 * 1024 * 1024
      },
      headers: {
        smail: '*_~'
      },
      zh: {
        preview: '预览',
      }
    }


}

 

剪裁，剪裁成功，剪裁失败的函数代码：

toggleShow () {
      this.show = !this.show;
    },
    /**
      * crop success
      *
      * [param] coverImg
      * [param] field
      */
    cropSuccess (coverImg, field) {
      // console.log('-------- crop success --------', coverImg + '---', field);
      this.detailRuleForm.coverImg = coverImg;
    },
    /**
     * upload success
     *
     * [param] jsonData  server api return data, already json encode
     * [param] field
     */
    cropUploadSuccess (jsonData, field) {
      console.log('-------- upload success --------', jsonData);
      // console.log('field: ' + field);
      if (jsonData.retCode === "00000") {
        this.detailRuleForm.coverImg = jsonData.vo.uploadUri
        //下面这个判断条件就是当上传成功后，不用用户手动再去关闭弹框，上传成功之后代码把其关闭
        if(this.$refs.uploader){
          this.$refs.uploader.off()
        }
      }


    },
    /**
     * upload fail
     *
     * [param] status    server api return error status, like 500
     * [param] field
     */
    cropUploadFail (status, field) {
      console.log('-------- upload fail --------');
      console.log(status);
      console.log('field: ' + field);
    }

链接如下：

https://www.npmjs.com/package/vue-image-crop-upload

效果图如下：

后来又找了一下，还有一个插件也比较火：

https://github.com/xyxiao001/vue-cropper

 

在此记录下，希望大家也能给我推荐比较实用或比较火的剪裁的插件。