Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

when croppie is bound to an element zoom starts really big, I want the image to be scaled to the boundary element #792

Closed
paulpreibisch opened this issue Nov 6, 2023 · 2 comments

Comments

@paulpreibisch
Copy link

paulpreibisch commented Nov 6, 2023

Expected Behavior

when I bind croppie to an element, the image should be displayed inside the boundary, and the zoom slider should be in the center

Actual Behavior

when I bind, I start at a very huge zoom level, and slider is way to the right

Steps to Reproduce the Problem

  $('#puzzle-piece-modal').modal('show');
               var croppie = new Croppie(document.getElementById('cropContainer'), {
                   viewport: {
                       width: 323,
                       height: 200,
                       type: 'square'
                   },
                   boundary: {
                       width: 646,
                       height: 400
                   },
                   enableZoom: true,

                   enableOrientation: true,
                   enforceBoundary: true
               });
               
               croppie.bind({
                   url: "/hunt/"+response.imageUrl,
                   points: [77,469,280,739],
                   orientation: 1,
                   zoom: 1
               });

Specifications

  • Browser: firefox
  • Version:
    image
@paulpreibisch
Copy link
Author

image

@paulpreibisch
Copy link
Author

I was able to fix by modifying class of the modal-dialog, and making sure that the boundary of croppie was smaller than the size of the modal (400px)

/* to ensure that croppie image doesnt overflow the modal */
#puzzlePieceDialog{
    overflow: hidden;
    padding:10px;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant