风元辰作物椭圆形状？

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;
}