@antmjs/vantui/es/image-cropper/h5.js

一套适用于Taro3及React的vantui组件库

function drawCropperImage(params) {
  var x = params.x,
    y = params.y,
    w = params.w,
    h = params.h,
    src = params.src;
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  // document.body.append(canvas)
  return new Promise(function (resolve) {
    if (ctx) {
      var img = new Image();
      img.onload = function () {
        canvas.width = w;
        canvas.height = h;
        ctx.drawImage(img, x, y, w, h, 0, 0, w, h);
        var croppedImageUrl = canvas.toDataURL('image/png');
        resolve(croppedImageUrl);
      };
      img.src = src;
    }
  });
}
function drawImageWithRotation(params) {
  var src = params.src,
    angle = params.angle;
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  // document.body.append(canvas)

  return new Promise(function (resolve) {
    if (ctx) {
      var img = new Image();
      img.onload = function () {
        canvas.width = angle % 180 === 0 ? img.width : img.height;
        canvas.height = angle % 180 === 0 ? img.height : img.width;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.translate(canvas.width / 2, canvas.height / 2);
        ctx.rotate(angle * Math.PI / 180);
        ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height);
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        var rotatedImageUrl = canvas.toDataURL('image/png');
        resolve(rotatedImageUrl);
      };
      img.src = src;
    }
  });
}
export { drawCropperImage, drawImageWithRotation };