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',
});

[GuidingD]

I added to aviewport new parameter 'sale' like this viewport:{width: 235, height: 235, type: 'square',scale:1} And added bunch of changes to croppie.js like on screenshot https://yadi.sk/i/wwp7-FArWRzgsA
new part of code:
if (direction === 'v' && newHeight >= minSize && newHeight <= maxHeight
&& (!self.options.viewport.scale || self.options.viewport.scale && newHeightself.options.viewport.scale >= minSize && newHeightself.options.viewport.scale <= maxWidth)) {
css(wrap, {
height: newHeight + 'px',
});
if (self.options.viewport.scale) {
css(wrap, {
width: newHeight*self.options.viewport.scale + 'px'
});
}
self.options.boundary.height += deltaY;
css(self.elements.boundary, {
height: self.options.boundary.height + 'px'
});

            self.options.viewport.height += deltaY;
            css(self.elements.viewport, {
                height: self.options.viewport.height + 'px',
            });
            if (self.options.viewport.scale) {
                css(self.elements.viewport, {
                    width: self.options.viewport.height*self.options.viewport.scale + 'px'
                });
            }
        }
        else if (direction === 'h' && newWidth >= minSize && newWidth <= maxWidth
            && (!self.options.viewport.scale || self.options.viewport.scale && newWidth/self.options.viewport.scale >= minSize && newWidth/self.options.viewport.scale <= maxHeight)) {
            css(wrap, {
                width: newWidth + 'px',
            });
            if (self.options.viewport.scale) {
                css(wrap, {
                    height: newWidth/self.options.viewport.scale + 'px'
                });
            }

            self.options.boundary.width += deltaX;
            css(self.elements.boundary, {
                width: self.options.boundary.width + 'px'
            });

            self.options.viewport.width += deltaX;
            css(self.elements.viewport, {
                width: self.options.viewport.width + 'px',
            });
            if (self.options.viewport.scale) {
                css(self.elements.viewport, {
                    height: self.options.viewport.width/self.options.viewport.scale + 'px'
                });
            }

        }