以下是一个使用HTML调用百度云人脸对比API的HTML代码示例。在这个示例中,我们使用了表单和JavaScript代码,允许用户上传两张照片并比较它们的相似度。为了使用这个示例,需要替换<your-api-key>
和<your-secret-key>
为个人的百度云API Key和Secret Key。
<!DOCTYPE html>
<html>
<head>
<title>Face Comparison</title>
</head>
<body>
<form>
<label for="image1">Image 1:</label>
<input type="file" id="image1" accept="image/*"><br>
<label for="image2">Image 2:</label>
<input type="file" id="image2" accept="image/*"><br>
<button id="compare-button">Compare</button>
</form>
<script>
const apiKey = '<your-api-key>';
const secretKey = '<your-secret-key>';
async function compareImages(img1, img2) {
// 将图片转换为base64编码
const img1Base64 = await toBase64(img1);
const img2Base64 = await toBase64(img2);
// 调用百度云人脸对比API
const response = await fetch('https://aip.baidubce.com/rest/2.0/face/v3/match', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
image_1: img1Base64,
image_2: img2Base64
}),
// 添加API Key和Secret Key到请求头中
headers: {
'Authorization': 'Basic ' + btoa(apiKey + ':' + secretKey)
}
});
// 将响应数据解析为JSON格式
const result = await response.json();
// 返回相似度
return result.result.score;
}
// 将图片转换为base64编码
function toBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result.split(',')[1]);
reader.onerror = error => reject(error);
});
}
// 添加点击事件监听器,当按钮被点击时触发人脸对比操作
const compareButton = document.getElementById('compare-button');
compareButton.addEventListener('click', async () => {
const img1 = document.getElementById('image1').files[0];
const img2 = document.getElementById('image2').files[0];
const similarity = await compareImages(img1, img2);
alert('Similarity: ' + similarity);
});
</script>
</body>
</html>
在上面的代码中,我们首先定义了两个常量,apiKey
和secretKey
,分别用于存储百度云API Key和Secret Key。然后,我们定义了一个compareImages
函数,用于将两个图片上传到百度云人脸对比API并返回它们的相似度。在函数中,我们使用fetch
函数发起了一个POST请求,将两个图片的base64编码作为请求体发送,并添加了API Key和Secret Key到请求头中。
接下来,我们定义了一个toBase64
函数,用于将图片转换为base64编码。在这个函数中,我们使用FileReader
对象读取文件内容,并在读取完成后将其转换为base64编码。
最后,我们添加了一个点击事件监听器,当用户点击“Compare”按钮时,会触发人脸对比操作。在事件处理程序中,我们首先获取用户上传的两个图片,然后调用compareImages
函数获取它们的相似度,并使用alert
函数显示结果。