CROPRO Demos: Popup mode

Open CROPRO in a popup

In most instances, cropping images inline on the page works fine. But sometimes you want to open the image in a dedicated popup editor. CROPRO has this scenario covered.

Set cropArea.displayMode = 'popup' and the editor will open in a popup.

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

Code

Setting displayMode = 'popup' is all you need to change the behavior of CROPRO:

const cropArea = new cropro.CropArea(this.targetImage); // open the editor in a popup cropArea.displayMode = 'popup'; cropArea.addRenderEventListener((imgURL) => target.src = imgURL); cropArea.show();

Check out this demo in CodeSandbox for a complete self-contained example.