详解如何使用Vue实现图像识别和人脸对比

npm install baidu-aip-sdk

<template>
  <div>
    <input type="file" @change="handleFileSelected">
    <button @click="classifyImage">Classify Image</button>
    <div v-if="result">
      <p><strong>Result:</strong> {{ result }}</p>
    </div>
  </div>
</template>
<script>
import AipImageClassifyClient from 'baidu-aip-sdk/imageClassify'
export default {
  data() {
    return {
      file: null,
      result: null
    }
  },
  methods: {
    handleFileSelected(event) {
      this.file = event.target.files[0]
    },
    async classifyImage() {
      if (this.file) {
        const imageClassifyClient = new AipImageClassifyClient(
          'yourAppId',
          'yourApiKey',
          'yourSecretKey'
        )
        const fileReader = new FileReader()
        fileReader.readAsDataURL(this.file)
        fileReader.onload = async () => {
          const image = fileReader.result.split(',')[1]
          const result = await imageClassifyClient.advancedGeneral(image)
          this.result = result.result[0].root
        }
      }
    }
  }
}
</script>

npm install tencentcloud-sdk-nodejs

<template>
  <div>
    <input type="file" @change="handleFileSelected">
    <button @click="tagImage">Tag Image</button>
    <div v-if="result">
      <p><strong>Result:</strong> {{ result }}</p>
    </div>
  </div>
</template>
<script>
import tencentcloud from 'tencentcloud-sdk-nodejs'
export default {
  data() {
    return {
      file: null,
      result: null
    }
  },
  methods: {
    handleFileSelected(event) {
      this.file = event.target.files[0]
    },
    async tagImage() {
      if (this.file) {
        const ImageClient = tencentcloud.image.v20190111.Client
        const clientConfig = {
          credential: {
            secretId: 'yourSecretId',
            secretKey: 'yourSecretKey'
          },
          region: 'yourRegion',
          profile: {
            httpProfile: {
              endpoint: 'image.tencentcloudapi.com'
            }
          }
        }
        const imageClient = new ImageClient(clientConfig)
        const fileReader = new FileReader()
        fileReader.readAsDataURL(this.file)
        fileReader.onload = async () => {
          const image = fileReader.result.split(',')[1]
          const params = {
            ImageBase64: image
          }
          const result = await imageClient.TagDetect(params)
          this.result = result.Tags.map(tag => tag.TagName).join(', ')
        }
      }
    }
  }
}
</script>

<template>
  <div>
    <input type="file" @change="handleFileSelected(1)">
    <input type="file" @change="handleFileSelected(2)">
    <button @click="compareFaces">Compare Faces</button>
    <div v-if="result">
      <p><strong>Result:</strong> {{ result }}</p>
    </div>
  </div>
</template>
<script>
import AipFaceClient from 'baidu-aip-sdk/face'
export default {
  data() {
    return {
      files: [],
      result: null
    }
  },
  methods: {
    handleFileSelected(index, event) {
      this.files[index - 1] = event.target.files[0]
    },
    async compareFaces() {
      if (this.files.length === 2) {
        const faceClient = new AipFaceClient(
          'yourAppId',
          'yourApiKey',
          'yourSecretKey'
        )
        const fileReaders = []
        for (const file of this.files) {
          const fileReader = new FileReader()
          fileReader.readAsDataURL(file)
          fileReaders.push(fileReader)
        }
        Promise.all(fileReaders).then(async () => {
          const images = fileReaders.map(fileReader => fileReader.result.split(',')[1])
          const results = await Promise.all(images.map(image => faceClient.detect(image)))
          const faceTokens = results.map(result => result.result.face_list[0].face_token)
          const result = await faceClient.match(faceTokens)
          this.result = result.result.score
        })
      }
    }
  }
}
</script>