代码记录如下

主要是结合vuejs开发的小活动里面，需要用到截图的功能，开始自己以为实现起来很麻烦，经过同事的帮忙，居然有人实现过，就直接拿过来使用了，目前测试结果，没有发现什么兼容性的问题，不过需要按照自己的需求更改下具体的实现逻辑，代码如下

clip库的js代码段(这里是我做了部分改动的，因为最终的图片结果我认为还是直接返回比较好)

class Clip{
  //因为要保存到vue实例中，所以直接传一个$vm当闭包使用了
  constructor(wpId,$vm){
    this.regional = document.getElementById(wpId);
    this.getImage = document.createElement('canvas');
    this.getImage.id = 'image-box';
    this.editBox = document.createElement('canvas');
    this.editBox.id = 'cover-box';

    this.regional.appendChild(this.getImage);
    this.regional.appendChild(this.editBox);
    this.$vm = $vm;
  }

  init(file){
    this.sx = 0; //裁剪框的初始x
    this.sy = 0; //裁剪框的初始y
    this.sWidth = 233; //裁剪框的宽
    this.sHeight = 233; //裁剪框的高
    this.chooseBoxScale = 233/233;

    this.handleFiles(file);
  }

  handleFiles(file){
    let t = this;
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
      t.imgUrl = this.result;
      t.paintImg(this.result);
    }
  }

  paintImg(picUrl){
    let t = this;
    let cxt = t.getImage.getContext('2d');

    //先清空画布
    cxt.clearRect(0, 0, this.getImage.width, this.getImage.height);

    let img = new Image();
    img.src = picUrl;

    img.onload = function() {

      let imgScale = img.width / img.height;
      let boxScale = t.regional.offsetWidth / t.regional.offsetHeight;

      //判断盒子与图片的比列
      if (imgScale < boxScale) {
          //设置图片的像素
          t.imgWidth = t.regional.offsetHeight * imgScale;
          t.imgHeight = t.regional.offsetHeight;
      } else {
          //设置图片的像素
          t.imgWidth = t.regional.offsetWidth;
          t.imgHeight = t.regional.offsetWidth / imgScale;
      }

      //判断图片与选择框的比例大小，作出裁剪
      if (imgScale < t.chooseBoxScale) {
          //设置选择框的像素
          t.sWidth = t.imgWidth;
          t.sHeight = t.imgWidth / t.chooseBoxScale;

          //设置初始框的位置
          t.sx = 0;
          t.sy = (t.imgHeight - t.sHeight) / 2;
      } else {
          //设置选择框的像素
          t.sWidth = t.imgHeight * t.chooseBoxScale;
          t.sHeight = t.imgHeight;

          t.sx = (t.imgWidth - t.sWidth) / 2;
          t.sy = 0;
      }

      //高分屏下图片模糊，需要2倍处理
      t.getImage.height = 2 * t.imgHeight;
      t.getImage.width = 2 * t.imgWidth;
      t.getImage.style.width = t.imgWidth + 'px';
      t.getImage.style.height = t.imgHeight + 'px';

      let vertSquashRatio = t.detectVerticalSquash(img);

      cxt.drawImage(img, 0, 0,2 * t.imgWidth * vertSquashRatio, 2 * t.imgHeight * vertSquashRatio)

      t.cutImage();
      t.drag();
    }
  }

  cutImage(){
    let t = this;

    //绘制遮罩层：
    t.editBox.height = 2 * t.imgHeight;
    t.editBox.width = 2 * t.imgWidth;

    t.editBox.style.display = 'block';
    t.editBox.style.width = t.imgWidth + 'px';
    t.editBox.style.height = t.imgHeight + 'px';

    let cover = t.editBox.getContext("2d");
    cover.fillStyle = "rgba(0, 0, 0, 0.7)";

    cover.fillRect(0, 0, 2 * t.imgWidth, 2 * t.imgHeight);
    cover.clearRect(2 *t.sx, 2 * t.sy, 2 * t.sWidth, 2 * t.sHeight);
  }

  drag(){
    let t = this;
    let draging = false;

    //记录初始点击的pageX，pageY。用于记录位移
    let pageX = 0;
    let pageY = 0;

    //初始位移
    let startX = 0;
    let startY = 0;


    t.editBox.addEventListener('touchmove', function(ev) {
      let e = ev.touches[0];

      let offsetX = e.pageX - pageX;
      let offsetY = e.pageY - pageY;
      if (draging) {
        if (t.imgHeight == t.sHeight) {
          t.sx = startX + offsetX;
          if (t.sx <= 0) {
            t.sx = 0;
          } else if (t.sx >= t.imgWidth - t.sWidth) {
            t.sx = t.imgWidth - t.sWidth;
          }
        } else {
          t.sy = startY + offsetY;
          if (t.sy <= 0) {
            t.sy = 0;
          } else if (t.sy >= t.imgHeight - t.sHeight) {
            t.sy = t.imgHeight - t.sHeight;
          }
        }
        t.cutImage();
      }
    });

    t.editBox.addEventListener('touchstart', function(ev) {
      let e = ev.touches[0];
      draging = true;

      pageX = e.pageX;
      pageY = e.pageY;

      startX = t.sx;
      startY = t.sy;

    })

    t.editBox.addEventListener('touchend', function() {
      draging = false;
    })
  }

  save(callback) {
    let t = this;
    let saveCanvas = document.createElement('canvas');
    let ctx = saveCanvas.getContext('2d');

    //图片裁剪后的尺寸
    saveCanvas.width = 466;
    saveCanvas.height = 466;

    let images = new Image();
    images.src = t.imgUrl;

    images.onload = function(){
      //计算裁剪尺寸比例，用于裁剪图片
      let cropWidthScale = images.width/t.imgWidth;
      let cropHeightScale = images.height/t.imgHeight;

      t.drawImageIOSFix(
        ctx,
        images,
        cropWidthScale * t.sx ,
        cropHeightScale* t.sy,
        t.sWidth * cropWidthScale,
        t.sHeight * cropHeightScale,
        0,
        0,
        466,
        466);

      // t.$vm.clipUrl = saveCanvas.toDataURL();
      t.regional.removeChild(t.getImage);
      t.regional.removeChild(t.editBox);
      callback(saveCanvas.toDataURL());
    }
  }

  remove() {
    let t = this;
    t.regional.removeChild(t.getImage);
    t.regional.removeChild(t.editBox);
  }

  getImageUrl() {
    let t = this;
    return t.$vm.clipUrl;
  }

  //用于修复ios下的canvas截图问题
  //详情可以看这里http://stackoverflow.com/questions/11929099/html5-canvas-drawimage-ratio-bug-ios
  detectVerticalSquash(img) {
    if(/png$/i.test(img.src)) {
      return 1;
    }
    let iw = img.naturalWidth, ih = img.naturalHeight;
    let canvas = document.createElement('canvas');
    canvas.width = 1;
    canvas.height = ih;
    let ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    let data = ctx.getImageData(0, 0, 1, ih).data;

    let sy = 0;
    let ey = ih;
    let py = ih;
    while (py > sy) {
      const alpha = data[(py - 1) * 4 + 3];
      if (alpha === 0) {
        ey = py;
      } else {
        sy = py;
      }
      py = (ey + sy) >> 1;
    }
    const ratio = (py / ih);
    return (ratio===0)?1:ratio;
  }
  drawImageIOSFix(ctx, img, sx, sy, sw, sh, dx, dy, dw, dh) {
    const vertSquashRatio = this.detectVerticalSquash(img);
    ctx.drawImage(
      img,
      sx * vertSquashRatio,
      sy * vertSquashRatio,
      sw * vertSquashRatio,
      sh * vertSquashRatio,
      dx,
      dy,
      dw,
      dh);
  }
}

