Uploading an image cropped using a cropper.js plugin

Question

I have used cropper.js plugin in my application to crop images. I am able to crop the images. Now I am trying to upload the images instead of downloading them. I have updated th

Answer 1

In you code above, remember Canvas function toBlob accepts 3 params (as per Mozilla docs):

• callback
• mimeType e.g. image/jpg
• quality e.g 90

So in your function you can include the mimeType and quality options. Also in the append line include a thirds parameter for filename (with same extension)

canvas.toBlob(function (blob) {
  var formData = new FormData();
  
  /* Add blob and file name */
  formData.append('croppedImage', blob, 'file.jpg');

  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function () {
      console.log('Upload success');
    },
    error: function () {
      console.log('Upload error');
    }
  });

/* This is the important part */
}, 'image/jpeg', 0.9);