Question

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

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

enter image description here

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

enter image description here

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

enter image description here

我一直在搞乱JCrop并查看手册和谷歌一段时间，看起来这不可能（不修改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
}

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

Answer 2

考虑使用像php imagick这样的东西将照片转换为照片+透明的大背景，然后把它放到JCrop我不认为它可能的其他方式

Answer 3

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

您需要做的就是记住您之后添加的用于更正的画布数量。

Answer 4

我使用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;
    }

}

评论解释一切，享受！

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

4 个答案: