What is the best way to implement online image processing using php, css and js?

Question

PHP

Good evening dear ones.
It is necessary to implement online image processing on the site, i.e. the user enters the site, uploads the necessary image \ takes a photo from the webcam, after which he can apply various filters (similar to Instagram filters), effects, collages, text, etc., and then saves it to his device ( Example of such a site ).
I read various articles where they write about the solution in several versions (php, css, js).
But they are all written in the abstract, there are no specifics at all.
Can you please tell me the best way to accomplish the task?
If there are ready-made solutions (I don’t ask for ideal solutions), please share them, it’s easier to navigate through them and quickly join the implementation.
On what it will be implemented, in principle, it does not matter - be it CMS or plain html.
I would be very grateful.

Answer 1

My advice is similar to the previous one, but I would advise imagemagick , because I personally have experience with it, as well as a php wrapper for it - phmagick , which, having understood the whole process, can later be abandoned.
Briefly, it all comes down to the fact that php calls the operating system utility using the exec() method, which already processes the image, but not php itself, and even more so css js html ... You
can work with video using ffmpeg in the same way.
Working functions for cropping and resizing images, customize and substitute your library paths (win style: C:/programs/imagemagick).

/**
 * Crop images
 * @param $file string Path to cropping file
 * @param $left int Pixels to left margin
 * @param $top int Pixels to top margin
 * @param $width int Width of final images in pixels
 * @param $height int Height of final images in pixels
 */
public static function crop($file, $left, $top, $width, $height) {
  exec(strtr('{imagick}convert {file} -gravity NorthWest -crop {w}x{h}+{l}+{t} {file} 2>&1', array(
    '{imagick}' => '/usr/bin',
    '{file}' => str_replace(' ', '\\ ', realpath($file)),
    '{l}' => $left,
    '{t}' => $top,
    '{w}' => $width,
    '{h}' => $height,
  )), $out, $var);
}

/**
 * Change resolution of image
 * @param $file string Path to image
 * @param $size int Value of image's sides in pixels
 * @throws Exception\BaseException
 * @throws Exception\ImagemagickException
 */
public static function resize($file, $size) {
  if (! is_numeric($size)) {
    throw new BaseException;
  }

  exec(strtr('{imagick}convert -scale "{resolution}>" -quality {quality} -strip "{target}" "{target}" 2>&1', array(
    '{imagick}' => '/usr/bin',
    '{resolution}' => $size.'x'.$size,
    '{quality}' => 95),
    '{target}' => $file,
  )), $out, $var);

  if ($var > 0) {
    $msg = null;
    if ($var === 1) {
      $msg .= 'Probably incorrect path to the library';
    }

    throw new ImagemagickException('Imagemagick error #'.$var.' '.$msg);
  }
}