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
0.10.0
0.10.1
0.11.0
0.11.1
0.2.0
0.3.0
0.4.0
0.5.0
0.6.0
0.6.1
0.6.2
0.7.0
0.7.1
0.7.2
0.7.3
0.7.4
0.7.5
0.7.6
0.7.7
0.7.8
0.7.9
0.8.0
0.9.0
0.9.1
0.9.2
0.9.3
1.0.0
1.0.0-rc.1
2.0.0
2.0.1
2.0.2
2.1.0
2.2.0
2.2.1
2.2.2
2.2.3
2.2.4
2.2.5
2.3.0
2.3.1
2.3.2
2.3.3
2.3.4
3.0.0
3.0.0-alpha
3.0.0-alpha.1
3.0.0-beta
3.0.0-rc
3.0.0-rc.1
3.0.0-rc.2
3.0.0-rc.3
3.1.0
3.1.1
3.1.2
3.1.3
3.1.4
3.1.5
3.1.6
4.0.0
4.0.0-alpha
4.0.0-beta
*** 4.1.0