js 前端抠图 性能优化

原文链接: js 前端抠图 性能优化

上一篇: js 生成器 协程

下一篇: wasm 和cpp std 的使用

性能对比

下图是 字符串键 + 欧式距离 + 四方

字符串键 + 欧氏距离 + 八方

数字键 + 一阶矩  + 四方

基本上速度提高了一倍

效果

通过点击, 将点击位置作为起始点, 进行泛洪填充, 下图是700*700的回字填充效果, 红色边界为验证算法是否正确

首先泛洪填充必须使用栈实现, 递归会很容易超过最大深度, 对于效果来说无非是颜色插值计算和四个方向还是八个方向的问题

颜色比对这里简单使用的向量余弦值进行比较, 生产环境建议使用HSV颜色空间

由输出可以看到, 算法的主要执行步骤 count是执行次数, time为执行时间, 多次执行, 数据基本上出入不大

性能优化

将对象缓存的字符串键改为数字键

之前在进行某个点是否已经访问过的时候使用 `x,y` 的方式转为字符串然后通过对象的键值实现

现在使用数字实现, 为了保证数处理时长, 需要对图片的长宽进行限制, 一般限制为1<<16 已经绝对足够了, 可以将数字作为两部分, 而不是拼接字符串

仅仅这一个优化, 性能已经有了不小的提高..... 快了近30% ....

用大图片测下

采用四方向

采用八方向, 可以看到四方向的试错次数比八方向的小了很多, 在效果差不多的情况下, 四方向可以显著减少试错次数

使用 一阶矩 代替欧式矩, 减少乘法和除法运算, 又有了30%的提高....

  const d = abs(r1 - r2) + abs(b1 - b2) + abs(g1 - g2);
  return 1 - d / 255 / 3 > 0.9;

直接使用数字对比, 这个效果就一般了, 主要是平方和开方费时

  const d = abs(r1 - r2) + abs(b1 - b2) + abs(g1 - g2);
  // return 1 - d / 255 / 3 > 0.9;
  return d < 255;