如何使用 Clarifai 检测本地图像的人脸

Posted 2023-03-07

【中文标题】如何使用 Clarifai 检测本地图像的人脸

【英文标题】：How to detect Faces for Local Image using Clarifai

【发布时间】：2020-09-11 18:17:46

【问题描述】：

我正在尝试从使用 Clarifai API 从本地文件夹中获取的图像中检测人脸。 但我无法这样做并得到一个对象作为响应。 然后网络选项卡显示为待处理并给出空对象 我也在 index.html 中使用过 sdk 脚本

<script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>

前端

import React,  Component  from 'react';

class App extends Component 
      constructor()
        super();
        this.state = 
              input:'',
              imageUrl: '',
              box:
        
      

      calculateFaceLocation = (data) =>
        const clarifaiFace= data.outputs[0].data.regions[0].region_info.bounding_box;
        const image = document.getElementById('preview');
        const width = Number(image.width);
        const height = Number(image.height);
        return 
          leftCol: clarifaiFace.left_col * width,
          topRow: clarifaiFace.top_row * height,
          rightCol: width - (clarifaiFace.right_col * width),
         bottomRow: height - (clarifaiFace.bottom_row * height)
        
      

      displayFaceBox = (box) =>
        this.setState( box :box);
      


       previewFiles = ()=> 

        var preview = document.querySelector('#preview');
        var files   = document.querySelector('input[type=file]').files;

        function readAndPreview(file) 

          // Make sure `file.name` matches our extensions criteria
          if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) 
            var reader = new FileReader();

            reader.addEventListener("load", function () 
              var image = new Image();
              image.height = 300;
              image.title = file.name;
              image.src = this.result;
              preview.appendChild( image );

            , false);

            reader.readAsDataURL(file);
          

        

        if (files) 
          [].forEach.call(files, readAndPreview);
        
        this.setState(input: this.result )
      


      onButtonSubmit = () =>
        this.setState(
          imageUrl: this.state.input
        );
        fetch('http://localhost:3000/imageurl',
          method:'post',
          headers:'Content-Type':'application/json',
          body:JSON.stringify(
              input : this.state.input
          )
        )
        .then(response => response.json())
        .then(response =>  this.displayFaceBox(this.calculateFaceLocation(this.response)))

      



  render()
    const   imageUrl, box  = this.state;
    return (
      <div className="App">

        <input id="browse" type="file" onChange=this.previewFiles />
        <div id="preview" box=box imageUrl =  imageUrl style=top: box.topRow , right: box.rightCol , 
                             bottom: box.bottomRow , left: box.leftCol></div>
        <button onClick=  this.onButtonSubmit  > DETECT</button>



      </div>
    );


  




export default App;

后端：

const Clarifai = require ('clarifai')

const app = new Clarifai.App(
    apiKey: 'Changed API KEY' 
   );

   const handleApiCall = (req,res)=>
    app.models.predict(Clarifai.FACE_DETECT_MODEL, req.body.input)
    .then(data =>
        res.json(data);
    )
    .catch(err =>response.status(400).json("UNABLE TO HANDLE API "))
 

 module.exports = 
    handleApiCall

【参考方案1】：

而不是使用PreviewFile函数， OnInputChange ，使用e.target.files从输入标签中获取文件，使用const formData = new FormData()从表单数据中获取图像。

就这样

 onInputChange = (event) => 
    if (event.target.files) 

      const files = Array.from(event.target.files);
      const formData = new FormData();
      files.forEach((file, i) => 
        formData.append(i, file)
      )
      fetch(`$url/image-upload`, 
        method: 'POST',
        body: formData
      )
        .then(res => res.json())
        .then(images => 
          this.setState( input: images[0].url);
        )
     else 
      this.setState( input: event.target.value);
    

Refer This Github Project这会给你更清晰的想法。