关键词：
文章目录
脚本功能
- 通过获取video当前播放帧图片，截图调用后台接口，再调用百度人脸识别
- 拿到人脸信息（年龄、颜值、性别等）
- 判断点赞、收藏或者下一条
获取video当前播放帧图片
- 创建canvas
- 获取当前屏幕的ratio值（如果不获取，截取的图片会比较模糊）
- 通过使用 drawImage() 方法将视频画面画在 canvasCtx 上
drawImage() 参数介绍
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
image：必选，要截取的 image 或者 video 元素
sx：可选，被截取图片的裁剪开始位置的 x 坐标
sy：可选，被截取图片的裁剪开始位置的 y 坐标
sw：可选，被截取图片的裁剪宽度
sh：可选，被截取图片的裁剪高度
dx：必选，裁剪图片放在画布上位置的 x 坐标
dy：必选，裁剪图片放在画布上位置的 y 坐标
dw：可选，裁剪图片放在画布上的宽度（放大或缩小）
dh：可选，裁剪图片放在画布上的高度（放大或缩小）
- 使用 toDataURL() 将 canvas 转为图片（base64）
- 将base64转为blob格式
var canvas = document.createElement('canvas');
var canvasCtx = canvas.getContext('2d');
var ratio = getPixelRatio(canvasCtx);
video = document.querySelector("div[data-e2e='feed-active-video'] video");
canvas.width = video.offsetWidth * ratio;
canvas.height = video.offsetHeight * ratio;
canvasCtx.fillStyle = '#222125';
canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
var imgWidth = Math.min(canvas.width, (video.videoWidth * canvas.height) / video.videoHeight);
var imgHeight = Math.min(canvas.height, (video.videoHeight * canvas.width) / video.videoWidth);
canvasCtx.drawImage(
video,
0,
0,
video.videoWidth,
video.videoHeight,
(canvas.width - imgWidth) / 2,
(canvas.height - imgHeight) / 2,
imgWidth,
imgHeight
);
var MIME_TYPE = 'image/png'; // 保存文件类型
var imgURL = canvas.toDataURL(MIME_TYPE);
const blob = convertBase64ToBlob(imgURL);
// 获取radio
function getPixelRatio(context)
var backingStore =
context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio ||
1;
return (window.devicePixelRatio || 1) / backingStore - 0.5;
// 将 base64 转换为二进制格式
function convertBase64ToBlob(base64)
const byteString = atob(base64.split(',')[1]);
const mimeType = base64.split(';')[0].split(':')[1];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++)
ia[i] = byteString.charCodeAt(i);
return new Blob([ab], type: mimeType);
将图片传到后台
直接使用fetch、jQuery的$ajax会存在跨域，通过后端设置cors也不能解决，搜索后发现tampermonkey提供GM_xmlhttpRequest来跨域请求
- 封装GM_xmlhttpRequest
//参数1：url;参数2：请求类型get或post;参数3：post的body;
function runAsync(url, send_type, data_ry)
var p = new Promise((resolve, reject) =>
GM_xmlhttpRequest(
method: send_type,
url: url,
headers:
'Content-Type': 'application/octet-stream'
,
data: data_ry,
onload: function (response)
resolve(JSON.parse(response.responseText));
,
onerror: function (err)
reject(err);
);
);
return p;
- 调用接口
runAsync('http://xxxx:api', 'POST', blob)
.then(result =>
return result;
)
.then(function (result)
console.log('🚀 >result',result);
//拿到res 处理逻辑
);
- 后端接受blob，并转为base64格式
package service
import (
"encoding/base64"
"encoding/json"
"fmt"
"io/ioutil"
"net/http"
"strings"
"github.com/gin-gonic/gin"
)
type RequestBody struct
Img string `json:"img"`
// FaceRecognition
// @summary 人脸识别
// @Description 人脸识别
// @param img formData string false "用户名"
// @Tags face
// @Success 200 string json"code":200,"message":"data"
// @Router /face/recognition [post]
func FaceRecognition(c *gin.Context)
// 解析请求体
imageData, err := ioutil.ReadAll(c.Request.Body)
if err != nil
c.AbortWithStatusJSON(http.StatusBadRequest, gin.H
"message": "Invalid image data",
)
return
// 解码 base64 格式图片数据(二进制转base64)
base64Image := base64.StdEncoding.EncodeToString(imageData)
// 本地测试可以使用GetFileContentAsBase64 方法
// base64Image := GetFileContentAsBase64("/Users/meijuntao/Pictures/csdn封面/vscode.jpeg")
reader := map[string]interface
"image": base64Image,
"image_type": "BASE64",
"face_field": "beauty,age,expression,gender",
// 人脸识别...
/**
* 获取文件base64编码
* @param string path 文件路径
* @return string base64编码信息，不带文件头
*/
func GetFileContentAsBase64(path string) string
srcByte, err := ioutil.ReadFile(path)
if err != nil
fmt.Println(err)
return ""
return base64.StdEncoding.EncodeToString(srcByte)
调用百度人脸识别接口
- 到百度开放平台注册账号，实名认证
- 到引用列表创建一个应用，选择你要的服务
- 穿件好之后就可以拿到API_KEY、SECRET_KEY
- 调用接口可以通过API_KEY、SECRET_KEY，调用GetAccessToken方法先获取到ACCESS_TOLEN，也可以获取到后直接保存下来，不用每次都调用
package service
import (
"encoding/base64"
"encoding/json"
"fmt"
"io/ioutil"
"net/http"
"strings"
"github.com/gin-gonic/gin"
)
type RequestBody struct
Img string `json:"img"`
const API_KEY = "you API_KEY"
const SECRET_KEY = "you SECRET_KEY"
const ACCESS_TOLEN = "you ACCESS_TOLEN"
// FaceRecognition
// @summary 人脸识别
// @Description 人脸识别
// @param img formData string false "用户名"
// @Tags face
// @Success 200 string json"code":200,"message":"data"
// @Router /face/recognition [post]
func FaceRecognition(c *gin.Context)
url := "https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=" + ACCESS_TOLEN
// 解析请求体
imageData, err := ioutil.ReadAll(c.Request.Body)
if err != nil
c.AbortWithStatusJSON(http.StatusBadRequest, gin.H
"message": "Invalid image data",
)
return
// 解码 base64 格式图片数据(二进制转base64)
base64Image := base64.StdEncoding.EncodeToString(imageData)
// imgs := GetFileContentAsBase64("/Users/meijuntao/Pictures/csdn封面/vscode.jpeg")
reader := map[string]interface
"image": base64Image,
"image_type": "BASE64",
"face_field": "beauty,age,expression,gender",
// 将 map 转换为 JSON 格式
jsonStr, err := json.Marshal(reader)
if err != nil
fmt.Println("Failed to marshal:", err)
return
payload := strings.NewReader(string(jsonStr))
client := &http.Client
req, err := http.NewRequest("POST", url, payload)
if err != nil
fmt.Println(err)
return
req.Header.Add("Content-Type", "application/json")
res, err := client.Do(req)
if err != nil
fmt.Println(err)
return
defer res.Body.Close()
body, err := ioutil.ReadAll(res.Body)
if err != nil
fmt.Println(err)
return
var result map[string]interface
err = json.Unmarshal(body, &result)
if err != nil
return
c.JSON(200, gin.H
"msg": "success",
"data": result["result"],
)
/**
* 获取文件base64编码
* @param string path 文件路径
* @return string base64编码信息，不带文件头
*/
func GetFileContentAsBase64(path string) string
srcByte, err := ioutil.ReadFile(path)
if err != nil
fmt.Println(err)
return ""
return base64.StdEncoding.EncodeToString(srcByte)
/**
* 使用 AK，SK 生成鉴权签名（Access Token）
* @return string 鉴权签名信息（Access Token）
*/
func GetAccessToken() string
url := "https://aip.baidubce.com/oauth/2.0/token"
postData := fmt.Sprintf("grant_type=client_credentials&client_id=%s&client_secret=%s", API_KEY, SECRET_KEY)
resp, err := http.Post(url, "application/x-www-form-urlencoded", strings.NewReader(postData))
if err != nil
fmt.Println(err)
return ""
defer resp.Body.Close()
body, err := ioutil.ReadAll(resp.Body)
if err != nil
fmt.Println(err)
return ""
accessTokenObj := map[string]string
json.Unmarshal([]byte(body), &accessTokenObj)
return accessTokenObj["access_token"]
拿到识别结果处理逻辑
runAsync('http://xxxx:api', 'POST', blob)
.then(result =>
return result;
)
.then(function (result)
console.log('🚀 >result',result);
//拿到res 处理逻辑
if (result.data)
const resFace = result.data['face_list'][0];
const expression =
none: '无表情',
smile: '微笑',
laugh: '大笑'
;
const conNode = `<div class="m_item m_item_title">检测到 <span class="text_gradient face_num">$
result.data.face_num
</span> 张人脸</div>
<div class="m_item">
<span>性别:</span>
<span class="text_gradient m_female">$resFace.gender.type</span>
</div>
<div class="m_item">
<span>年龄:</span>
<span class="text_gradient m_age">$resFace.age</span>
</div>
<div class="m_item">
<span>颜值:</span>
<span class="text_gradient">$resFace.beauty</span>
</div>
<div class="m_item">
<span>表情:</span>
<span class="text_gradient m_expression">$expression[resFace.expression.type]</span>
</div>`;
document.querySelector('.m_wrap').style.height = '230px';
// var conDom = document.createElement('div');
// conDom.innerHTML = conNode;
// document.querySelector('.m_content').appendChild(conDom);
document.querySelector('.m_item_wrap').innerHTML = conNode;
document.querySelector('.m_discern').innerHTML = '检测完成';
if (parseInt(resFace.beauty) >= 50)
isBeauty = true;
// 关注
var follow = document.querySelector(
"div[data-e2e='feed-active-video'] div[data-e2e='feed-follow-icon'] div div"
);
resFace.gender.type === 'female' && follow?.click();
var like = document.querySelector(
"div[data-e2e='feed-active-video'] div[data-e2e-state='video-player-no-digged'] div"
);
like?.click();
else if (checkNum <= 3)
checkNum++;
console.log('🚀 > 第', checkNum, '次检测');
timeoutInit(2000);
else if (checkNum > 3)
// 多次检测没有就跳过
console.log('🚀 > 多次检测颜值未达标，跳过', checkNum);
document.querySelector('.xgplayer-playswitch-next').click();
else
if (checkNum <= 3)
checkNum++;
timeoutInit(2000);
else
// 多次检测没有就跳过
console.log('🚀 > 多次检测没有就跳过', checkNum);
document.querySelector('.xgplayer-playswitch-next').click();
);
效果展示
问题记录
- tampermonkey新增脚本不生效
- 请求接口跨域：使用GM_xmlhttpRequest
- 在本地测试video截图保存一直存在跨域，设置了video 标签中属性 crossorigin=“anonymous”，也没用，研究了好久，突然发现，我的脚本就是在目标域名下触发，压根不存在跨域，浪费了半天时间。。。
- canvas.drawImage获取到的图片不清晰，这是浏览器的像素比devicePixelRatio有关，可以先获取到ratio，调用drawImage是宽高乘ratio，当然ratio太高也会影响性能，导致图片太大，可根据项目适当调整
- 截图后生成的base64没法直接通过application/json或者application/x-www-form-urlencoded传，后端接受不到参数，猜测是太大超过限制了，改为将base64先转为blob格式，在通过application/octet-stream二进制流的形式，后端接收到后再将blob转为base64
基于百度ai开放平台的人脸识别及语音合成(代码片段)
基于百度AI的人脸识别及语音合成课题课题需求（1）人脸识别在Web界面上传人的照片，后台使用Java技术接收图片，然后对图片进行解码，调用云平台接口识别人脸特征，接收平台返回的人员年龄、性别、颜值等信息，将信息返... 查看详情
魔点g2一台小巧高颜值的智能人脸考勤门禁机
...点G2集“智慧考勤，访客系统，门禁权限”与一体的新型人脸识别考勤门禁机，相对比之前方形小巧的D2来说，魔点G2在造型上有了很大的变化，椭圆形的外观，整体看起来更小巧，更美观。魔点G2的识别方式采用领先的人脸识别... 查看详情
qt功能优化：qt人脸识别(代码片段)
Qt功能优化：Qt人脸识别@TOC一、效果图如图1所示，为我用Qt所做的一个简易的人脸识别代码，点击识别即可自动识别出照片中的人脸。二、使用步骤项目架构：1..pro部分#-------------------------------------------------##ProjectcreatedbyQtCreator20... 查看详情
python丨调用百度的人脸识别api给你的颜值打个分
需要用到的工具百度的人脸识别apiFlaskPILrequests主要思路利用的百度的人脸识别库，然后自己做了一个简单的图片上传和图片处理以及信息提取加工。官网给的方法相对比较繁琐，我使用request改写了一下如下(注意把url里面的Key换... 查看详情
opencv-python实战（17）——人脸识别详解(代码片段)
OpenCV-Python实战（17）——人脸识别详解0.前言1.人脸识别简介2.使用OpenCV进行人脸识别2.1使用OpenCV进行人脸识别流程示例3.使用dlib进行人脸识别4.使用face_recognition进行人脸识别小结系列链接0.前言人脸处理是人工智能中的一... 查看详情
利用opencv实现自动抓拍，人脸识别，清晰度的验证等(代码片段)
...的小demo的下载地址6、扩展，验证抓拍的图片中是否包含人脸=============================== 查看详情
基于百度飞浆平台(easydl)设计的人脸识别考勤系统(代码片段)
...象。常见的生物识别技术有很多，比如虹膜、指纹、人脸等。其中，人脸识别技术正逐渐走向成熟。这一发展使 查看详情
pythonopencv开发mr智能人脸识别打卡系统（三工具模块设计）(代码片段)
...论区留言私信~~~整体系统讲解如下 PythonOpenCV开发MR智能人脸识别打卡系统(一、需求分析与系统设计)PythonOpenCV开发MR智能人脸识别打卡系统（二、文件系统、数据实体模块设计）PythonOpenCV开发MR智能人脸识别打卡系统（... 查看详情
pythonopencv开发mr智能人脸识别打卡系统（四服务模块设计）(代码片段)
...评论区留言私信~~~整体系统讲解如下PythonOpenCV开发MR智能人脸识别打卡系统(一、需求分析与系统设计)PythonOpenCV开发MR智能人脸识别打卡系统（二、文件系统、数据实体模块设计）PythonOpenCV开发MR智能人脸识别打卡系统... 查看详情
opencv4.5.4dnn人脸识别模块使用介绍--如何快速搭建一个人脸识别系统(代码片段)
...磅干货，第一时间送达导读本文主要介绍OpenCV4.5.4中人脸识别模块的使用和简易人脸识别系统的搭建，供大家参考。背景介绍前几天刚刚更新的OpenCV4.5.4版本将基于DNN的人脸检测和人脸识别添加到modules/objdetect中，具体... 查看详情
人脸识别经典网络-mtcnn（含python源码实现）(代码片段)
人脸检测-mtcnn本文参加新星计划人工智能赛道：https://bbs.csdn.net/topics/613989052文章目录人脸检测-mtcnn1.人脸检测1.1人脸检测概述1.2人脸检测的难点1.3人脸检测的应用场景2.mtcnn2.1mtcnn概述2.2mtcnn的网络结构2.3图像金字塔2.4P-Net2.5R-N... 查看详情
androidapp实战项目之使用opencv人脸识别实现找人功能（附源码和演示超详细）(代码片段)
需要全部代码请点赞关注收藏后评论区留言私信~~~人脸识别自古有之，每当官府要捉拿某人时，便在城墙贴出通缉告示并附上那人的肖像。只是该办法依赖人们的回忆与主观判断，指认结果多有出入，算不上什么... 查看详情
☀️机器学习实战☀️基于yolo网络的人脸识别|（文末送机器学习书籍~）(代码片段)
🎉粉丝福利送书：《机器学习入门：基于数学原理的Python实战》🎉点赞👍收藏⭐留言📝即可参与抽奖送书🎉本周五(9月10日)晚上20：00将会在【点赞区和评论区】抽一位粉丝送这本书~🙉🎉... 查看详情
基于java实现的人脸识别功能（附源码）(代码片段)
...X了）。看了他的需求描述，大概是要做一个Javaweb版本的人脸识别功能，然后存储人物的特征，再扫脸比对。可是我不会啊。。。不过，作为一个宠粉的暖男，别说有困难就是没困难制造困难也要上，既 查看详情
androidapp人脸识别中借助摄像头和opencv实时检测人脸讲解及实战（附源码和演示超详细）(代码片段)
...赞关注收藏后评论区留言私信~~~一、借助摄像头实时检测人脸与Android自带的人脸检测器相比，OpenCV具备更强劲的人脸识别功能，它可以通过摄像头实时检测人脸，实时检测的预览空间是JavaCameraView常用方法说明如下set... 查看详情
利用opencv带你玩转人脸识别-中篇（人脸检测，检测多个，视频检测快速入门）(代码片段)
...#xff01;👉关注✨点赞👍收藏📂文章目录前言1.人脸检测级联分类器路径人脸检测函数多个人脸检测摄像头人脸检测（VideoCapture）结语前言在上一篇文章中我们主要了解到用opencv如何对图像进行读取，以及对... 查看详情
pythonopencv开发mr智能人脸识别打卡系统（五程序入口设计与测试）(代码片段)
...评论区留言私信~~~整体系统讲解如下PythonOpenCV开发MR智能人脸识别打卡系统(一、需求分析与系统设计)PythonOpenCV开发MR智能人脸识别打卡系统（二、文件系统、数据实体模块设计）PythonOpenCV开发MR智能人脸识别打卡系统... 查看详情
opencv中lbph人脸识别器识别人脸实战（附python源码）(代码片段)
...于捕获局部纹理特征开发者需要通过以下三种方法来完成人脸识别操作1：通过cv2.face.LBPHFaceRecognizer_create()方法创建LBPH人脸识别器对象语法如下recognizer=cv2.face.LBPHFaceRecognizer_create(radius,neighbors,grid_x,grid_y,threshold)radius:可选参... 查看详情