vue实现图片上传剪切、预览、缩放、旋转

安装

npm install vue-cropper -s

使用

main.js中添加

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

在组件中加入

<!-- element 上传图片按钮 -->
      <el-upload
      class="avatar-uploader"
      action="https://jsonplaceholder.typicode.com/posts/"
      :show-file-list="false"
      :on-change="upload"
      list-type="picture"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

<style lang="scss">
	.avatar-uploader .el-upload {
	  border: 1px dashed #d9d9d9;
	  border-radius: 6px;
	  cursor: pointer;
	  position: relative;
	  overflow: hidden;
	}
	.avatar-uploader .el-upload:hover {
	  border-color: #409eff;
	}
	.avatar-uploader .avatar-uploader-icon {
	  font-size: 28px;
	  color: #8c939d;
	  width: 178px;
	  height: 178px;
	  line-height: 178px;
	  text-align: center;
	}
	.avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
</style>

使用element-ui的上传按钮，要配置:auto-upload=“false”（不要自动上传）， :on-change=‘upload’（选择完图片后的方法）

设置一个弹出层，放剪裁图片的cropper

<!-- vueCropper 剪裁图片实现-->
    <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
      <div class="cropper-content">
        <div class="cropper" style="text-align: center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :fixed="option.fixed"
            :fixedNumber="option.fixedNumber"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :centerBox="option.centerBox"
            :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"
            :enlarge="option.enlarge"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading"
          >确认</el-button
        >
      </div>
    </el-dialog>

<style lang="scss">
	.cropper-content {
	    .cropper {
	        width: auto;
	        height: 300px;
	    }
	}
</style>

<script>
	export default {
	  data() {
	    return {
	      dialogVisible: false,
	      loading: false,
	      fileList: [],
	      imageUrl: '',
	      option: {
	        img: '', // 裁剪图片的地址
	        info: true, // 裁剪框的大小信息
	        outputSize: 0.8, // 裁剪生成图片的质量
	        outputType: 'jpeg', // 裁剪生成图片的格式
	        canScale: true, // 图片是否允许滚轮缩放
	        autoCrop: true, // 是否默认生成截图框
	        autoCropWidth: 300, // 默认生成截图框宽度
	        autoCropHeight: 200, // 默认生成截图框高度
	        fixedBox: true, // 固定截图框大小 不允许改变
	        // fixed: false, // 是否开启截图框宽高固定比例
	        // fixedNumber: [5, 5], // 截图框的宽高比例
	        full: false, // 是否输出原图比例的截图
	        canMoveBox: true, // 截图框能否拖动
	        original: false, // 上传图片按照原始比例渲染
	        centerBox: false, // 截图框是否被限制在图片里面
	        infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
	        enlarge: 2,
	      },
	    }
	  },
	  methods: {
	  	// 上传列表变更
	    upload(file, fileList) {
	      this.option.img = file.url
	      this.dialogVisible = true
	    },
	    // 点击裁剪，获取blob流，下载图片
	    finish() {
	      this.$refs.cropper.getCropBlob((data) => {
	        this.loading = false
	        this.downloadFile('测试.png', data);
	      })
	    },
	    下载blob流图片
	    downloadFile(fileName, content) {
	        let aLink = document.createElement('a');
	        let evt = document.createEvent("HTMLEvents");
	        evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
	        aLink.download = fileName;
	        aLink.href = URL.createObjectURL(content);
	        aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
	      }
	  },
	}
</script>