КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Фотошоп на PHP и jQuery

Частенько нужно или для рабочего стола картинку сделать, чтото по мелочи обрезать или вырезать нужный кусок картинки. И для того чтоб не запускать фотошоп, решил написать скрипт, для экономии времени и нервров.
Изначально использовалась стандартная GD библиотека для работы с изображениями, но заметил ухудшение качества картинок, поэтому переписал всё на ImageMagick. Плюс добавил возможность изменять гифки.
Все функции вы можете рассмотреть самостоятельно, обьясню только логику работы всех скриптов в целом.
Данные первой (основной) формы собираются с помощью яваскрипт-обьекта FormData, чтобы можно было передать ещё и файл.

$('#my_form').on('submit', function(e){
    
  preventdefault(e);// предотвращение отправки формы по умолчанию
  
  button1.prop("disabled", true);// блокировка кнопки
  
  var $that = $(this),
  formData = new FormData($that.get(0));// создаем новый экземпляр объекта и передаем ему нашу форму
  
  $.ajax({
    url: $that.attr('action'),
    type: $that.attr('method'),
    contentType: false,// важно - убираем форматирование данных по умолчанию
    processData: false,// важно - убираем преобразование строк по умолчанию
    dataType : 'json',// ожидаем ответ в виде объекта
    data: formData,
    success: function(response){

      if(response.save == null){
        thumbnail.attr("src", 'img/gon.jpg');
      }else{
        thumbnail.attr("src", response.save);
        pathinp.val(response.save);

        thumbnail.on('load', function(){
          imgW = thumbnail.width();
          imgH = thumbnail.height();
          var str = imgW +'x'+ imgH;
          if(response.delay || response.countframes){
              response.delay = response.delay || 10;
              str += '<br>Скорость гифки '+ response.delay + '<br>Количество кадров ' + response.countframes;
          }
          $('#getimage').html(str);
          write.css({'width':imgW, 'height':imgH});
        });
      }
       button1.prop("disabled", false);
     }
  });
}); 

/* кроссбраузерная функция отмены действия по умолчанию */
function preventdefault(e){
  e = e || window.event;
  if(e.preventDefault) e.preventDefault();
  else e.returnValue  = false;  
}

В файле worker.php после необходимых проверок переданных данных принимается решение, какую функцию использовать для редактирования изображения. Всего их 4, для изменения размеров, для адаптивной резки, для установки рамки и изменения яркости и контраста изображений. Плюс ещё одна - в файле worker_crop.php для вырезки выделенного участка. Смотрите предыдущие статьи по ImageMagick. Далее после обработки изображения возвращаем в аякс-функцию путь сохранённого изображения и вставляем его на страницу путём замены атрибута src картинки-заставки.
На странице имеется ещё одна скрытая форма, с полями типа hidden, в первое из которых мы подставляем ответ первого аякса, т.е. путь к сохранёной после обработки картинке. К изображению применён метод ImageAreaSelect и написана функция, которая подставляет в поля скрытой формы значения, которые возвращает метод selection после того как выбор участка сделан. Это координаты четырех точек участка, его ширина и высота.

$("#thumbnail").imgAreaSelect({handles: true, keys: { arrows: 15, ctrl: 5, shift: 'resize' }, onSelectChange: preview});
    
function preview (img, selection) {

  $("#x1").val(selection.x1);
  $("#y1").val(selection.y1);
  $("#x2").val(selection.x2);
  $("#y2").val(selection.y2);
  $("#w").val(selection.width);
  $("#h").val(selection.height);
  
}

далее так же, как и в первом случае, эти данные передаются через AJAX второму скрипту-обработчику worker_crop.php, который после резки картинки возвращает её нам, и мы, немало потрудившись, вставляем её на страницу, демонстрируя чудеса и магию Imgemagick и jQuery
Функция, меняющая размеры картинки::

/**
* 
* @param string $orig - путь к обрабатываемой картинке
* @param string $path - путь сохранения 
* @param int $width - ширина
* @param int $height - высота
* 
* @return результат выполнения, true или false
*/

function resize($orig, $path, $width=0, $height=0){
  $result=FALSE;
  try{
    $img = new \Imagick(realpath($orig));
    if($img->getImageMimeType()=='image/gif'){
      
      foreach ($img as $frame) {
          $frame->thumbnailImage($width, $height);
      }
      // Обратите внимание, writeImages вместо writeImage
      $result=$img->writeImages($path, true);
    
    }else{
      $img->thumbnailImage($width, $height);
      $img->setImageCompression(Imagick::COMPRESSION_JPEG);
      $img->setImageCompressionQuality(70);
      $result = $img->writeImage($path);
    }
    $img->clear();
  }catch(ImagickException $e){
    echo 'У нас проблема '. $e->getMessage(). " в файле ".$e->getFile().", строка ".$e->getLine();
  }
  return $result;
} 

Смотрим пример, кому понадобится код, обращаемся.
2015.08.09
jpgjpg

Программист решил занять у друга 1000 рублей, но для ровного сч..ета занял 1024
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


  • Привет. Классная тема) А что такое "замедлить гифку"?

  • 2017.05.14 - 16:57

  • sash ответил Vova

    Vova, привет, спасибо) А это значит что каждый следующий кадр делается медленнее предыдущего

        if ($gif->getImageMimeType() == 'image/gif') {
          foreach($gif as $key => $frame) {
            $frame->setImageDelay($delay + $key * $count);
          }
    
          $gif->writeImages($this->abs . '/' . $src, true);
          $gif->clear();
        }
    

  • 2017.05.14 - 17:15

Яндекс.Метрика Яндекс.Метрика