CROPRO Demos

All default settings CROPRO demo

In this demo, we look at the simplest way of adding image cropping and rotation to your web app with just a few lines of code.

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

Open in CodeSandbox

Code

All it takes is these 3 lines of code:

const cropArea = new cropro.CropArea(this.targetImage);
cropArea.addRenderEventListener((imgURL) => target.src = imgURL);
cropArea.show();

And here's a complete HTML file to recreate this demo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>All defaults demo</title>
  <script src="https://unpkg.com/cropro/cropro.js"></script>
  <script>
    function showCropArea(target) {
      const cropArea = new cropro.CropArea(this.targetImage);
      cropArea.addRenderEventListener((imgURL) => target.src = imgURL);
      cropArea.show();
    }
  </script>
</head>
<body>

  <img src="img/sample-1.jpg" style="max-width: 600px;" onclick="showCropArea(this);" />
  
</body>
</html>

Check out this demo in CodeSandbox.

Next demo »