前言

找图找色是制作脚本的基础，现在的手机分辨率五花八门，再加上水滴屏、全面屏等的存在，找图适配相当麻烦。这里给出一套解决分辨率适配的方案。

步骤

适配流程.png

获取正确的设备分辨率

auto.pro可以获取到设备分辨率，并且可以指定分辨率进行截图。但是它获取到的分辨率在游戏横屏时并不会改变。
举个例子，720x1280分辨率的设备，在玩游戏的时候横屏，此时获取到的分辨率依然是720x1280，并不是1280x720，因此在截图之前我们需要做处理。
方法也很简单：大值为宽，小值为高。

var width = Math.max(device.width, device.height)
var height = Math.min(device.width, device.height)
log('device:', width, height)

截图

根据上一步得到的分辨率值进行截图

threads.start(function () {
    if(!requestScreenCapture(width, height)){
        toast("请求截图失败");
        exit();
    }
}

获取分辨率缩放值

假设我们基于1280x720分辨率整理出一套待查图片，在1920x1080下它的匹配度是会降低的，很可能找图失败，因此应该先计算缩放值

var scaleWidth = width / 1280
var scaleHeight = height / 720
var scale = Math.min(scaleWidth, scaleHeight)

为何这里需要取缩放值的最小值？因为市面上存在宽屏手机，虽然1920x1080是标准比例，但是可能出现2560x1080这类宽高缩放比不一致的屏幕，这种情况下界面元素的缩放是按照1920x1080进行的，也就是按scaleHeight这个最小值进行缩放

匹配时进行缩放处理

我们整理的图片资源是1280x720的，因此在1920x1080设备上，要把截图缩小；如果是小的分辨率设备，就要把图片资源进行缩小。
这里存在两个细节:

• 把1920x1080的截图缩小成1280x720后，匹配得到的坐标是相对于后者的，按此坐标进行点击会发生错位，所以还要把匹配结果放大到1920x1080分辨率上
• option如果设置了region的话，region的值也需要进行缩放处理

封装一个找图函数

// img1是系统截图，img2是待查图片
function hasImg(img1, img2, option={}) {
  if (!img1 || !img2) {
    return null
  }
  
  // 如果分辨率大于基准值，对设备截图进行缩小
  if (scale > 1) {
    img1 = images.scale(img1, 1/scale, 1/scale)
  } else if (scale < 1) {
    // 如果分辨率小于基准值，对图片资源进行缩小
    img2 = images.scale(img2, scale, scale)
  }

  // 获取查找参数
  var queryOption = { ...option }
  if (queryOption.region) {
     var region = queryOption.region
    // 进行越界处理
    if (region[0] < 0) {
      region[0] = 0
    }
    if (region[1] < 0) {
      region[1] = 0
    }
    if (region.length == 4) {
      var w = region[0] + region[2]
      var h = region[1] + region[3]
      if (w > width) {
        region[2] = width - region[0]
      }
      if (h > height) {
        region[3] = height - region[1]
      }
    }
     // 对region值进行缩放
    region = region.map(e => {
      // 对region值进行缩放处理
      if (scale > 1) {
        return e / scale
      } else {
        return e
      }
    })
    queryOption.region = region
  }

  // 开始匹配
  var res = images.matchTemplate(img1, img2, queryOption).matches
  // 如果scale大于1的话，我们对img1进行了缩小，所以需要回收该图片资源
  if (scale > 1) {
    img1.recycle()
  }
  img2.recycle()

  // 如果匹配成功，需要对值进行处理。
  // 返回的结果形式为[{x, y}, {x, y}, ... ]，我希望坐标为数组形式，且排序成从上到下，从左到右
  if (res.length > 0) {
    return res.map(p => {
      // 如果缩放比大于1，需要将结果坐标放大到设备分辨率
      if (scale > 1) {
        return [parseInt(p.point['x'] * scale), parseInt(p.point['y'] * scale)]     
      } else {
        return [parseInt(p.point['x']), parseInt(p.point['y'])]
      }
    }).sort((a, b) => {
            let absY = Math.abs(a[1] - b[1])
            let absX = Math.abs(a[0] - b[0])
            if (absY > 4 && a[1] > b[1]) {
                return true
            }
            else if (absY < 4) {
                return absX > 4 && a[0] > b[0]
            } else {
                return false
            }
    })
  } else {
    // 如果未匹配到，返回false
    return false
  }
}

结语

使用hasImg的时候需要对region进行分辨率适配，例如

hasImg(cap, template, {
  region: [0, 0, 1280 * scale, 720 * scale]
})

这样在1920x1080的设备上，region就是[0, 0, 1920, 1080]，然后hasImg内先进行本设备的越界处理，再对region进行适配缩放，就达成了一致的分辨率。
在宽屏的情况下，要识别的元素位置一般是不固定的，所以建议不使用region定值，而是将屏幕划分为多个分区，在分区范围内找图。例如[0, 0, 25% * width, 50% * height]
细节比较多，有疑问和建议可以在评论区留言