CROPRO Demos: Configure aspect ratios

Simple defaults
Popup mode
Customize UI
Configure aspect ratios
No toolbars
marker.js 2 Demos
marker.js Live Demos
MJS Diagram Demos

Configure aspect ratios

You can change allowed cropping aspect ratios by setting aspectRatios property. If aspectRatios contains only one element, then the aspect ratio button is not shown in the toolbar.

Click on the image to launch the demo and look at the code below.

Open in CodeSandbox

Code

We are adding available ratios to the aspectRatios array and then setting the default aspect ratio to the first element in that array.

cropArea.aspectRatios = [
  { horizontal: 1, vertical: 1 }, 
  { horizontal: 3, vertical: 2 }, 
  { horizontal: 2, vertical: 3 }
];
cropArea.aspectRatio = cropArea.aspectRatios[0];

Check out this demo in CodeSandbox for a complete example.

« Previous demoNext demo »