实训日记5：情绪分析模块集成

上周我们结合face++的官方文档使用了其DetectFace函数来对图片中的人脸进行情绪分析。
上周博客。
本周我们需要将其集成到web应用中。

确定输入输出

经过和队友的讨论，决定输入为图片的dataURL，即图片的base64格式,最小48*48，最大4096*4096
输出为表示情绪的7维向量，使用json格式表示。7维分别是：

• anger：愤怒
• disgust：厌恶
• fear：恐惧
• happiness：高兴
• neutral：平静
• sadness：伤心
• surprise：惊讶

编写函数

编写getEmotion函数如下

	var facepp = new FACEPP(APIKEY,APISERET,1);
	function getEmotion(base64Image){
		console.log(base64Image);
		//图片的base64数据
		//const base64Image=arrayBufferToBase64(img);
		// 以二进制的方式上传图片
        // 将base64转为二进制
        //let imageData = facepp.dataURItoBlob(base64Image);
        //根据个人需求填写的参数,这里全部写上了,包括年龄性别等,详情看官方文档
        let attributes = 'gender,age,smiling,headpose,facequality,blur,eyestatus,emotion,ethnicity,beauty,mouthstatus,eyegaze,skinstatus';
        //上传图片,获取结果
        let dataDic = {'image_base64':base64Image,'return_landmark':2,'return_attributes':attributes};
		
		//调用接口，检测人脸
        facepp.detectFace(dataDic,success);
		
		
	}
	function success(e){
		
		//console.log(JSON.stringify(e,null,"\t"))
		
		const faces = e.faces;
		const face=faces[0];
		var emotion=face.attributes.emotion
		console.log(emotion);
		

	}
    // Converts canvas to an image
    function convertCanvasToImage(canvas) {
	    var image = new Image();
	    image.src = canvas.toDataURL();
	    return image;
    }
	window.onload=function(){
		var img=new Image();
		img.src="test.png";
		//img.setAttribute('crossOrigin', 'anonymous');
		var canvas=document.getElementById('picCan');
		var canCC=canvas.getContext('2d');
		
		
		img.onload = function(){
			canCC.drawImage(img,0,0,500,400);
			
		};
		var base64Image=canvas.toDataURL("image/png");
		// 在控制台中可以查看获取的情绪json,F12启动
		getEmotion(base64Image);
		
		
	}

</script>

这样只需要传入base64图片，就能在控制台输出情绪向量。

测试

选取输入图片如下：

获得其dataURL（很长）

在控制台查看输出结果

成功输出情绪向量，情绪分析模块集成成功。