SpringBoot+Vue添加腾讯云人脸识别的项目实践

<dependency>
  <groupId>com.github.qcloudsms</groupId>
  <artifactId>sms-sdk-java</artifactId>
  <version>5.0.5</version>
</dependency>

import com.tencentcloudapi.common.Credential;
import com.tencentcloudapi.common.profile.ClientProfile;
import com.tencentcloudapi.common.profile.HttpProfile;
import com.tencentcloudapi.faceid.v20180301.FaceidClient;
import com.tencentcloudapi.faceid.v20180301.models.LivenessCompareRequest;
import com.tencentcloudapi.faceid.v20180301.models.LivenessCompareResponse;
public class TencentCloudUtil {
  public static LivenessCompareResponse compareFace(String image1, String image2) throws Exception {
    Credential cred = new Credential("Your-SecretID", "Your-SecretKey");
    HttpProfile httpProfile = new HttpProfile();
    httpProfile.setEndpoint("faceid.tencentcloudapi.com");
    ClientProfile clientProfile = new ClientProfile();
    clientProfile.setHttpProfile(httpProfile);
    FaceidClient client = new FaceidClient(cred, "", clientProfile);
    LivenessCompareRequest req = new LivenessCompareRequest();
    req.setImageBase64(image1);
    req.setVideoBase64(image2);
    return client.LivenessCompare(req);
  }
}

import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class FaceRecognitionController {
  @PostMapping("/face/compare")
  public LivenessCompareResponse compareFace(@RequestBody Map<String, String> request) throws Exception {
    String image1 = request.get("image1");
    String image2 = request.get("image2");
    return TencentCloudUtil.compareFace(image1, image2);
  }
}

npm install axios

import axios from 'axios';
const BASE_URL = 'http://localhost:8080'; // 后端API地址
export function compareFace(image1, image2) {
  return axios.post(`${BASE_URL}/face/compare`, { image1, image2 });
}

<template>
  <div>
    <input type="file" @change="onFileChange('image1', $event)" />
    <input type="file" @change="onFileChange('image2', $event)" />
    <button @click="compareFaces">比较人脸</button>
  </div>
</template>
<script>
import { compareFace } from './ApiService';
export default {
  data() {
    return {
      image1: null,
      image2: null,
    };
  },
  methods: {
    onFileChange(field, e) {
      this[field] = e.target.files[0];
    },
    compareFaces() {
      const formData = new FormData();
      formData.append('image1', this.image1);
      formData.append('image2', this.image2);
      compareFace(formData)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>