14

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

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

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

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

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

4

4 回答 4

5

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

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

于 2014-08-01T08:53:19.217 回答
3

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

于 2014-07-01T12:03:43.010 回答
2

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

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

于 2013-11-04T08:41:54.827 回答
0

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

}

评论说明了一切，尽情享受吧！

于 2015-06-22T22:04:57.153 回答