vue项目中-上传图片头像并裁剪成任意大小的实现

vue项目中-上传图片头像并裁剪成任意大小的实现
先看效果图：

放大缩小-翻转-查看都有的哦！

直接上代码

<el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body width="30%" :before-close="delCropp">
      <div class="cropper-content">
        <el-row>
          <el-col :xs="24" :md="12" :style="{ height: '150px' }">
            <vueCropper
              ref="cropper"
              :img="option.img"
              :info="false"
              :auto-crop="option.autoCrop"
              :auto-crop-width="option.autoCropWidth"
              :auto-crop-height="option.autoCropHeight"
              :fixed-box="option.fixedBox"
              @realTime="realTime"
              @imgLoad="imgLoad"
            />
          </el-col>
          <el-col :xs="24" :md="12" style="height: 150px">
            <div
              style="
                width: 144px;
                height: 144px;
                border-radius: 12px;
                margin: auto;
                box-shadow: 0 0 4px #ccc;
                overflow: hidden;
                margin-top: 3px;
              "
            >
              <img :src="previews.url" :style="previews.img">
            </div>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-col :lg="{ span: 1, offset: 2 }" :md="2">
            <el-button icon="el-icon-plus" size="small" @click="changeScale(1)" />
          </el-col>
          <el-col :lg="{ span: 1, offset: 1 }" :md="2">
            <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)" />
          </el-col>
          <el-col :lg="{ span: 1, offset: 1 }" :md="2">
            <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()" />
          </el-col>
          <el-col :lg="{ span: 1, offset: 1 }" :md="2">
            <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()" />
          </el-col>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="delCropp">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="finish">确认</el-button>
      </div>
    </el-dialog>

时间仓促，大家应该都能看懂，不懂请留言哈！