豐源辰作物橢圓形？

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