Question

我需要一些帮助来创建一个照相亭，允许用户从一些使用jquery插件检测用户脸部的道具中挑选并在其上叠加所述道具，之后用户可以拍摄他的照片/她自己与道具。我达到了代码能够检测到一个面并将一些东西投射到它上面的点，但我似乎无法编写允许用户在他/她的脸上拍摄快照的部分。救命？这是我到目前为止所要做的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>fotogoof</title>

    <link rel="stylesheet" href="css/experiment.css" />    
</head>
    <body class="experiment">
    <div class="wrapper">
        <canvas width="400" height="320" class="mask"></canvas>
        <script src="js/ccv.js"></script>
        <script src="js/face.js"></script>
    </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>
        window.URL || (window.URL = window.webkitURL || window.msURL || window.oURL);

        navigator.getUserMedia || (navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);

        if (typeof navigator.getUserMedia === "function") {

            (function() {

                var video = document.createElement('video'),
                    content = document.querySelector('.transforming-content'),
                    canvas = document.querySelector('canvas'),
                    context = canvas.getContext('2d'),
                    mask = new Image(),
                    originalFace,

                    SCALE_EXPERIMENT = 'scale',
                    MASK_EXPERIMENT = 'mask',
                    experimentType = /mask/.test(canvas.className) ? MASK_EXPERIMENT : SCALE_EXPERIMENT,

                    gUMOptions = {video: true, toString: function(){ return "video"; }};

                video.setAttribute('autoplay', true);
                mask.src = "img/mask.png";
                context.fillStyle = "rgba(0, 0, 200, 0.5)";
                navigator.getUserMedia(gUMOptions, handleWebcamStream, errorStartingStream);

                function handleWebcamStream(stream) {

                    video.src = (window.URL && window.URL.createObjectURL) ? window.URL.createObjectURL(stream) : stream;
                    processWebcamVideo();
                }

                function errorStartingStream() {
                    alert('Uh-oh, the webcam didn\'t start. Do you have a webcam? Did you give it permission? Refresh to try again.');
                }

                function processWebcamVideo() {

                    var startTime = +new Date(),
                        changed = false,
                        scaleFactor = 1,
                        faces;

                    context.drawImage(video, 0, 0, canvas.width, canvas.height);
                    faces = detectFaces();

                    if(experimentType === MASK_EXPERIMENT) {
                        drawMasks(faces);
                    } else {
                        highlightFaces(faces);

                        if(originalFace && faces.length > 0) {
                            scaleContent(faces[0]);
                        }

                        if( ! originalFace && faces.length === 1) {
                            originalFace = faces[0];
                        }
                    }

                    setTimeout(processWebcamVideo, 50);
                }

                function detectFaces() {

                    return ccv.detect_objects({canvas : (ccv.pre(canvas)), cascade: cascade, interval: 2, min_neighbors: 1});
                }

                function highlightFaces(faces) {
                    if(!faces) {
                        return false;
                    }

                    for (var i = 0; i < faces.length; i++) {
                        var face = faces[i];
                        context.fillRect(face.x, face.y, face.width, face.height);
                    }
                }

                function drawMasks(faces) {
                    if(!faces) {
                        return false;
                    }

                    for (var i = 0; i < faces.length; i++) {
                        var face = faces[i];
                        context.drawImage(mask, face.x * 0.9, face.y * 0.9, face.width * 1.3, face.height * 1.3);
                    }
                }

                function scaleContent(newFace) {
                    var scaleFactor = originalFace.height / newFace.height;
                    content.style.setProperty('-o-transform', 'scale('+scaleFactor+')');
                    content.style.setProperty('-webkit-transform', 'scale('+scaleFactor+')');
                }
            })();
        }
        </script>  
    </body>
</html>

任何帮助将不胜感激。

照相亭用道具使用人脸检测

0 个答案: