autojs红眼特效

最新推荐文章于 2022-12-21 22:31:50 发布

牙叔教程

最新推荐文章于 2022-12-21 22:31:50 发布

阅读量1.6k

点赞数 1

分类专栏： autojs 文章标签： autojs 红眼 canvas 模糊阴影

本文链接：https://blog.csdn.net/snailuncle2/article/details/117393245

版权

autojs 专栏收录该内容

193 篇文章 75 订阅

订阅专栏

牙叔教程简单易学

效果展示

在这里插入图片描述

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

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