有没有办法使用JCrop裁剪比实际图像更大的区域？

Question

据我所知,JCrop不会让我进行设置,因此用户可以在实际图像之外裁剪并包含周围的空白.有没有办法做到这一点？

为了帮助解释我的意思,我们说我们将我们的作物限制在16:9的比例.这适用于具有自然宽广主题的图像:

但有时用户想要使用的源图像并不能轻松适应所需的比例:

相反,我们希望通过使裁剪区域大于图像本身来允许它们在图像外部包含空间:

我一直在搞乱JCrop并查看手册和Google一段时间,看起来这不可能(不修改JCrop).我错了吗？如果是这样,你怎么做？

FWIW,在这种情况下的实际图像将是产品/组织徽标图像,其具有各种各样的宽高比,并且几乎总是人们可用的图像在文本/图像周围几乎没有空白.这意味着限制在图像边界的任何固定宽高比裁剪几乎肯定会切断图像的顶部+底部或左侧+右侧.

Answer 1

我的解决方案是创建一个方形尺寸等于图像最大边的临时画布.我将画布背景设为白色并在中心添加了图像.然后我创建了一个新图像并使用画布作为图像源.然后我用jcrop使用了那个图像.它的速度较慢,但​​确实有效!

这是一个例子:

img.onload = function(){ 
    // get the largest side of the image
    // and set the x and y coordinates for where the image will go in the canvas
    if( img.width > img.height ){
        var largestDim = img.width;
        var x = 0;
        var y = (img.width-img.height)/2;
    }
    else{
        var largestDim = img.height;
        var y = 0;
        var x = (img.height-img.width)/2;
    }
    // create a temporary canvas element and set its height and width to largestDim
    canvastemp = document.createElement("canvas");
    canvastemp.width = canvastemp.height = largestDim;
    var ctx = canvastemp.getContext('2d');
    // set the canvas background to white
    ctx.fillStyle="#FFFFFF";
    ctx.fillRect(0, 0, canvastemp.width, canvastemp.height);
    // center the image in the canvas
    ctx.drawImage(img, x, y, img.width, img.height);
    // create a new image and use the canvas as its source
    var squaredImg = document.createElement("img");
    squaredImg.src = canvastemp.toDataURL();
    // add jcrop once the image loads
    squaredImg.onload = function(){
        addJcrop(squaredImg);   
    }
};

function addJcrop(img){
   // your jcrop code
}

这样,用户可以根据需要选择将整个图像包含在裁剪中.