How to fix image size posted to server using Javascript Cropper

Question

I'm using Cropper https://github.com/fengyuanchen/cropper in a content management system but I'm struggling to get it to fix the size of a cropped image.

What I want to do is ensure whatever size of crop box is drawn on the canvas also results in a cropped image size of exactly 560px X 420px being passed through to the webserver.

The iQuery code I have at the moment is:-

$("#accept_crop").click(function() {

        var $image = $("#image");
        var cropper = $image.cropper();
        var baseURL = window.location.protocol+'//'+window.location.host;
        var pho_id = $("input[name=pho_id]").val();
        var mem_id = $("input[name=mem_id]").val();
        var photopath = $("input[name=photopath]").val();
        $image.cropper('getCroppedCanvas').toBlob(function (blob) {
                var formData = new FormData();
                formData.append('croppedImage', blob);
                formData.append('pho_id', pho_id);
                formData.append('mem_id', mem_id);
                formData.append('photopath', photopath);
                $.ajax(baseURL+'/path', {
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function () {
                      console.log('Upload success');
                    },
                    error: function () {
                      console.log('Upload error');
                    }
                });
        }, 'image/jpeg', 0.8);      

});

The cropped image is passing over fine but always results in a variable size depending on the size of the crop box that's drawn. Is there any way of fixing the size on the client site regardless of the crop box so that the image is scaled up or down, without using PHP to re-scale it?

score 3 · Answer 1 · answered Nov 22 '17 at 20:34

3

This always seems to happen... As soon as I've posted a question, I usually answer it myself shortly afterwards even though I've already spent ages trying to figure it out.

By adding adding the width and height options, this seems to work:-

$image.cropper('getCroppedCanvas', {'width': 560, 'height': 420}).toBlob(function (blob) {

answered Nov 22 '17 at 20:34

Andrew Simeou

91
2
9

i was just about to post it :) good to see you did it yourself. – Muhammad Omer Aslam Nov 22 '17 at 20:36
I didn't saw your answer. yeah its, what they have mentioned in the documentation. – Naresh Thakur Nov 22 '17 at 21:04
Thanks @Andrew Simeou you have saved lots of time us. – Vijay Maheriya Oct 19 '19 at 12:34

score 1 · Answer 2 · answered Nov 22 '17 at 20:46

It can be done, check its documentation:

https://github.com/fengyuanchen/cropper#getcroppedcanvasoptions

You can set destination width and height of the output canvas.

Other thing is you need to set the proportion ration as per your required width and height. 560/420 is proportional to 4/3. Set aspectRatio: 4/3. Which will resize the image to your desired size without compromising anything.

How to fix image size posted to server using Javascript Cropper

2 Answers2