雅荷心语
心之所向便是光

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作
关注本站
- 微信
- 微博
- 腾讯微博
- Twitter
- Facebook
- RSS订阅

网页端使用JS识别人脸并且自动打马赛克

2023-03-30 分类：前端之旅阅读(690) 评论(0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>人脸识别</title>
    <script src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
</head>
<body>
<div class="content" id="app">
    <input type="file" id="image-input">
    <canvas id="canvas"></canvas>
</div>
<script>
    const imageInput = document.getElementById('image-input');
    Promise.all([
        faceapi.nets.ssdMobilenetv1.load('/models'),
        faceapi.nets.faceLandmark68Net.load('/models'),
        faceapi.nets.faceRecognitionNet.load('/models'),
    ]).then(start);

    function start() {
        imageInput.addEventListener('change', async () => {
            const imageFile = imageInput.files[0];
            const imageSrc = URL.createObjectURL(imageFile);
            const image = await faceapi.fetchImage(imageSrc);
            const detectionOptions = new faceapi.SsdMobilenetv1Options({
                minConfidence: 0.25, // 以控制需要检测到人脸的最小置信度分数。
                minFaceSize: 100, // 参数以检测较小的人脸
                maxFaceSize: 300, // 参数以检测较大的人脸
            });
            const detections = await faceapi.detectAllFaces(image, detectionOptions);
            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            document.body.appendChild(canvas);
            const context = canvas.getContext('2d');
            context.drawImage(image, 0, 0);
            detections.forEach((detection) => {
                const { x, y, width, height } = detection.box;
                const centerX = x + width / 2;
                const centerY = y + height / 2;
                const radius = Math.max(width, height) * 0.5;
                const gradient = context.createRadialGradient(centerX, centerY, radius / 3, centerX, centerY, radius);
                gradient.addColorStop(0, 'rgb(255,255,255)');
                gradient.addColorStop(1, 'rgba(255, 255, 255, 0.8)');
                context.beginPath();
                // 绘制椭圆
                context.ellipse(centerX, centerY, radius, (radius+4), 0, 0, 2 * Math.PI);
                context.fillStyle = gradient;
                context.fill();
            });
            const newImageSrc = canvas.toDataURL();
            const newImage = document.createElement('img');
            newImage.src = newImageSrc;
            document.body.appendChild(newImage);
        });
    }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</div>

const imageInput = document.getElementById('image-input');

Promise.all([

faceapi.nets.ssdMobilenetv1.load('/models'),

faceapi.nets.faceLandmark68Net.load('/models'),

faceapi.nets.faceRecognitionNet.load('/models'),

]).then(start);

function start() {

imageInput.addEventListener('change', async () => {

const imageFile = imageInput.files[0];

const imageSrc = URL.createObjectURL(imageFile);

const image = await faceapi.fetchImage(imageSrc);

const detectionOptions = new faceapi.SsdMobilenetv1Options({

minConfidence: 0.25, // 以控制需要检测到人脸的最小置信度分数。

minFaceSize: 100, // 参数以检测较小的人脸

maxFaceSize: 300, // 参数以检测较大的人脸

});

const detections = await faceapi.detectAllFaces(image, detectionOptions);

const canvas = document.createElement('canvas');

canvas.width = image.width;

canvas.height = image.height;

document.body.appendChild(canvas);

const context = canvas.getContext('2d');

context.drawImage(image, 0, 0);

detections.forEach((detection) => {

const { x, y, width, height } = detection.box;

const centerX = x + width / 2;

const centerY = y + height / 2;

const radius = Math.max(width, height) * 0.5;

const gradient = context.createRadialGradient(centerX, centerY, radius / 3, centerX, centerY, radius);

gradient.addColorStop(0, 'rgb(255,255,255)');

gradient.addColorStop(1, 'rgba(255, 255, 255, 0.8)');

context.beginPath();

// 绘制椭圆

context.ellipse(centerX, centerY, radius, (radius+4), 0, 0, 2 * Math.PI);

context.fillStyle = gradient;

context.fill();

});

const newImageSrc = canvas.toDataURL();

const newImage = document.createElement('img');

newImage.src = newImageSrc;

document.body.appendChild(newImage);

});

}

</script>

</body>

</html>

分享到：更多 ()

碎碎念):(来自公众号)

左邻右舍

Brian's Blog
易水寒
楼教主
贤心
阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

一	二	三	四	五	六	日
« 十
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

相关推荐

雅荷心语博客 -心之所向便是光