css代码段（这里我只用到了截图图片一小部分的UI，就是弹窗后截取图片的UI部分，这一部分如果自己写的话，就要看源码了。其实截图后的展示部分的功能，完全可以根据自己的需求来实现，而且原作者是用的less）

.file{
    height: 40px;
    display: block;
    margin: 40px auto 0;
  }

  .clip-img{
    width: 300px;
    height: 225px;
    margin: 20px auto 0;
    border: 1px solid #999;
    overflow: hidden;
  }

  .clip-img img{
      width: 100%;
  }

  .upload-wp {
    text-align: center;
    width: 300px;
    margin: 20px auto 0;
  }

  .upload-wp button {
    padding: 5px 10px;
  }

  .upload-wp p {
    word-wrap: break-word;
    font-size: 12px;
  }

  .clip-wp {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index: 11;
    background-color: #000;
    text-align: center;
  }

  .clip-wp #container{
    background-color: #000;
    text-align: center;
    width: 100%;
    left: 0;
    right: 0;
    top: 20px;
    bottom: 80px;
    margin: 0 auto;
    position: absolute;
  }

  .clip-wp #save-img{
    position: absolute;
    bottom: 20px;
    width: 40%;
    left: 5%;
    height: 42px;
    line-height: 42px;
    color: #fff;
    background-color: #32c47c;
    border-radius: 20px;
  }

  .clip-wp #cancel-img{
    position: absolute;
    bottom: 20px;
    width: 40%;
    left: 55%;
    height: 42px;
    line-height: 42px;
    color: #fff;
    background-color: #32c47c;
    border-radius: 20px;
  }

  .clip-wp #image-box {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    margin: auto;
  }

  .clip-wp #cover-box {
    position: absolute;
    z-index: 9999;
    display: none;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    margin: auto;
  }

  .preview-wp {
    text-align: left;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: #000;
    overflow:auto;
  }

  .preview-wp .preview-img{
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translate(0 , -50% );
    -webkit-transform: translate(0 ,-50%);
  }

