Get started with cropperjs CDN

MIT licensed

Free, open-source library: Cropper.js - image cropping and resizing in browsers.

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

Stable version

Copied!

How to start using cropperjs CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with cropperjs CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.1/cropper.min.css" referrerpolicy="no-referrer" />
    <style>
        #image {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <img id="image" src="path/to/your/image.jpg" alt="Image to be cropped">
    <script src="https://cdn.cdnhub.io/cropperjs/1.6.1/cropper.min.js" referrerpolicy="no-referrer"></script>
    <script>
        document.addEventListener('DOMContentLoaded', 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>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions