丰源辰作物椭圆形？

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