Есть ли способ использовать JCrop для обрезки области, большей, чем фактическое изображение?

Из того, что я могу сказать, JCrop не позволит мне настроить ситуацию, чтобы пользователь мог обрезать вне фактического изображения и включать окружение пробельные. Есть ли способ сделать это?

Чтобы объяснить, что я имею в виду, скажем, мы ограничиваем наш урожай соотношением 16: 9. Это отлично подходит для изображения с естественно широким предметом:

Но иногда исходное изображение, которое пользователь хочет использовать, не удовлетворяет желаемому соотношению:

Вместо этого мы хотим разрешить им включать пространство вне изображения, сделав область обрезки больше самого изображения:

Я работал с JCrop и просматривал руководство и Google некоторое время, и это не похоже, что это возможно (без изменения JCrop). Я ошибаюсь? Если да, как вы это делаете?

FWIW, фактические изображения в этом случае будут изображениями логотипа продукта/организации, которые бывают в большом разнообразии пропорций, и почти всегда изображения, доступные для людей, почти не имеют пробелов вокруг текста/изображений. Это означает, что любое растение с фиксированным соотношением сторон, ограниченное границами изображения, почти наверняка отрубает верхнюю + нижнюю или левую + правую сторону изображения.

Ответ 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
}

Таким образом, пользователи могут выбрать включение всего изображения в урожай, если они пожелают.

Ответ 2

подумайте об использовании чего-то вроде php imagick, чтобы преобразовать фотографию в фотографию + прозрачный большой фон, а затем добавить это в JCrop. Я не думаю, что это возможно другим способом.

Ответ 3

Вы можете обмануть jCrop script. Вместо показа image.jpg вы делаете что-то вроде not_a_real_image.php?imagename=image.jpg. Затем дайте php файлу заголовок изображения, ширину и высоту и выровняйте фактическое изображение в центре этого.

Все, что вам нужно сделать, это запомнить количество холста, которое вы добавили, чтобы исправить его позже.

Ответ 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;
    }

}

Комментарий объясняет все, наслаждайтесь!