autojs红眼特效

牙叔教程 简单易学

效果展示

效果.png

autojs版本

8.8.2-0

代码简介

1. 识别眼睛, 使用的是百度的人脸检测
2. 在眼睛的位置, 画红眼特效, 使用了阴影, 模糊
3. 红眼特效区域使用path.quadTo画了一个菱形曲线

get知识点

1. 百度人脸检测token的获取
2. 百度人脸检测
3. 输入框监听
4. 复选框和draw事件的交互
5. 颜色正则校验
6. 菱形曲线的绘制
7. 阴影
8. 模糊
9. 画布旋转
10. 画布缩放

代码讲解

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. 退出时回收图片

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, 白色菱形画笔);
  });
}

感谢大佬指点

@狸猫🐱

声明

部分内容来自网络
本教程仅用于学习, 禁止用于其他用途

给我个面子小图.jpg