fj-dc-ui/.svn/pristine/d9/d97148febeedd7ea665c169ed3646fefee2191eb.svn-base

<template>
  <el-dialog append-to-body :visible.sync="imgVisible"  @close="closeWindow" title="图片编辑" width="60%">
    <div class="container">
      <el-row>
        <el-col :xs="24" :md="24" :style="{height: '500px'}">
          <vue-cropper
            ref="cropper"
            :img="options.img"
            :info="true"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            :outputType="options.outputType"
            @realTime="realTime"
          />
        </el-col>
<!--        <el-col :xs="24" :md="12" :style="{height: '600px'}">-->
<!--          <div class="avatar-upload-preview">-->
<!--            <img :src="previews.url" :style="previews.img" />-->
<!--          </div>-->
<!--        </el-col>-->
      </el-row>
      <br />
      <el-row>
        <el-col :lg="2" :sm="3" :xs="3">
          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small">
              选择
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
        </el-col>
        <el-col :lg="{span: 1, offset: 2}" :sm="1" :xs="1">
          <el-button size="small" @click="showCut()">裁剪</el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 2}" :sm="1" :xs="1">
          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :sm="1" :xs="1">
          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :sm="1" :xs="1">
          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :sm="1" :xs="1">
          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
        </el-col>
        <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2" style="display: flex;align-items: center">
          <el-button type="primary" size="small" @click="uploadImg()">提 交</el-button>
          <el-button  size="small" @click="refresh()">重置</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
    import { VueCropper } from "vue-cropper";
    export default {
        name: 'CropImage',
        components:{VueCropper},
        props: {
            picUrl:{
                type: String,
                default: '',
            }
        },
        data () {
            return {
                imgVisible:true,
                options: {
                    img: "", //裁剪图片的地址
                    autoCrop: false, // 是否默认生成截图框
                    //autoCropWidth: 200, // 默认生成截图框宽度
                    //autoCropHeight: 200, // 默认生成截图框高度
                    fixedBox: false, // 固定截图框大小 不允许改变
                    outputType:"png" // 默认生成截图为PNG格式
                },
                previews: {},
            };
        },
        watch:{

        },
        mounted () {
            this.$nextTick(() => {
                this.options.img = this.picUrl;
            });

        },
        methods: {
            // 上传图片
            uploadImg() {
                this.$refs.cropper.getCropBlob(data => {
                    const myFile = new File([data], 'zyz.png');
                    let formData = new FormData();
                    formData.append("file", myFile);
                    this.$emit('editPicData',formData);
                });
            },
            cancelCut(){
                this.$nextTick(() => {
                    this.options.autoCrop = false;
                })
            },
            showCut(){
                this.$nextTick(() => {
                    this.options.autoCrop = true;
                })

            },
            // 刷新组件
            refresh() {
                this.$refs.cropper.refresh();
            },
            // 覆盖默认的上传行为
            requestUpload() {
            },
            // 向左旋转
            rotateLeft() {
                this.$refs.cropper.rotateLeft();
            },
            // 向右旋转
            rotateRight() {
                this.$refs.cropper.rotateRight();
            },
            // 图片缩放
            changeScale(num) {
                num = num || 1;
                this.$refs.cropper.changeScale(num);
            },
            realTime(data) {
                this.previews = data;
            },
            // 上传预处理
            beforeUpload(file) {
                if (file.type.indexOf("image/") == -1) {
                    this.$message.warning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
                } else {
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = () => {
                        this.options.img = reader.result;
                    };
                }
            },
            // 打开弹出层结束时的回调
            closeWindow() {
                this.$emit("cancelHandler");
            }
        },
    };
</script>

<style lang="css" scoped>
  .container {
    height: 600px;
    text-align: center;
  }
  /deep/ .el-icon-refresh-right{
    font-size: 12px !important;
  }
</style>