The original address: https://buluo.qq.com/p/detail.html?bid=314687&pid=3951568-1506610193
Front-end face recognition
First need is face recognition, this principle is not to feel the things on the tall abstruse, is nothing more than the facial features of choose and employ persons rules of image matching and recognition, the work front while it is possible to realize, but the front end to achieve basic can only according to the matching of the built-in rule base, the quality of the library determines the recognition quality, And usually more mature program is the introduction of machine learning, so that the program is constantly self-correcting and improving, further improve the recognition rate, machine learning front-end library is also there, but the combination of the two has not been found, so the accuracy of the front face recognition do not report too high expectations.
The front end of the existing face recognition isn’t much, here we choose the effect is relatively better trackingjs, this library function is very powerful, library as the name implies, it can complete all kinds of track class image processing tasks, face recognition is one of the many other functions, and by selecting plug-in, can accurately identify the eyes, nose, etc. The location of the facial features, It looks like a little bit of fiddling could do the trick.
Here, we only use TrackingJS to realize face recognition. The code for initializing a face recognition task is as follows:
var tracker = new tracking.ObjectTracker(['face']); On ('track', function (event) {if (! Event.data.length) {return console.log(' no face in picture '); } event.data.forEach(function (rect, i) { console.log(rect); // Single face data})})
A facial recognition task is initialized as follows:
tracking.track('#img', tracker); // '#img' is the selector for the target image
In the recognition callback, Event. data is the face data in array format. If the length is 0, it indicates that there is no face in the image or recognition fails.
{x: number, // face is located on the X-axis of the original picture y: nuber, // face is located on the Y-axis of the original picture width: number, // face width: height: nubmer // face height: nubmer // face height: nubmer // face height: nubmer // face height: nubmer //
With this face data, it is easy to extract the area from the original image. Of course, the front end is canvas, as shown in the following example:
var img = document.getElementById('img');
var faceCtx = document.getElementById('mycanvas').getContext('2d');
var theFace = ... ; // Suppose we recognize theFace
faceCtx.drawImage(img, theFace.x, theFace.y, theFace.width, theFace.eight, 0, 0, theFace.width, theFace.height); // Draw the face using the drawImage() method
Up to now we have achieved facial recognition + extraction, and the amount of code is not much, in fact, there is a small hole to be found in practice, that is, trackingJS configuration, the document can find 4 configurations related to recognition, respectively:
setClassifiers(classifiers)
setEdgesDensity(edgesDensity)
setScaleFactor(scaleFactor)
setStepSize(stepSize)
What’s more, there is no useful explanation for them in the document. In the test, I only used the latter two configurations, which were translated as “scale factor” and “step size” respectively. After the boring human flesh test, it was found that the effective value range of these two parameters was 1-2 and 1.1-2 respectively. SetStepSize cannot be 1, otherwise the browser will freeze, so the value starts from 1.1, and the value can be more than 2, but the probability of success is very low. Most images can be recognized successfully by adjusting these two parameters, but it is difficult to recognize large close-ups of faces, which may need to be combined with the other two parameters. I really have no patience to continue the human flesh test, so if you are interested, go back to play.
Front-end image processing
After previous step of identification + we have got the facial image, in order to realize synthetic uniform according to effect we need to face image processing, make the tonal and consistent with the template, can no acosmia feeling together in the future, specific to a military uniform according to this case, we need to face to shaded and achieve “do old” old photos, You can do it with PS, but how do you do it on the front end?
Here we need to use AlloyImage produced by Tencent front-end team, which is a front-end image processing class library called FRONT-END PS, for example, to achieve the above effect, we just need to:
var faceImg = document.getElementById('theFace'); Faceimg. loadOnce(function () {AlloyImage(thie).act(' grayscale ').add(AlloyImage(this.width, this.height, '# 808080). The act (' gaussian blur, 4). The act (' hue/saturation adjustment, 22, 45, 0, true),' overlay '). The replace (this); })
And then you get an old face, which is pretty simple, and the AlloyImage usage is pretty dumb, so if you’re interested, take a five minute look at the official documentation, and I won’t go into it here.
Then we have to say about this image processing and other people every day P graph gap, although we got the ideal tone, but to put a face and specific template synthesis, there are two things essential. First of all, facial Angle correction, if the template is positive and your photo is crooked, direct violent stitching must be very illegal, so it is necessary to identify the facial Angle first, and correct to the specified Angle; Then is the face center positioning, because the face recognition results are not necessarily extracted with the face center as the center, so before synthesis to identify the face center line, and based on the template for positioning. However, we don’t have any of these, so we have to put higher requirements on the input image, if the input mouth slanting eyes of the image, the result can only be embarrassing.
Finally, the image synthesis part is more simple. First, draw the processed face to the specified position on the canvas, and then lay the transparent PNG template of the face that has been cut out of the image on it. In the actual process, you need to deal with some small problems, such as scaling the face image to the appropriate size according to the face size of the template; When cutting the template, the edges should be blurred, and try to retain the original facial outline of the template, and only the facial features should be cut off. Even so, the composite results are easy to break, but pure front-end processing is no better.