VUE框架下实现头像文件的截取和上传

头像截取的需求

关于用户头像的选取有时候会遇到很多问题，比如图片的大小、比例等，有时候我们不免会想：如果用户上传的每一张头像都是固定的长和换、大小也不会有太大的区别就好了，很多网站、应用也都是这么做的。我们需要的就是一个固定大小的截取框，用来截取图片并上传就好了。其实实现这个需求也不算很难，昨天写了一个VUE框架下的demo，在这里分享出来~ 这个demo里用到的插件只有element-ui

实现思路

采用css的定位属性配合Canvas就足够实现这样的功能，我们需要两个嵌套在一起的div，外层用来显示画布，内层用来充当截取框，宽高、形状属性都可以设置为你所需要的头像的属性以达到一个预览效果，采用absolute定位，保证内部div框对外部div框的位置能够得到记录，在此基础上，在外部div里内嵌一个Canvas，同样采用absolute定位在左上角，此时，内部div相对外部div的位移同样也是它相对于同级Canvas的位移。我们把图绘制在这个Canvas上，然后设置一个缩放条能够缩放图片，截取的时候在内部div里新建一个和它等大的Canvas，再依照位置偏移把同一张图绘制在内部canvas里转化为base64，就可以直接上传给后端，或者显示到头像框里。

代码

<template>
  <div>
    <div class="avatar">
    <el-upload class="avatar-uploader" :before-upload="beforeAvatarUpload" action="#">
      <img v-if="showImg" :src="dataUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    </div>
    <div id="editBox">
      <canvas id="canvas"></canvas>
      <div id = "cutter" :style="getCutterPos()" @mousedown=drag($event)>
        <canvas id="inner"></canvas>
      </div>
      <div