实现裁剪JS
使用Canvas API进行图像裁剪
Canvas API提供了一种简单的方式来实现图像裁剪功能。通过drawImage方法可以指定裁剪区域和目标尺寸。
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function() {
// 设置裁剪区域(x,y,width,height)和目标尺寸
ctx.drawImage(img, 10, 10, 100, 100, 0, 0, 200, 200);
document.body.appendChild(canvas);
};
img.src = 'image.jpg';使用第三方库cropper.js
cropper.js是一个专业的图像裁剪库，提供丰富的配置选项和交互功能。
import Cropper from 'cropperjs';
const image = document.getElementById('image');
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
crop(event) {
console.log(event.detail.x, event.detail.y);
}
});
// 获取裁剪结果
const croppedCanvas = cropper.getCroppedCanvas();使用React组件react-image-crop
对于React项目，react-image-crop提供了声明式的裁剪组件实现。
import ReactCrop from 'react-image-crop';
function App() {
const [crop, setCrop] = useState({ aspect: 1 });
return (
<ReactCrop
src="image.jpg"
crop={crop}
onChange={newCrop => setCrop(newCrop)}
/>
);
}纯CSS裁剪方案
CSS的clip-path属性可以实现简单的图像裁剪效果，但缺乏交互性。
.cropped-image {
clip-path: polygon(25% 25%, 75% 25%, 75% 75%, 25% 75%);
width: 200px;
height: 200px;
}服务端裁剪实现
Node.js可以使用sharp库进行服务器端图像处理。
const sharp = require('sharp');
sharp('input.jpg')
.extract({ left: 100, top: 100, width: 300, height: 300 })
.toFile('output.jpg');每种方案适用于不同场景：Canvas API适合基础需求，cropper.js适合专业级交互，React组件适合前端框架项目，CSS方案适合静态裁剪，服务端方案适合批量处理。选择时需考虑项目需求和技术栈。
