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

Question

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

为了帮助解释我的意思，假设我们将作物的比例限制为 16:9。这适用于具有自然宽主题的图像：

但有时用户想要使用的源图像不能很好地适应所需的比例：

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

我一直在搞乱 JCrop 并浏览手册和谷歌一段时间，但看起来这不可能（不修改 JCrop）。我错了吗？如果是这样，你是怎么做到的？

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

Answer 1

我用 Imagick 做了一个函数：

function resizeImage($imgSrc, $width, $height, $createBg, $output, $show) {

    $img = new Imagick($imgSrc);

    if ($img->getImageWidth() / $img->getImageHeight() < $width / $height) {
        $img->thumbnailImage(0, $height);
    } else {
        $img->thumbnailImage($width, 0);
    }

    $canvas = new Imagick();
    $canvas->newImage($width, $height, 'white', 'jpg');

    /* Creates a background image (good for vertical images in horizontal canvas or vice-versa) */
    if ($createBg) {

        $imgBg = new Imagick($imgSrc);

        if ($imgBg->getImageWidth() / $imgBg->getImageHeight() < $width / $height) {
            $imgBg->thumbnailImage($width, 0);
        } else {
            $imgBg->thumbnailImage(0, $height);
        }

        $imgBg->blurImage(0, 80);

        $geometryBg = $imgBg->getImageGeometry();
        $xBg = ( $width - $geometryBg['width'] ) / 2;
        $yBg = ( $height - $geometryBg['height'] ) / 2;

        $canvas->compositeImage( $imgBg, imagick::COMPOSITE_OVER, $xBg, $yBg );
    }

    /* Center image */
    $geometry = $img->getImageGeometry();
    $x = ( $width - $geometry['width'] ) / 2;
    $y = ( $height - $geometry['height'] ) / 2;

    $canvas->compositeImage( $img, imagick::COMPOSITE_OVER, $x, $y );

    /* Save image  */
    if ($output) {
        $canvas->writeImage($output);
    }

    /* Show the image */
    if ($show) {
        header( 'Content-Type: image/jpg' );
        echo $canvas;
    }

}

评论解释了一切，享受！

Answer 2

我的解决方案是创建一个方形尺寸等于图像最大边的临时画布。我将画布背景设为白色，并将图像添加到中心。然后我创建了一个新图像并将画布用作图像源。然后我将该图像与 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
}

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

Answer 3

考虑使用 php imagick 之类的东西将照片转换为照片 + 透明大背景，然后将其放入 JCrop 我认为不可能有其他方式

Answer 4

你可以欺骗 jCrop 脚本。不是显示image.jpg，而是执行not_a_real_image.php?imagename=image.jpg 之类的操作。 然后给 php 文件一个图像的标题，以及一个宽度和高度，并将实际图像对齐在它的中心。

您所要做的就是记住您添加的画布数量，以便以后更正它。