Get started with smartcrop CDN
MIT licensed
SmartCrop: library adjusting image dimensions with aspect ratio for optimal screen sizes.
Tags:- image
- crop
- canvas
- smart
Stable version
Copied!
How to start using smartcrop CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with smartcrop CDN - cdnhub.io</title>
<style>
#output {
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<img id="input" src="path/to/your/image.jpg" alt="Input Image">
<div id="output"></div>
<script src="https://cdn.cdnhub.io/smartcrop/2.0.5/smartcrop.min.js"></script>
<script>
const input = document.getElementById('input');
const output = document.getElementById('output');
SmartCrop.init({
input: input,
output: output,
width: 300,
height: 300,
quality: 0.8, // Adjust the image quality (0 to 1)
autoCrop: true, // Enable automatic cropping
aspectRatio: 1, // Maintain aspect ratio
onReady: function() {
console.log('SmartCrop is ready!');
},
onFinish: function() {
console.log('SmartCrop finished!');
}
});
</script>
</body>
</html>
Copied!
Copied!