Get started with jquery-cropper CDN

MIT licensed

JQuery Cropper: Powerful, flexible image cropping tool. Real-time preview of cropped sections.

Tags:
  • image
  • crop
  • cropping
  • jquery
  • jquery-cropper
  • move
  • zoom
  • rotate
  • scale
  • cropper
  • cropperjs
  • cropper.js
  • html
  • css
  • javascript
  • front-end
  • web
  • development

Stable version

Copied!

How to start using jquery-cropper CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jquery-cropper CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.7.3/cropper.min.css" referrerpolicy="no-referrer" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/jquery-cropper/1.0.1/jquery-cropper.min.js"></script>
    <script>
        $(document).ready(function() {
            const image = document.getElementById('image');
            const cropper = new Cropper(image, {
                aspectRatio: 16 / 9,
                viewMode: 1,
                dragMode: 'move',
                crop(event) {
                    console.log(event.detail.x, event.detail.y, event.detail.width, event.detail.height);
                }
            });
        });
    </script>
</head>
<body>
    <img id="image" src="path/to/image.jpg" alt="Crop image">
</body>
</html>
Copied!
Copied!

All versions