Vue + elemetn 图片裁剪 vue-cropper

使用Vue-Cropper对上传的图片进行裁剪

首先下载安装vue-cropper

npm install vue-cropper -s

main.js中引入并使用

import Vuecropper from 'vue-cropper'

Vue.use(Vuecropper)

引入element-ui 的uplaod组件
这里我对这个组件进行了处理，点击图片框可以进行单独的图片文件选中，取消了默认上传行为
可以看我的另一篇文章：element-ui upload覆盖默认上传行为
注意：

<el-upload
      class="avatar-uploader"
      :action="vartaie"
      :show-file-list="false"
      :http-request="uploading">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>




<!--图片裁剪-->
    <img v-if="attach.laterUrl" :src="attach.laterUrl" class="preview" style="width:200px;height:200px"/>
    <el-button @click="dialogVisible=true">上传图片/裁剪按钮</el-button>

    <el-dialog title="编辑头像" :visible.sync="dialogVisible" :before-close="handleClose">
            <span>
                <el-row>
                    <input type="file" id="uploads" accept="image/png, image/jpeg, image/gif, image/jpg"
                      @change="uploadImg($event,1)" class="el-button" style="margin-bottom:15px">
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <!-- 裁剪 -->
                            <vueCropper
                              style="width:100%;height:300px"
                              ref="cropper"
                              :img="attach.customaryUrl"
                              :autoCrop="options.autoCrop"
                              :fixedBox="options.fixedBox"
                              :canMoveBox="options.canMoveBox"
                              :autoCropWidth="options.autoCropWidth"
                              :autoCropHeight="options.autoCropHeight"
                              :centerBox="options.centerBox"
                            >
                            </vueCropper>
                    </el-col>
                </el-row>
                <el-row class="footerBtn" align="center" style="margin-top: 30px">
                    <el-button type="primary" size="small" round="" @click="cut('blob')">确认</el-button>
                    <el-button type="primary" size="small" round="" @click="dialogVisible = false">取消</el-button>
                </el-row>
            </span>
    </el-dialog>

可以直接负责使用

	//这是data中声明的变量
	imageUrl: '',
      vartaie:'123',//action替换字符串
      dialogVisible:false,//裁剪框状态
      options:{
        autoCrop:true,  //默认生成截图框
        fixedBox:true,  //固定截图框大小
        canMoveBox:false,    //截图框不能拖动
        autoCropWidth:200,  //截图框宽度
        autoCropHeight:200, //截图框高度
        centerBox:false,    //截图框被限制在图片里面
      },
      attach:{
        customaryUrl:'', //原图片路径
        laterUrl:'',//裁剪后图片路径  /static/logo.png
      },

以下是裁剪方法

/**
     * 取消默认上传行为 start
     */
    uploading(file){
      this.$message({
        type:'success',
        message:'上传文件类型为：' + file.file.type + ';上传文件大小为：' + (file.file.size / 1024 / 1024) + 'M'
      })
      if (file.file.type === 'image/jpeg' || file.file.type === 'image/png') {
        let sendFile = file.file;   //file文件，传递到后端，一般通过FormData() 存储该文件
        this.imageUrl = URL.createObjectURL(file.file); // 拿到本地图片路径 用于回显

        var formData = new FormData();
        formData.append('name',sendFile) ; //FormData() 用法
        //console.log(formData.get('name')); // 查看formData中存储的值
      }
    },
    /**
     * 取消默认上传行为 end
     */



    /**
     * 图片裁剪上传 start
     */
    //选择本地图片
    uploadImg(e){
      var file = e.target.files[0];
      if(!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)){
        this.$message.error('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种');
        return false;
      }
      //fileReader 接口，用于异步读取文件数据
      var reader = new FileReader();
      reader.readAsDataURL(file); //重要 以dataURL形式读取文件
      reader.onload = e => {
        let data = e.target.result;
        this.attach.customaryUrl=data
      }
    },
    //确认截图,地址赋值
    cut(){
      if (this.attach.customaryUrl != ''){
        this.$refs.cropper.getCropBlob(res=>{
          console.log(res);
          this.imageUrl = URL.createObjectURL(res); // 赋值 url 回显
          this.dialogVisible = false;//关闭 弹窗
          // res.size  图片大小 字节
          // res.type  图片文件类型

          // var formData = new FormData();
          // formData.append('name',sendFile) ; //FormData() 用法
          //console.log(formData.get('name')); // 查看formData中存储的值
        })
      } else {
        this.$message({
          type:'warning',
          message:'没有选中图片'
        })
      }

    },
    handleClose(){
      this.dialogVisible = false;
    }
    /**
     * 图片裁剪上传 end
     */

如果想在图片框上直接绑定上传，将:http-request=“uploading” 的uploading方法内容清空，改为 this.dialogVisible = true即可