Пожалуйста, помогите мне, это сводит меня с ума.

Поэтому я использую последнюю версию JCrop вместе с последней версией JQuery.

Моя цель - разрешить пользователям загружать изображение размером больше 550x550 пикселей, а затем выбирать квадрат или портрет не более 550x825 пикселей.

Моя реализация состоит в том, чтобы изменить размер загруженного изображения в файл размером 550x550 + или 550 + x550 в зависимости от того, были ли x или y больше при исходной загрузке. Код для этого работает отлично, так как новое изображение хранится на моем сервере.

Проблема, с которой я сталкиваюсь, заключается в том, что когда вызывается код обрезки, если только начальные координаты выделения кадрирования не равны [0,0], возвращаемое изображение будет смещено вверх, по-видимому, пропорционально начальным координатам, а остальная часть изображения будет черным пространством. Я попытался включить изображения для демонстрации, но мне это не разрешили, так как я все еще новичок на сайте. Я постараюсь продемонстрировать словами. Когда изображение с размерами [550, 828] было обрезано с начальными координатами [0,0], кадрирование прошло успешно. Когда то же изображение было кадрировано с координатами, начинающимися примерно с [0, 100], кадрирование было неудачным. Выделение было отображено на ~ 90%, смещено вверх на ~ 10%, а оставшиеся ~ 10% были черными. Когда то же изображение было обрезано с координатами, начинающимися примерно с [0, 278], кадрирование не удалось. Выделение было отображено ~ 50%, сдвинуто вверх ~ 50%, а оставшиеся ~ 50% были черными.

Кроме того, я проверил координаты, которые возвращает JCrop, и они верны.

Вот мой Javascript для инициализации JCrop var TARGET_W = 550; var TARGET_H = 825; // изменить источник фото для кадрирования jQuery ('# cropbox'). attr ('src', url [1]);

// Initialize the Jcrop using the TARGET_W and TARGET_H that initialized before
jQuery('#cropbox').Jcrop({
     minSize : [TARGET_W, TARGET_W ],
     maxSize : [TARGET_W, TARGET_H ],
     setSelect: [TARGET_W, TARGET_W, 0, 0],
     onSelect: updateCoords
});

// store the current uploaded photo url in a hidden input to use it later
jQuery('#photo_url').val(url[0]);
jQuery('#photo_src').val(url[1]);

Вот функция Javascript для отправки коордов в PHP

function crop_photo() {
//declare co-ords
var x_ = jQuery('#x').val();
var y_ = jQuery('#y').val();
var w_ = jQuery('#w').val();
var h_ = jQuery('#h').val();
var photo_url_ = jQuery('#photo_url').val();
var photo_src_ = jQuery('#photo_src').val();

// crop photo with a php file using ajax call
jQuery.ajax({
    url: ajaxurl,
    type: 'POST',
    data: {x:x_, y:y_, w:w_, h:h_, photo_url:photo_url_, photo_src:photo_src_},
    success:function(data){
        // display the croped photo
        d = new Date();
        jQuery("#featured-image-preview").attr("src", photo_src_ + "?timestamp=" + d.getTime());
        jQuery('#featured_image').val(photo_src_);
        jQuery('#featured_image_src').val(photo_url_);

        jQuery('#recipe-details-form').show(500);   
        if (jQuery('#cropbox').data('Jcrop')) {
            jQuery('#cropbox').data('Jcrop').destroy();
            jQuery('#cropbox').removeAttr('style');
            jQuery('#cropbox').removeAttr('src');
        }
        jQuery('.loading_progress_final').html('');
    }
});

Вот мой PHP для урожая

//CROP IMAGE
if(isset($_POST['photo_url']) && !empty($_POST['photo_url'])) {
// quality
$jpeg_quality = 90;
$png_quality = 9;
// photo path
$src = $_POST['photo_url'];
$split_name = explode('.',$src);
if ($split_name[1] == 'jpg'){
    // create new jpeg image based on the target sizes
    $img_r = imagecreatefromjpeg($src);
    $dst_r = imagecreatetruecolor($_POST['w'], $_POST['h']);
    // crop photo   
    imagecopyresampled($dst_r,$img_r,0,0, (int)$_POST['x'], (int)$_POST['y'], (int)$_POST['w'], (int)$_POST['h'], (int)$_POST['w'], (int)$_POST['h']);
    // create the physical photo
    header('Content-type: image/jpeg');
    imagejpeg($dst_r,$src,$jpeg_quality);
}
else if ($split_name[1] == 'png') {
    // create new jpeg image based on the target sizes
    $img_r = imagecreatefrompng($src);
    $dst_r = ImageCreateTrueColor( (int)$_POST['w'], (int)$_POST['h'] );
    // crop photo
    imagecopyresampled($dst_r,$img_r,0,0, (int)$_POST['x'], (int)$_POST['y'], (int)$_POST['w'], (int)$_POST['h'], (int)$_POST['w'], (int)$_POST['h']);
    // create the physical photo
    imagepng($dst_r,$src,$png_quality);
}

//$src = resize_image($src, 550);
return $_POST['photo_src'];

Я использую стандартный ванильный CSS Jcrop, за исключением следующих

.jcrop-holder img,
img.jcrop-preview,
.crop-wrapper img,
{
    max-width: none !important;
    max-height: none !important;
}
.jcrop-holder {
    display: inline-block;
    max-width: none !important;
    max-height: none !important;
}

Причина этого в том, что когда максимальная ширина установлена на 100%, изображение предварительного просмотра действительно растягивается и не может быть легко отображено на экране, чтобы пользователь мог обрезать его.

Я смотрел свой код 100 раз и не вижу явных ошибок. И, как я уже упоминал, когда изображение обрезано от [0,0], оно работает отлично. Возможно, это проблема CSS, из-за которой координаты, возвращаемые JCrop, являются неточными, даже если значения кажутся правильными?

0
Robert Botha 7 Май 2016 в 14:06

2 ответа

Лучший ответ

Как бы то ни было, мне удалось решить свою проблему.

Проблема заключалась в том, что когда я выводил окончательный файл с помощью imagejpeg / imagepng, я перезаписывал исходный файл. Я изменил вывод на что-то вроде $ src + '_cropped', и теперь он работает нормально.

Я действительно не понимаю, почему это было проблемой. Но все равно работает.

0
Robert Botha 10 Май 2016 в 02:31

Вы можете посмотреть imagecopyresampled http://php.net/manual/en/function.imagecopyresampled.php

А если вы создаете из gif и png, вам могут понадобиться дополнительные опции, такие как colorallocate

Идея состоит в том, что вы изменяете размер изображения и заполняете его правильными пикселями, чтобы gd не нужно было дополнять изображение черными пикселями (черная полоса).

Надеюсь это поможет.

0
Nitin 7 Май 2016 в 12:07