Responsive viewport and boundary

Hello everyone, I have one question is there any solution to redraw/reset the croppie boundary and viewport on window resize I tried something like this for tracking and setting new value:

var bwidth;

  $(window).resize(function(){
     cwidth = $(window).width();

     if( cwidth <= 480 && cwidth >= 320) {
       bwidth = cwidth - 40;
     } else {
       bwidth = 185;
     }
     });

and here is the config code:

$uploadCrop = $('#uploaded-picture').croppie({
     enableExif: true,
     viewport: {
       width: 220,
       height: 330
     },
     boundary: {
       width: bwidth,
       height: 411
     },
       enableOrientation: true
});

I only get the croppie container with 185px width.

[Xstyler85]

I found simpler solution. Just re-bind values on the window resize to force croppie to re-calculate values like this:

window.onresize = () => {
     croppie.bind({
          url: image,
          points: points,
          orientation: orientation,
          zoom: zoom
     })
}

[nicholascourage]

I spent a few hours trying to solve this. Making it responsive in bootstrap on an Iphone5 for example meant that any static values would overlap the screen. As I’m trying to maintain an aspect ratio (2:1 i.e. a rectangle) and maintain the margin appearance of the boundary over the viewport, I’ve set the enableResize option to false. My problem had the added complexity of this rendering in a bootstrap modal but got I there with this:

$("#file-upload").on("change", function(event) {

    $("#myModal").modal();

    // Initailize croppie instance and assign it to global variable

    var boundaryWidth = $(".modal-body").width();

    var boundaryHeight = boundaryWidth / 2;   

    var viewportWidth = boundaryWidth - (boundaryWidth/100*25);

    var viewportHeight = boundaryHeight - (boundaryHeight/100*25);

    croppie = new Croppie(el, {

        viewport: { width: viewportWidth, height: viewportHeight },
        boundary: { width: boundaryWidth, height: boundaryHeight },
        enableOrientation: true,

    });

    $.getImage(event.target, croppie); 

});

With this, what ever the size of my bootstrap modal, croppie’s dimensions are then set dynamically. The only problem I’ve got with this is that if the browser’s viewport is resized after this is executed then croppie’s width and height settings aren’t updated but guess this is easily solved with some change event, etc.