jcrop полная ширина/высота с соотношением урожай

Question

В нашей системе мы внедрили Jcrop, и пока все хорошо. Но мы обнаружили один небольшой вопрос в последнее время:

Сценарий

Наш сайт позволяет пользователям загружать логотип своей компании. Наше требование соотношения сторон 200/150, и, к сожалению, компания логотип пользователя выглядит следующим образом (200 х 63px):

Пользователь загрузил изображение, и из-за нашу пропорцию Constrain, они видят в этом:

---

Вопрос: Как обрезать на всю ширину или полная высота изображения? Я не против, если jcrop отправляет отрицательный размер обрезки обратно на сервер, так как он должен быть достаточно умным, чтобы заполнить изображение на белом фоне. Окончательное, ожидается изображение должно выглядеть следующим образом:

(фон закрашен для целей контрастных)

Либо jcrop может сделать это, и есть ли альтернативные решения/плагины, которые мы можем использовать?

Answer 1

Я не уверен, как вы обрезаете изображение на стороне сервера скрипта, но что вы можете сделать, это добавить дополнительную кнопку под названием «Использовать полное изображение», в которой данные сообщения (x, y, ширина, высота) будет полный размер изображения. Затем, если это соотношение выше ожидаемого, вы просто создаете свое изображение того же размера, который вы всегда хотели, измените размер изображения по ширине и поместите его посередине вашего нового изображения. Таким образом, следующий код является только «псевдокодом», чтобы показать, о чем он говорит. Итак, скажем, пользователь хочет загрузить изображение размером 1000px * 200px, а соотношение, которое вы хотите, составляет 200px * 150px. Пользователи выбирают «полный размер изображения», поэтому вы отправляете данные примерно так: 0,0,1000,200 (позиция: 0,0 и ширина/высота: 1000, 200). На стороне сервера вы можете сделать все необходимые расчеты:

$width = $_POST['width']; 
$height= $_POST['height']; 
$fullsize = isset($_POST['fullsize']) && $_POST['fullsize']; // If the full size mode is on. 
if ($fullsize) { 
    $image = new Image(0,0,200,150); // Create the image canvas with whatever plugin your using. 
    if (($width/$height) > (200/150)) { // If WIDTH ratio is higher... 
    $x = 0; // We already know the image will be align on the left because of the previous calculations (ratio) 
    $y = (150/2) - ($height/2); // 50% top - half the image size = center. 

    } 
    if (($height/$width) > (150/200)) { // If HEIGHT ratio is higher... 
    // Repeat previous code with adjusted values for height instead of width. 
    } 
    // The next part is pure fiction, i dont know what php extension you use, but lets pretend this is working. 
    $newImage = new Image($x,$y,$width,$height,$file); // $file is probably the $_FILEs... 
    $image->placeInsideCanvas($newImage); // Imagine this adds the image into your previously created canvas (200/150); 
    $image->output(); 
} 

Надеюсь, это помогло.

Answer 2

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

Выполните этот процесс:

1. Пусть пользователь загрузить изображение, а затем показать им страницы # 2, где они могут обрезать загруженное изображение.
2. Одна страница # 2:

3. Элемент списка

   (а) С помощью JavaScript, чтобы вычислить, сколько площадь, 200: 150 соотношение сторон прямоугольника может покрывать на изображение.

   (b) Если эта область более 90% (или любое другое значение, которое вы хотите), разрешите пользователю обрезать, вы получите соответствующий результат, который будет соответствовать вашим требованиям к формату.

   (с) Если площадь составляет менее 90%, как это имеет место в этом 200px по 63px изображения, изменить JavaScript переменные для соотношения сторон, чтобы они в точности/примерно равно пропорции изображения т.е. 200: 65. Таким образом, пользователь сможет вырезать более полную часть из логотипа.

   (d) В своем исходном сценарии проверьте, является ли его случай (b) или случай (c). Если это (b), используйте библиотеку обработки изображений, чтобы просто сгенерировать обрезанное изображение. Если его (c), создайте белый прямоугольник с соотношением сторон 200: 150 (ваше желаемое соотношение) и наложите изображение, сгенерированное обрезкой в ​​(c), и получите желаемый результат.

Таким образом, оба случая закрыты. И это не смущает ваших пользователей, они очень хорошо понимают, что подрезка была сделана, чтобы выбрать лучшую часть логотипа, и чтобы было выполнено белое дополнение, чтобы унифицировать пользовательский интерфейс.

Answer 3

вы должны показать ему инструмент обрезки на поле 200/150 (или некоторые другие размеры, но с этим соотношением w/h), где вы загружаете и показываете его загруженное изображение по центру, а не на изображении, которое он загрузил.

Answer 4

Я бы сделал это, установив переключатель, который позволяет пользователю динамически изменять фиксированное соотношение сторон в любом соотношении сторон, таким образом позволяя пользователю выбирать всю область фотографии.

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

Answer 5

Не имеет ли jcrop явный метод калибровки? Я помню, что в jcrop API:

$.Jcrop('#box', { trueSize: [ w, h ] });

Не уверен, если это позволит переопределить соотношение культур, но может быть стоит попробовать.