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

custom size for canvas, image and cropper area #782

Closed
snake-venom-nk opened this issue Jan 23, 2021 · 6 comments
Closed

custom size for canvas, image and cropper area #782

snake-venom-nk opened this issue Jan 23, 2021 · 6 comments

Comments

@snake-venom-nk
Copy link

snake-venom-nk commented Jan 23, 2021

I am trying to achieve the fixed size of the canvas area, the image size should come less than canvas area, and cropping area height should be equal to image height and cropping area width should be image width + some extra space like 20px margin.
to do this I am trying to below test, but my result is coming accurate or a little bit similar.

Do you have any idea or suggestion, please?

My Script:


    cropper = new Cropper(image, {
    
    		    cropBoxResizable: true,
                cropBoxMovable: true,
                dragMode: 'move',
                left: 0,
                top: 0,
       
                toggleDragModeOnDblclick: true,
                zoomOnTouch: true,
                zoomOnWheel: true,
        
                minContainerWidth: 500,
                minContainerHeight: 500,

                minCanvasWidth : 400,
                minCanvasHeight :400,

                minCropBoxWidth: 200,
                minCropBoxHeight: 200,
    		    ready: function () {
    	        	
    		    }
    });

PlayGround: https://jsfiddle.net/bke1od4w/

expected result in the image:

37eEJ

@snake-venom-nk snake-venom-nk changed the title cropperjs - custom size for canvas, image and cropper area custom size for canvas, image and cropper area Jan 23, 2021
@fengyuanchen
Copy link
Owner

Duplicate of a lot of other issues!!!

  1. Don't try to limit the real size of the crop box, it is a virtual viewport!
  2. Just use the viewMode option to limit the viewport!
  3. And then use the width and height options of the getCroppedCanvas method to convert the canvas to your wanted size!

@inorganik
Copy link

viewMode is deprecated in v2. How can we ensure an image doesn't overflow the containing element?

For instance, I have a 358x400px div to hold Cropper (this is on mobile). If I load an 1127x634px image, it is mostly hidden, I only see the corner of it. I would like it to display at a scaled resolution of 358x201px, without that affecting the size of the resulting crop. Is it possible?

I'm afraid if I set the dimensions to fit the image in my container it will reduce the resolution of the cropped image. If I add CSS like so, it scrunches the image horizontally:

cropper-image {
  max-width: 100%;
  height: auto;
}

...whereas with an <img> element, the image would scale. Is there an aspect fit option? Thanks.

@fengyuanchen
Copy link
Owner

@inorganik As of v2, the image is transformed by matrix, so it is hard to calculate its actual visual dimension.

const matrix = cropperImage.$getTransform();

// Try to calculate the following values with the `matrix` by yourself.
const visualX = ?;
const visualY = ?;
const visualWidth = ?;
const visualHeight = ?;

@JoshThomson7
Copy link

Can you tell me how to change the cropper dimensions from a square to a rectangle?

@fengyuanchen
Copy link
Owner

@JoshThomson7 How about the aspectRatio option?

@muuvmuuv
Copy link

muuvmuuv commented Dec 9, 2024

In v2 I am no longer able to set a min or actual width of the image, when I pull a 3000px wide image in the canvas its 3000px instead of the max canvas size of 100% viewport width which I set. How can I limit the dimensions?

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

No branches or pull requests

5 participants