Fengyuanchen Cropperjs裁剪椭圆形状？

Question

当裁剪一个圆圈时，我尝试设置cropper.setAspectRatio(0);让我自由拖动以获得椭圆形状，但是当它裁剪时，我最终会得到圆形裁剪，但是透明边缘会填充额外的缺失信息。这张图片应该是width=722px height=182px

这是圆形画布的功能，它适用于完美的圆形圆圈，但不适用于椭圆形：

function getRoundedCanvas(sourceCanvas) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  var width = sourceCanvas.width;
  var height = sourceCanvas.height;
  canvas.width = width;
  canvas.height = height;
  context.imageSmoothingEnabled = true;
  context.drawImage(sourceCanvas, 0, 0, width, height);
  context.globalCompositeOperation = 'destination-in';
  context.beginPath();
  context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
  context.fill();
  return canvas;
}

Answer 1

我能够稍微修改它以便工作：

function getRoundedCanvas(sourceCanvas) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  offsetTop = Math.round(cropper.getCropBoxData().top);
  offsetLeft = Math.round(cropper.getCropBoxData().left);  
  var width = sourceCanvas.width;
  var height = sourceCanvas.height;
  canvas.width = width;
  canvas.height = height;
  context.imageSmoothingEnabled = true;
  context.drawImage(sourceCanvas, 0, 0, width, height);
  context.globalCompositeOperation = 'destination-in';
  context.beginPath();
  context.ellipse(width/2, height/2, width/2, height/2, 0 * Math.PI, 0, 45 * Math.PI);
  context.fill();
  return canvas;
}