人工智能（AI）基础 人脸识别
现在最流行的无非就是AI 区块链 大数据
人工智能的发展就是现在IT界的前沿，最基础的AI就是我们所说 人脸识别， 屏下指纹识别， 三星手机的虹膜识别等。
几乎现在最基础的AI技术人脸识别被很多企业常用在自己项目的web页面或APP里面
然后你的项目经理就会让你在页面加上人脸识别，这回可咋整，人脸识别咋实现啊，不一会你就会用百度来搜索。出现了一堆你认为没用的东西和demo，就算给你好使的，他也是说实现方式，代码不贴出来，你说你能不蒙比吗？
接下来求爷爷告奶奶的找到了国内知名的人脸识别官方___face++
face++官方: https://www.faceplusplus.com.cn/
登录注册账号就好然后看文档
接下来就是face++操作步骤
- 创建个自己项目在face++中随便填写（为了得到API key 和 API Secret而已）
然后按图所示找到你最需要的二个参数(记得把这二个参数贴到你的HTML页面上在注释掉)
- 然后按图找到对应的API（到这如果HTML精通的自己可是尝试做一下，但是我还是继续往下写毕竟互相理解）
- 文档说了所调用的URL是：https://api-cn.faceplusplus.com/facepp/v3/detect
post请求 前二个参数您刚才复制了， 后一个就是你所要识别的图片（最好介意有服务器选第一个，如果没有 好的服务和带宽选第三个）我是第三个哈 因为贫穷限制了我！！！
到这里就是可以写您的HTML代码了
现在细心的人会发现一些问题需要思考{
1）： 图片格式base64是啥玩意干啥64啊 咋不上天呢？ 知道64的怎么把图片编码为64啊
2）：HTML画画线的方式是啥嘛 咋圈出来人脸
3）： 打代码时候会考虑到的
}
代码：
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<style>
</style>
<body>
<canvas id="mycanvas" width="1280px" height="825px" style="border: 1px solid green;">
<span>你的浏览器不支持canvas</span>
</canvas>
<input type="file" id="img_upload" value="单机我" onclick="clearCanvans()" />
<button onclick="convertImageToCanvas()">开始描绘</button>
</body>
<script>
window.onload = function() {
var img_upload = document.getElementById("img_upload");
var img_area = document.getElementById("img_area");
img_upload.addEventListener('change', readFile, false);
}
function readFile() {
var file = this.files[0];
// 获取图片的路径
if(!/image\/\w+/.test(file.type)) {
alert("请确保文件为图像类型");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
// base64编码
O_click(this.result);
}
}
function O_click(num) {
var code = num;
//alert(code);
//console.log(code);
$.ajax({
type: "post",
url: "https://api-cn.faceplusplus.com/facepp/v3/detect",
data: {
api_key: 'xxxxxxxxxxxxxxxxxxxxxxx',
api_secret: 'xxxxxxxxxxxxxxxxxxxx',
image_base64: code,
},
dataType: "json",
success: function(data) {
alert('请求成功');
window.arr = new Array();
for(i in data.faces) {
window.wid = data.faces[i].face_rectangle.width;
window.hei = data.faces[i].face_rectangle.height;
window.y = data.faces[i].face_rectangle.top;
window.x = data.faces[i].face_rectangle.left;
}
},
error: function() {
alert("请求失败_也许图片不含人物头像");
}
});
}
</script>
<script>
function clearCanvans() {
var c = document.getElementById("mycanvas");
var cxt = c.getContext("2d");
c.height = c.height;
}
function convertImageToCanvas() {
// C:\fakepath\人脸头像.png var str = "C:\fakepath\人脸头像.png";
// 获取人脸图片的路径然后进行 正则表达式的解析 解析后路径为: /人脸头像.png
var str = document.getElementById('img_upload').value.toString();
window.path = str.match(/fakepath(\S*)/)[1];
// /人脸头像.png
// 交互后返回的数据 单人实现
var wid = window.wid; //296
var hei = window.hei; //296
var y = window.y; //229
var x = window.x; //494
var CANVAS = document.getElementById('mycanvas');
context = CANVAS.getContext('2d');
// window.path是拼接路径
var img = new Image();
img.src = "img" + window.path;
img.onload = function() {
context.drawImage(img, 0, 0);
// 单人人脸实现
context.strokeStyle = 'green';
context.strokeRect(x, y, wid, hei);
context.stroke();
}
}
</script>
###解答一下上面那些无理取闹的问题代码中含有base64 js的编码
的到的code（base64）做第三个参数进行交互，
木有错就是canvans进行描绘脸，因为canvans有rect矩形的链接线，这样我交互的到的四个点就进行圈矩形就行了，是因为最近研究的是canvans所有偶然想到的
例子中我本人第一做的单个人脸描绘不是多个，然后读者需要把data传的数据修改自己的就行，
其实隐藏问题就是图片问题：
我只是把我想识别的图片进行编码64然后传参 然后用canvans画脸（但是其中一直没有显示图片啊！！！相当于我直接把一张含有脸的图片交互处理后直接显示圈出人脸的是实现了！！）
而且另一个问题就是图片url问题，我代码是读取本地图片然后进行交互的，canvans画画时需要img的地址啊！所有图片我弄时候时二份 一份时桌面，另一份是我项目的img下名字一样，到时候我把我选中的图片截取名字，然后在用名字在我的项目查对应图片进行描绘的
就是我编码的图片是桌面，描绘的图片是项目中，名字必须一样的相同图片》》》》》体会一下代码把
多张人脸也有就是多个步骤可以私下要,这个看懂多张的也应该差不多了
我刚做时候没有web的例子就很是蒙逼然后自己左拼右凑的弄个人脸识别，分享这个希望大家借鉴一下实现方式和步骤，
熟悉canvans的小伙伴应该熟悉这段代码就多个base64编码加个正则表达式而已
頑張ります
版权声明：本文为博主原创文章！