牙叔教程 简单易学
效果展示
autojs版本
8.8.2-0
代码简介
- 识别眼睛, 使用的是百度的人脸检测
- 在眼睛的位置, 画红眼特效, 使用了阴影, 模糊
- 红眼特效区域使用path.quadTo画了一个菱形曲线
get知识点
- 百度人脸检测token的获取
- 百度人脸检测
- 输入框监听
- 复选框和draw事件的交互
- 颜色正则校验
- 菱形曲线的绘制
- 阴影
- 模糊
- 画布旋转
- 画布缩放
代码讲解
1. 获取人脸信息
function 获取人脸信息(imgPath) { imgPath = files.path(imgPath); let access_token = "xxxxxxxxxxx"; let url = "https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=" + access_token; let img = images.read(imgPath); let imgBase64 = images.toBase64(img); let res_json = http .post( url, { image: imgBase64, image_type: "BASE64", face_field: "landmark", }, { headers: { "Content-Type": "application/json", }, } ) .body.json(); let faceList = res_json.result.face_list; return faceList; }
2. 提取眼睛数据
function 识别眼睛(imgPath) { let faceList = 获取人脸信息(imgPath); let landmark72 = faceList[0].landmark72; let eye = { center: landmark72[38], pointList: landmark72.slice(30, 38), }; return eye; }
3. 设置全局变量
let 特效高度 = 4; let 动画缩放倍数 = 1; let 旋转角度 = 0; let 一次旋转度数 = 1; let 旋转间隙时长 = 8; let 主色 = "#ff0000";
4. 获取图片数据
let imgPath = "./女生人脸.jpg"; let img = images.read(imgPath); let iw = img.getWidth(); let ih = img.getHeight(); let mBitmap = img.getBitmap(); ##### 5. 退出时回收图片 ```js events.on("exit", function () { log("结束运行"); mBitmap.recycle(); img.recycle(); });
6. UI布局, 画板和图片宽高一样, 方便处理
ui.layout( <vertical marginTop="50"> <text textSize="23sp" w="*" gravity="center" textStyle="bold"> 红眼特效 </text> <frame w="*" gravity="center"> <canvas id="board" w="{{iw}}px" h="{{ih}}px"></canvas> </frame> <text textSize="23sp" w="*" gravity="center" margin="9" textColor="#1e90ff"> 牙叔教程 简单易学 </text> <text id="state" textSize="23sp" w="*" gravity="center"> 正在识别眼睛, 请稍后 </text> <vertical marginLeft="80"> <horizontal> <text>主色</text> <input id="主色" w="99"></input> </horizontal> <horizontal> <checkbox id="旋转" text="旋转" gravity="center"></checkbox> <text marginLeft="10">一次旋转度数</text> <input id="一次旋转度数" w="55"></input> </horizontal> <checkbox id="缩放" text="缩放" gravity="center"></checkbox> <checkbox id="音效" text="音效" gravity="center"></checkbox> </vertical> </vertical> );
7. 设置输入框和复选框监听事件
ui.一次旋转度数.addTextChangedListener( new android.text.TextWatcher({ afterTextChanged: function (text) { let content = text.toString(); if (一次旋转度数正则校验(content)) { 一次旋转度数 = parseInt(content); } else { log("颜色正则校验 不通过"); log(content); } }, }) ); ui.音效.on("check", (checked) => { if (checked) { 打开音效(); } else { 关闭音效(); } });
8. 画红眼特效
function 画红眼特效(bw, bh, eye) { let eyeCenter = eye.center; let bcx = bw / 2; let bcy = bh / 2; let 白色菱形画笔 = get白色菱形画笔(); let 白色菱形path = get白色菱形path(eyeCenter.x, eyeCenter.y); let 红色菱形画笔 = get红色菱形画笔(); let 红色菱形path = get红色菱形path(eyeCenter.x, eyeCenter.y, bw); ui.board.on("draw", function (canvas) { canvas.drawBitmap(mBitmap, 0, 0, null); if (ui.旋转.checked) { canvas.rotate(旋转角度, eyeCenter.x, eyeCenter.y); } else { canvas.rotate(-25, eyeCenter.x, eyeCenter.y); } if (ui.缩放.checked) { canvas.scale(动画缩放倍数, 动画缩放倍数, eyeCenter.x, eyeCenter.y); } 红色菱形画笔.setColor(colors.parseColor(主色)); canvas.drawPath(红色菱形path, 红色菱形画笔); 白色菱形画笔.setColor(colors.parseColor("#ffffff")); canvas.drawPath(白色菱形path, 白色菱形画笔); }); }
完整源码
公众号回复 红眼特效
感谢大佬指点
@狸猫🐱
声明
部分内容来自网络
本教程仅用于学习, 禁止用于其他用途
