基于vue的图片裁剪插件vue-cropper

我在网上找了很多关于vue裁剪图片的文章，demo都太长了，实在是太长了。有些还都看不懂，最后还是用了个大佬的demo，但是项目实践过程中还是有问题没解决。先介绍吧。效果是下面这样的，

我这里采用了4:3的固定比例进行裁剪，裁剪后的效果

但是裁剪后的图片路径是base64，超级长的路径，最终还是需要处理地址传给后端的，项目用oss处理图片，最终获得一个类似于aad68a8fd577464dbcdead2e9b20084d这个的后缀传给后端，base64的路径有几万几十万个字符，传给后端会炸的吧。

后来我通过oss进行处理，把base64的路径地址变成通过oss解析过的地址，但是！解析过的地址让我下载，下载的文件不是图片格式，记事本打开文件里面还是base64的路径，复制粘贴，没错，是裁剪之后的图片，这个问题暂时还没有解决，解决之后进行再回来修改。先附上代码吧。这里代码是比较全的，图片地址解析那一部分可以不用。

以上问题以解决，base64转成blob格式就可以处理了，oss上传需要使用new Blob格式（2019/6/22更新）

另外附上文档   https://github.com/xyxiao001/vue-cropper

裁剪的vue文件：（已更新）

先下载npm install vue-cropper --save

<!-- 裁剪图片 -->
<template>
  <div class="wrapper">
    <div class="model" v-show="model" @click="model = false">
      <div class="model-show">
        <img :src="modelSrc" alt="">
      </div>
    </div>
    <div class="content">

      <div class="show-info">
        <h2>自动生成截图框 固定比例 w : h => 4 : 3</h2>
        <div