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
0.1.0
0.1.1
0.2.0
0.2.1
0.3.0
0.3.1
0.3.2
0.3.3
0.4.0
0.5.0
0.5.1
0.5.2
0.5.3
0.5.4
0.5.5
0.5.6
0.6.0
0.7.0
0.7.1
0.7.2
0.8.0
0.8.1
1.0.0
1.0.0-alpha
1.0.0-beta
1.0.0-beta.1
1.0.0-beta.2
1.0.0-rc
1.0.0-rc.1
1.0.0-rc.2
1.0.0-rc.3
1.1.0
1.1.1
1.1.2
1.1.3
1.2.0
1.2.1
1.2.2
1.3.0
1.3.1
1.3.2
1.3.3
1.3.4
1.3.5
1.3.6
1.4.0
1.4.1
1.4.2
1.4.3
1.5.0
1.5.1
1.5.10
1.5.11
1.5.12
1.5.13
1.5.2
1.5.3
1.5.4
1.5.5
1.5.6
1.5.7
1.5.8
1.5.9
1.6.0
1.6.1
*** 1.6.2
2.0.0-alpha
2.0.0-alpha.1
2.0.0-alpha.2
2.0.0-beta
2.0.0-beta.1
2.0.0-beta.2
2.0.0-beta.3
2.0.0-beta.4
2.0.0-beta.5