|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Image Cropper with SmartCrop</title> |
|
<link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css" /> |
|
<style> |
|
#canvas { |
|
border: 1px solid #ccc; |
|
margin-top: 10px; |
|
} |
|
img { |
|
max-width: 100%; |
|
display: block; |
|
margin: 10px 0; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>Image Cropper with SmartCrop</h1> |
|
<input type="file" id="upload" accept="image/*" /> |
|
<img id="image" style="display:none;" /> |
|
<div> |
|
<canvas id="canvas"></canvas> |
|
</div> |
|
<button id="crop">Crop</button> |
|
|
|
<script src="https://unpkg.com/smartcrop/dist/smartcrop.min.js"></script> |
|
<script src="https://unpkg.com/cropperjs/dist/cropper.js"></script> |
|
<script> |
|
const upload = document.getElementById('upload'); |
|
const image = document.getElementById('image'); |
|
const canvas = document.getElementById('canvas'); |
|
const cropButton = document.getElementById('crop'); |
|
let cropper; |
|
|
|
// Set the desired final image dimensions |
|
const finalWidth = 300; |
|
const finalHeight = 200; |
|
|
|
upload.addEventListener('change', (event) => { |
|
const file = event.target.files[0]; |
|
const reader = new FileReader(); |
|
|
|
reader.onload = (e) => { |
|
image.src = e.target.result; |
|
image.style.display = 'block'; |
|
|
|
// Use SmartCrop to get the suggested crop |
|
SmartCrop.crop(image, { width: finalWidth, height: finalHeight }).then((result) => { |
|
const crop = result.topCrop; |
|
|
|
// Initialize Cropper.js with the suggested crop area |
|
cropper = new Cropper(image, { |
|
aspectRatio: finalWidth / finalHeight, |
|
viewMode: 1, |
|
cropBoxResizable: true, |
|
cropBoxMovable: true, |
|
ready: () => { |
|
// Set the crop box to the suggested area |
|
cropper.setCropBoxData({ |
|
left: crop.x, |
|
top: crop.y, |
|
width: crop.width, |
|
height: crop.height, |
|
}); |
|
}, |
|
}); |
|
}); |
|
}; |
|
|
|
reader.readAsDataURL(file); |
|
}); |
|
|
|
cropButton.addEventListener('click', () => { |
|
const croppedCanvas = cropper.getCroppedCanvas({ |
|
width: finalWidth, |
|
height: finalHeight, |
|
}); |
|
const ctx = canvas.getContext('2d'); |
|
canvas.width = finalWidth; |
|
canvas.height = finalHeight; |
|
ctx.drawImage(croppedCanvas, 0, 0); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
