I'm using Cropper to try and get a fixed size crop from uploaded images. The idea is that the admin of the website will be able to zoom if (if needed) and frame the new image in the Cropper that can't be changed. In this way all images that are cropped are exactly the same size.

This works unless the user zooms in. In this case the resulting image is smaller and if they zoom out it is larger.

I'm initialising the cropper with this:

$('#image').cropper({
        aspectRatio: 16 / 9,
        cropBoxResizable: false,
        dragMode: 'move',
        built: function () {
            $("#image").cropper('setCropBoxData', { width: 640 });
        },
        cropmove: function () {
            $("#image").cropper('setCropBoxData', { width: 640 });
        }
    });

and then getting a dataUrl for upload using this:

var image = $("#image").cropper("getCroppedCanvas").toDataURL('image/jpeg', 1);

It appears that it is cropping by looking at the area bounded by the crop box and then cropping the image using the original size. In other words the box simply defines a bound region of the image which the cropper is then cutting out of the original image at the original size. I need them to be the size defined in the Cropper settings.

I'm using Cropper to try and get a fixed size crop from uploaded images. The idea is that the admin of the website will be able to zoom if (if needed) and frame the new image in the Cropper that can't be changed. In this way all images that are cropped are exactly the same size.

This works unless the user zooms in. In this case the resulting image is smaller and if they zoom out it is larger.

I'm initialising the cropper with this:

$('#image').cropper({
        aspectRatio: 16 / 9,
        cropBoxResizable: false,
        dragMode: 'move',
        built: function () {
            $("#image").cropper('setCropBoxData', { width: 640 });
        },
        cropmove: function () {
            $("#image").cropper('setCropBoxData', { width: 640 });
        }
    });

and then getting a dataUrl for upload using this:

var image = $("#image").cropper("getCroppedCanvas").toDataURL('image/jpeg', 1);

It appears that it is cropping by looking at the area bounded by the crop box and then cropping the image using the original size. In other words the box simply defines a bound region of the image which the cropper is then cutting out of the original image at the original size. I need them to be the size defined in the Cropper settings.

• javascript
• jquery
• cropper

2 Answers 2

var image = $("#image").cropper("getCroppedCanvas").toDataURL('image/jpeg', 1);

What you can actually do is change the above line and use "getCroppedCanvas" to give you any dimensions you want. So somewhere in JS:

var finalCropWidth = 640;
var finalCropHeight = 480;
var finalAspectRatio = finalCropWidth / finalCropHeight;

...

$('#image').cropper({
                viewMode: 3,
                aspectRatio: finalAspectRatio,
                zoomable: true,
                dragMode: 'move',

});

...

var image = 
$("#image").cropper("getCroppedCanvas", { width: 640, height: 480 }).toDataURL('image/jpeg', 1);

Now the user can zoom and change the size of the cropping window and all is OK because the aspect ratio is the same as the final desired image. The last call using getCroppedCanvas downsizes or upsizes whatever you have selected in the cropping window to your final desired image size.

Would setting

zoomable: false,

help in your situation? Or do you want to retain the user's ability to zoom?