Get started with cropper CDN

MIT licensed

Powerful, flexible image cropping tool: Cropper.js selects and crops areas in real time.

Tags:
  • image
  • cropping
  • jquery
  • plugin
  • html
  • css
  • javacript
  • front-end
  • web
  • development

Stable version

Copied!

How to start using cropper CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with cropper CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/4.1.0/cropper.min.css" referrerpolicy="no-referrer" />
    <script src="https://cdn.cdnhub.io/cropper/4.1.0/cropper.min.js" referrerpolicy="no-referrer"></script>
</head>
<body>
    <img id="image" src="path/to/your/image.jpg" alt="Image to be cropped">
    <button id="crop-button">Crop Image</button>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const image = document.getElementById('image');
            const cropButton = document.getElementById('crop-button');
            let cropper;

            if (image.complete) {
                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);
                    }
                });
            } else {
                image.addEventListener('load', function() {
                    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);
                        }
                    });
                });
            }

            cropButton.addEventListener('click', function() {
                cropper.getCroppedCanvas().toDataURL('image/jpeg').then(function(dataUrl) {
                    const link = document.createElement('a');
                    link.href = dataUrl;
                    link.download = 'cropped-image.jpg';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                });
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions