The tutorial is easy to understand

Usage scenarios

Find the position of the transparent button in the image

Results show

The transparent button is the gear button and the double button,

The yellow rectangle is where you found it

Autojs version

8.8.20-0

The principle of

Looking at the image, it’s obvious that the brightness of the button is much higher than the surrounding area, so we can look for the brightest part of the image,

The high probability of finding it is what we are looking for;

Solve problems, seek truth from facts, different needs, different scenarios, using appropriate methods;

If the button here is not obvious, we have to look at the picture and find features that we can use,

Like color, area, shape

This tutorial uses binarization to extract the outline of the image,

If you are interested, you can try edge detection and extract the outline

Edge detection, the effect is as follows:

steps

  1. gray
  2. binarization
  3. cutout
  4. Template matching

Visualization of binarization

In order to find the appropriate binarization threshold, many tests were required, so a slider was written to adjust the threshold,

After several tests, the optimal threshold for these images was 175

Improve chart finding efficiency

Look for pictures I test, very efficient,

I specifically printed the running time of the code using console.time,

Total script duration: 2555ms

Save the file twice, and the duration is 1131ms and 1104ms respectively

That is, if the file is not saved, then the actual code execution time: 320ms

In addition, if you’re looking for a picture, without compromising the effect,

You can zoom the image, the smaller the image, the more efficient the image,

The bigger the template picture, the better, so that the number of sliding Windows will be much less,

Slide the window less times, find the picture faster

Template image selection

At the beginning, I took screenshots of all the gears, but some pictures could not be found after binarization.

And then I took the most obvious features, the relatively stable features

Original gear

Feature stable gear parts

double

The code on

1. Grayscale binarization
runtime.images.initOpenCvIfNeeded();
importClass(org.opencv.core.Mat);
importClass(org.opencv.core.CvType);

let imgPath = "./res/4.jpg";
imgPath = files.path(imgPath);
let img = images.read(imgPath);
let grayImg = images.grayscale(img);
let threshold = 175;
let thresholdImg = images.threshold(grayImg, threshold, 255);
Copy the code
2, the cutout

I use Photoshop cutout directly, and the computer’s own drawing can also be used.

Any tool you can use as long as you make sure it works

3. Template matching
let matchingResult = images.matchTemplate(thresholdImg, templateGray, {
  threshold: matchTemplateThreshold,
});
Copy the code
4. Draw a rectangle
canvas.drawRect(left, top, left + templateWidth, top + templateHeight, paint);
Copy the code

The statement

This tutorial is for study only and is prohibited for other purposes