答案：HTML图片裁剪需结合CSS、JavaScript和Canvas实现。使用Canvas可通过drawImage提取指定区域，CSS可通过overflow:hidden视觉裁剪，复杂需求推荐Cropper.js等库。
要在HTML中实现图片裁剪功能，通常需要结合HTML、CSS和JavaScript来完成。原生HTML不提供直接的图片裁剪能力，但通过现代浏览器支持的API和前端技术，可以轻松构建一个交互式的图片裁剪工具。
使用Canvas进行图片裁剪
Canvas是实现图片裁剪最常用的方式之一。它允许你在画布上绘制图片，并只提取你感兴趣的区域。
步骤如下：
- 创建一个
<input type="file">让用户上传图片 - 使用
FileReader读取图片并显示在页面上 - 将图片绘制到
<canvas>上 - 通过
ctx.drawImage()方法指定裁剪区域 - 导出裁剪后的图片为新的图像数据（如base64）
<input type="file" id="imageUpload" accept="image/*">
<canvas id="cropCanvas" width="200" height="200"></canvas>
<script>
document.getElementById('imageUpload').addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.src = event.target.result;
img.onload = function() {
const canvas = document.getElementById('cropCanvas');
const ctx = canvas.getContext('2d');
// 裁剪参数：从x=50, y=50开始，宽高各100像素
const x = 50, y = 50, width = 100, height = 100;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, x, y, width, height, 0, 0, canvas.width, canvas.height);
// 获取裁剪后的图片数据
const croppedImageURL = canvas.toDataURL('image/png');
console.log('裁剪后的图片:', croppedImageURL);
};
};
reader.readAsDataURL(file);
};
</script>
使用CSS实现静态裁剪
如果只是想在页面上“视觉”裁剪图片（不修改原始图像），可以用CSS的overflow: hidden配合定位或背景图来实现。
立即学习“前端免费学习笔记（深入）”；
适合场景：头像展示、固定尺寸图片容器等。
示例：用div裁剪图片显示<div style="width: 100px; height: 100px; overflow: hidden; border-radius: 50%;"> <img src="face.jpg" style="width: 100%; transform: translate(-50%, -50%); position: relative; top: 50%; left: 50%;"> </div>
这段代码会把图片居中并裁剪成圆形头像效果。
集成第三方库简化开发
对于更复杂的裁剪需求（如拖拽选择区域、缩放、旋转），推荐使用成熟的JavaScript库。
常用库包括：
使用Cropper.js简单示例：
<img id="image" src="test.jpg">
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<script>
const image = document.getElementById('image');
const cropper = new Cropper(image, {
aspectRatio: 1, // 限制裁剪比例为1:1
viewMode: 1,
crop(event) {
console.log(event.detail.x, event.detail.y, event.detail.width, event.detail.height);
}
});
// 调用cropper.getCroppedCanvas().toDataURL()获取结果
</script>
基本上就这些。根据你的项目需求选择合适的方法：简单裁剪可用Canvas，展示用CSS，复杂交互优先考虑Cropper.js这类成熟方案。 
