使用javascript

时间:2016-12-13 04:07:39

标签: javascript jquery html angularjs

enter image description here

我对Javascript很新,我正在研究一个使用面部识别来检测情绪的项目。面部识别部分正在检测情绪,但我需要访问所产生的情绪。面部识别API会不断提供反馈,结果会在" div"下不断变化。 id =结果标记

<div id="results" style="word-wrap:break-word;">
<span> Timestamp: 93.12 </span>
<br>
<span>Number of faces found: 1</span>
<br>
<span> Appearance: {"gender":"Male","glasses":"Yes","age":"25 - 34","ethnicity":"Black African"}</span><br><span>Emotions: {"joy":0,"sadness":0,"disgust":1,"contempt":0,"anger":0,"fear":0,"surprise":0,"valence":0,"engagement":0}
</span>
<br>
<span> Emoji: 
<img class="chromoji" title="Neutral Face" alt=":neutral_face:"     src="chrome-extension://cahedbegdkagmcjfolhdlechbkeaieki/images/apple/1f610.png"></span>
<br>
</div>

标题&#34;中立面&#34;或alt是所需占主导地位的属性之一

我尝试使用

中的解决方案

Extract property of a tag in HTML using Javascript  和 How to get title attribute from link within a class with javascript

在我的实际代码中

<div id="results" style="word-wrap:break-word;">
               <script>
                 //var images = document.querySelectorAll('img');
                 var emotion = document.getElementByTagName("img")[0].getAttributes("title");
                 console.log(emotion)
               </script>
             </div>

我尝试在生成结果的JS文件中使用此代码段中的最后两行代码

detector.addEventListener("onImageResultsSuccess", function(faces, image, timestamp) {
  $('#results').html("");
  log('#results', "Timestamp: " + timestamp.toFixed(2));
  log('#results', "Number of faces found: " + faces.length);
  if (faces.length > 0) {
    log('#results', "Appearance: " + JSON.stringify(faces[0].appearance));
    log('#results', "Emotions: " + JSON.stringify(faces[0].emotions, function(key, val) {
      return val.toFixed ? Number(val.toFixed(0)) : val;
    }));
    log('#results', "Emoji: " + faces[0].emojis.dominantEmoji);
    drawFeaturePoints(image, faces[0].featurePoints);
    var motion =  faces[0].emojis.dominantEmoji;
    log('#results', motion);
  }
});

也是在另一个时间我把它添加到需要情绪识别反馈的JS文件

var tag = document.getElementByTagName("img")
      var emotion= tag.getAttribute("title");
      console.log(emotion);

另一个单独的试验我在索引html文件

中做了这个
<script type="text/javascript">
                var image = document.getElementsByTagName("img")[0];
                var title = image.getAttribute("title");
                console.log(title); // shows the value of title for the element "image"
              </script>

该项目的主要思想是检测用户情绪并根据情绪播放音乐

3 个答案:

答案 0 :(得分:0)

在你的一条评论中,你说你试过

var emotion = document.getElementByTagName("img")[0].getAttributes("title"‌​);

尝试使用

var emotion = document.getElementsByTagName("img")[0].getAttribute("title"‌​);

函数getAttribute()最后没有s,而函数getElementsByTagName有一个s after元素。此外,在您的脚本标记中,将其声明为javascript,

<script type="text/javascript"> // your code </script>

在console.log(情感)之后不要忘记分号;

答案 1 :(得分:0)

请试试下面的代码。

<script type="text/javascript">
    var image = document.getElementsByTagName("img")[0];
    var title = image.getAttribute("title");

    console.log(title); // shows the value of title for the element "image"
</script>

在此处查看演示:http://codepen.io/anon/pen/vyVQBJ

答案 2 :(得分:0)

而不是使用getAttributes("title"‌​)使用getAttribute("title"‌​),因为JavaScript中没有像 getAttributes 这样的功能。

工作演示:

&#13;
&#13;
var emotion = document.getElementsByTagName("img")[0].getAttribute("title");
console.log(emotion);
&#13;
<img class="chromoji" title="Neutral Face" alt=":neutral_face:"     src="https://i.stack.imgur.com/cp7qK.png" width="400" height="200">
&#13;
&#13;
&#13;