html代码实现部分，这个就要根据具体的情况，我是页面上有两个图片按钮，点击后替换图片 所以我就直接用一个file类型的input，上传完之后将图片替换到指定的按钮上，然后重置input，这样就可以重复不断的更新上传图片

<!-- 上传图片的隐藏元素 -->
<div style="width:9vw;height:9vw;background:red;position:absolute;top:2vw;display:none">
  <form id="fileElem1">
    <input ref=fileElem type="file" class="file" accept="image/*;capture=camera" name="img" @change="clipImg($event)" style="display: none">
  </form>
</div>

<span style="display:inline-block;position:relative;">
<span style="display:inline-block;width:9vw;height:9vw;line-height:9vw;text-align:center;border:solid .2vw #fff;background-color:#f7e9d4;box-shadow:0 1vw 1vw 0 #e0cfb3;overflow:hidden;border-radius:50%" @click='choiceMeAvatar()'>
  <img v-bind:src="images.left_avatar_kuang" style="width: 100%">
</span>
<span style="display: inline-block;width: 9vw;height: 9vw;line-height:9vw;text-align:center;border: solid 0.2vw #ffffff;background-color: #f7e9d4;box-shadow: 0vw 1vw 1vw 0vw #e0cfb3;overflow: hidden;border-radius: 50%;margin-left: -2vw" @click='choiceTaAvatar()'>
  <img v-bind:src="images.right_avatar_kuang" style="width: 100%">
</span>

vue js代码methods实现部分

clipImg: function(event){
  this.clip = new Clip('container', this);
  this.clip.init(event.target.files[0]);
  this.isClip = true;
  document.body.addEventListener('touchmove', this.noScoll, false);
  // main-container 固定
  document.getElementById('main-container').style.position = 'fixed';
},

saveImg: function(){
  this.isClip = false;
  var self = this;
  var imageData = this.clip.save(function(imageData){
    console.log(self.currentUploadFieldName);
    console.log(imageData);

    if (self.currentUploadFieldName == 'left_avatar_kuang') {
      self.images.left_avatar_kuang = imageData;
    } else if (self.currentUploadFieldName == 'right_avatar_kuang') {
      self.images.right_avatar_kuang = imageData;
    }
  });

  document.body.removeEventListener('touchmove', this.noScoll, false);
  // form中input reset
  document.getElementById("fileElem1") && document.getElementById("fileElem1").reset();
  // main-container 解除固定
  document.getElementById('main-container').style.position = 'relative';
},

cancelImg: function() {
  this.isClip = false;
  this.clip.remove();
  this.clip = null;
  document.body.removeEventListener('touchmove', this.noScoll, false);
  // form中input reset
  document.getElementById("fileElem1") && document.getElementById("fileElem1").reset();
  // main-container 解除固定
  document.getElementById('main-container').style.position = 'relative';
},

vue变量部分代码如下

data: {
  currentUploadFieldName: '',
  images: {
    'left_avatar_kuang': '/xxx/avatar_default.png',
    'right_avatar_kuang': '/xxx/avatar_default.png',
  },
  isClip: false,
  clipUrl:'',
  noScoll: function(evt){
    this.isClip && evt.preventDefault();
  },
  clip:{},
}

我这里只是给出了基本上80%实现部分，还有20%具体细节的部分要具体细化了。

参考文章：链接1