JS实现从照片中自动裁切自已的肖像,并保存到本地
时间: 2024-03-15 13:46:40 浏览: 16
要实现从照片中自动裁剪自己的肖像并保存到本地,可以借助开源的JavaScript库 `face-api.js`,该库提供了人脸识别和人脸特征提取的功能。
首先,我们需要在HTML页面中添加一个input元素和一个canvas元素用于显示照片和裁剪后的肖像:
```html
<!DOCTYPE html>
<html>
<head>
<title>Crop Portrait</title>
</head>
<body>
<input type="file" id="file-input">
<canvas id="canvas"></canvas>
</body>
</html>
```
然后,在JavaScript中获取input元素和canvas元素,并为input元素添加change事件监听器,以便用户选择照片:
```javascript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
const img = new Image();
img.onload = async () => {
const faceDetection = await faceapi.detectSingleFace(img).withFaceLandmarks();
const faceLandmarks = faceDetection.landmarks._positions;
const leftEye = faceLandmarks[36];
const rightEye = faceLandmarks[45];
const mouth = faceLandmarks[66];
const eyeCenter = [(leftEye.x + rightEye.x) / 2, (leftEye.y + rightEye.y) / 2];
const mouthCenter = [mouth.x, mouth.y];
const faceWidth = Math.abs(rightEye.x - leftEye.x) * 2.4;
const faceHeight = Math.abs(mouth.y - eyeCenter.y) * 2.2;
const faceX = eyeCenter.x - faceWidth / 2;
const faceY = eyeCenter.y - faceHeight / 2;
canvas.width = faceWidth;
canvas.height = faceHeight;
ctx.drawImage(img, faceX, faceY, faceWidth, faceHeight, 0, 0, faceWidth, faceHeight);
const croppedImageUrl = canvas.toDataURL();
const downloadLink = document.createElement('a');
downloadLink.href = croppedImageUrl;
downloadLink.download = 'portrait.png';
downloadLink.click();
};
img.src = URL.createObjectURL(file);
});
```
在这段代码中,我们使用 `face-api.js` 库中的 `detectSingleFace` 方法检测照片中的人脸,并使用 `withFaceLandmarks` 方法获取人脸特征。然后,我们通过计算眼睛和嘴巴的位置来确定要裁剪的区域。最后,我们使用canvas的 `drawImage` 方法将裁剪后的肖像绘制到canvas上,并使用 `toDataURL` 方法将其转换为base64格式的图片链接。最后,我们创建一个下载链接,并模拟点击下载链接将裁剪后的肖像保存到本地。
现在,用户可以选择照片,自动裁剪肖像,并将其保存到本地了。