How to add scale in Laravel Image Intervention package?

Honestly do not use this intervention. Do yourself a favor and use gumplet.com it is the same as Cloudinary but much much cheaper with free levels also. These services will manipulate the image for you to server the best images size for what ever the device a user is using. depanding on the amount of images you server cloudinary is also a really nice option.

I'd say drop Quillotine and use cropperjs. https://fengyuanchen.github.io/cropperjs/ For resizing I'm using the php builtin gd library and it works flawlessly using mostly https://www.php.net/manual/en/function.imagewebp.php since I only store webp (if not svg and > 320 wide)

@artcore Do you have an example like how you crop your cover photo on facebook? The examples in documentation seems like a photoshop crop.

@jonjie Here's a short version of my javascript

let cropper;

const fileInput  = document.querySelector('input[name="document[file]"]'),
      image      = document.getElementById('image'),
      input      = document.querySelector('input[name="document[crop]"]');

fileInput.addEventListener('change', e =>
{
  const file      = e.target.files[0];


  //send the uploaded file to the cropbox img src
  image.innerHTML = `<img alt="" src="${URL.createObjectURL(file)}">`;

  //I left out some things but you get the idea
  init(options.width, options.height);

});

const init = (width, height) =>
{
  if (cropper instanceof Cropper)
  {
    const parent = document.querySelector('.cropper-container');
    if (parent)
      parent.remove();//bug in cropper github#1255
    cropper.destroy();
  }

  cropper = new Cropper(image.querySelector('img'),
    {
      dragMode:           'move',
      minContainerWidth:  image.style.width,
      minContainerHeight: image.style.height,
      minCropBoxWidth:    width,
      minCropBoxHeight:   height,
      wheelZoomRatio:     0.05,
      autoCropArea:       0.65,
      guides:             false,
      background:         false,
      highlight:          false,
      movable:            true,
      cropBoxResizable:   false,
      cropBoxMovable:     false,
      ready:              () =>
                          {
                            set() //I do this elsewhere IF something got changed i.e. cropped, zoomed otherwise just send the original upload to the backend
                          }
    });

};

const set = () =>
{
  const cropped = cropper.getCroppedCanvas(
    {
      width:                 options.width,
      height:                options.height,
      fillColor:             mimeType.value === 'image/png' ? '#FFF0' : '#FFFFFF',
      imageSmoothingEnabled: true,
      imageSmoothingQuality: 'high'
    });

  if (cropped)
    input.value = cropped.toDataURL(mimeType.value || 'image/png', 100);

};

You will get a base64 encoded string in your backend OR without cropping possibly a regular file upload

Here's part of my backend to handle that

$file = $this->document['crop']; //this is the base64 encoded string from toDataURL set by cropperjs

    if (!$file) //regular upload possibly
    {
      $file = $this->document['file'];
      if ($file instanceof UploadedFile)
        $this->source = $file->get();
    }
    else
    {

      $mimeType = $this->document['mime_type'] ?? 'image/jpeg';
      if ($mimeType === 'image/svg+xml')
        $mimeType = 'image/png'; //toDataURL falls back to png | only raster, no vector
      
      $this->source = base64_decode(str_replace("data:$mimeType;base64,", '', $file));
    }

I added some comments to help you understand

I validate mimeType either from UploadedFile or like this:

$source = getimagesizefromstring($this->source);

Never trust user input :)

===

Some DOM elements

<label class="my-20"><input type="file" name="document[file]"></label>


<div id="image">
      <img src="placeholder.jpg" alt="choose file" title="choose file">
</div>

Hope you get the idea - my full code is too elaborate to post ;)

@artcore Can we have jsfiddle for that? So I can understand it better

@jonjie If you add the needed dom elements (eg div id=image) and import the cropperjs script, above will guide you to the solution for both frontend and backend. Granted it's a bit fragmented but the cropperjs docs are a good starting point also.

https://fengyuanchen.github.io/cropperjs/ -> examples

Start with an image element, initialize cropperjs on it (see my example in init()) and you will see what my fragments are meant to do.

I'm one of those guys who don't use github and fiddles ;)