Croppie: Scale down the viewport?

[iKonrad]

Hi, I'm planning to use Croppie to allow users to upload a pretty big banner (roughly 1900x900). If I set the viewport to the size above, it'll display the widget in real size. Is there a way to scale down the interface so it knows that the image is 1900x900, but show it scaled down?

Thanks.

[optimalab]

I've a similar problem. I'm using croppie to create a banner of 653x250px and is working just fine. But since I'm using it on a responsive site, I've the problem with mobile version with a width of 320px.
I'm wondering if it's possible to activate a responsive mode, where the croppie wrapper has a maximum width and works with a different zoom factor. In my case, in mobile version I've 288px of maximum width. The wrapper should become 288x110 (aspect ratio = 2,612), the calculated zoom to generated the image should be multiplied by 2,26 (653/288).

It's friday evening and still thinking about me, please forgive me if I'm completely wrong ;)

[0plus1]

I am looking to do exactly the same thing

+1

[0plus1]

I got as far as this:

    var square_size = 800;

    var elem_width = $('.your-div').width();

    var scale_factor = elem_width/square_size;

    $('.cr-boundary').css('transform','scale('+scale_factor+','+scale_factor+')');

This is most likely what is needed, css transform does the trick, the issue is that the scale_factor needs to be taken into account when the cropping occurs, I took a look at croppie code and it looks like there is no way to pass an arbitrary scale..

[optimalab]

I tried a different thing: on croppie init I set viewport & boundary to the container size:

var parentW = angular.element(element[0].parentElement).width();
var w = parentW < ctrl.width ? parentW : ctrl.width;
var h = parentW < ctrl.width ? Math.round(parentW * ctrl.height / ctrl.width) : ctrl.height;

BTW I'm using angular but it's exactly the same with jQuery.

var c = element.find( '.croppie.main' ).croppie( {
    viewport: {width: w, height: h, type: ctrl.type},   // The inner container of the coppie.
    boundary: {width: w, height: h},   // The outer container of the cropper
    update: function () {
        c.croppie( 'result', {
                type: 'canvas',
                size: {width: ctrl.width, height: ctrl.height},
                format: 'jpeg',
                quality: 1
            } )
            .then( function ( img ) {
                scope.$apply( function () {
                    ctrl.croppedImage = img;
                } );
            } );
    }
});

So the idea is to use the container size for the viewport and then ask to export the image in original size. All the scaling is handled by croppie. Didn't change a single line of code :)

[thedustinsmith]

Seems like you guys got it figured out. If there's something you'd like to see in croppie, feel free to comment again, but for cleanliness purposes, I'm closing this one.

[SheseR]

I need help. Could anybody explain me about "ctrl" in the topic "optimalab commented on Dec 3, 2016 • edited" ???
Thanks.

[a-ghasemi]

Can somebody give us a clean code about this?
I tried css transform but it changes result too.
dear friend optimalab answer is too summarized and reversing the idea takes time.
and I think it will be more practical if developer add an option to its great croppie for scaling whole.

[soaxelbrooke]

You can export a higher resolution (than the viewport) by just setting the size, a'la:

const croppedBlob = await myCroppie.result({
  type: 'blob',
  size: {height: 500, width: 500},
  format: 'png',
});