За последние 24 часа нас посетили 19118 программистов и 1619 роботов. Сейчас ищут 815 программистов ...

Обрезка изображения (квадратное привью)

Тема в разделе "Сделайте за меня", создана пользователем Даша Кенно, 30 авг 2020.

  1. Даша Кенно

    Даша Кенно Новичок

    С нами с:
    30 авг 2020
    Сообщения:
    2
    Симпатии:
    0
    Я делаю новый дизайн старого сайта (на php 5.2), к большому сожалению php я не знаю (((
    Сейчас скрипт делает привью сохраняя пропорции, а нужно изменить обрезку изображения, что бы привью было квадратным.

    Помогите изменить код:

    PHP:
    1. ###################################################################
    2. // Crop picture // Обрезаем картинку
    3. function crop_picture ($src_file, $dst_file, $dst_width, $dst_height)
    4. {
    5.     $size = getimagesize($src_file);
    6.     $src_width = $size[0];
    7.     $src_height = $size[1];
    8.     $src = ImageCreateFromJPEG($src_file);
    9.     if ($dst_width >= $src_width && $dst_height >= $src_height) {
    10.         $dst_width = $src_width;
    11.         $dst_height = $src_height;
    12.     } else {
    13.         $src_k = $src_width / $src_height;
    14.         $dst_k = $dst_width / $dst_height;
    15.         // Decrease height // Уменьшаем высоту
    16.         if ($src_k > $dst_k) {
    17.             $dst_height = intval($dst_height * $dst_k / $src_k);
    18.         } else {
    19.         // Descrease width // Уменьшаем ширину
    20.             $dst_width = intval($dst_width * $src_k / $dst_k);
    21.         }
    22.     }
    23.     $dst = ImageCreateTrueColor($dst_width, $dst_height);
    24.     ImageCopyResampled($dst, $src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width, $src_height);
    25.     imagejpeg($dst, $dst_file, 90);
    26.     chmod ($dst_file, 0777);
    27. }
    28. ###################################################################
     
    #1 Даша Кенно, 30 авг 2020
    Последнее редактирование модератором: 30 авг 2020
  2. Даша Кенно

    Даша Кенно Новичок

    С нами с:
    30 авг 2020
    Сообщения:
    2
    Симпатии:
    0
    Ради такого кроткого фрагмента ))) наверное нет смысла отвлекать профессионалов )))
    Решила задачу старым добрым CSS.
    Код (CSS):
    1. /* Preview */
    2. .pv {
    3.     width: 100%;
    4. }
    5. .pv-inner {
    6.     position: relative;
    7.     height: 0;
    8.     border: none;
    9. }
    10. .pv-content {
    11.     position: absolute;
    12.     top: 0;
    13.     right: 0;
    14.     bottom: 0;
    15.     left: 0;
    16.     background: #eee;
    17. }
    18. .pv-content a {
    19.     display: block;
    20.     height: 100%;
    21. }
    22. .pv-1-1 {
    23.     padding-top: 100%;
    24. }
    HTML:
    1. <div class="pv">
    2.     <div class="pv-inner pv-1-1">
    3.         <div class="pv-content" style="background-image:url(картинка); background-position:center center; background-size:cover;">
    4.             <a href="ссылка"></a>
    5.         </div>
    6.     </div>
    7. </div>
     
  3. miketomlin

    miketomlin Старожил

    С нами с:
    9 авг 2016
    Сообщения:
    3.861
    Симпатии:
    657
    @Даша Кенно, так делают, если в каком-то виде нужен этот не квадрат, например на узких экранах или для строчного отображения анонсов (при переключении с блочного). Иначе костыль.
    --- Добавлено ---
    В данном разделе рыбку ловить бестолку. Создали бы тему во фрилансе, возможно бы и помог если и не профи то какой-нибудь студент. (Правда, там можно нарваться на кидалу. Разово могу помочь с контролем оплаты, если студент согласится.) Но дело ваше :)
     
  4. Drunkenmunky

    Drunkenmunky Активный пользователь

    С нами с:
    12 авг 2020
    Сообщения:
    1.504
    Симпатии:
    283
    Вместо строк
    Код (Text):
    1. $dst = ImageCreateTrueColor($dst_width, $dst_height);
    2.     ImageCopyResampled($dst, $src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width, $src_height);
    вставьте

    Код (Text):
    1. if($src_width <= $src_height)
    2. {
    3. $dst = ImageCreateTrueColor($dst_width, $dst_width);
    4. ImageCopyResampled($dst, $src, 0, 0, 0, ($src_height - $src_width)/2, $dst_width, $dst_width, $src_width, $src_width);
    5. }
    6. else
    7. {
    8. $dst = ImageCreateTrueColor($dst_height, $dst_height);
    9. ImageCopyResampled($dst, $src, 0, 0, ($src_width - $src_height)/2, 0, $dst_height, $dst_height, $src_height, $src_height);
    10. }
     
  5. acho

    acho Активный пользователь

    С нами с:
    28 дек 2016
    Сообщения:
    854
    Симпатии:
    210
    Адрес:
    Санкт-Петербург
    наверное именно поэтому на их сайте вёрстка падает что в десктопной версии, что в адаптиве. Уделили внимание.