[Verification code identification] Top image sliding puzzle verification code

Preface

This article describes in detail all the processes of cracking the top image sliding verification code, including the cracking ideas, implementation steps and test results. I believe you can easily crack the sliding verification code after reading it;

1. Parsing the composition of the verification code

From the above three pictures, the top image sliding puzzle verification code is composed of a small puzzle and a large background image. The shapes of the puzzle are various. There are two shadow gaps in the background image: one is the same as the puzzle. Shadow gap, there is also a shadow gap of uncertain shape and size.

2. Analyze the cracking ideas

1. First, according to the composition of this verification code, let's analyze what we need to do:

According to the normal manual operation process, we need to see the position of the shadow gap corresponding to the puzzle in the background image, and then press the lower slider to align the puzzle to the gap to complete the verification.

2. Then, according to what people want to do, analyze what the program does:

According to the analysis, the following steps are obtained:
1. Obtain two pictures (background picture, puzzle)
2. Process the pictures, get the shadow position and calculate the sliding distance
3. Simulate sliding according to the sliding distance

3. Specific steps

1. View the webpage source code and extract image information

As you can see from the above picture, the network address of the puzzle is stored in the <img>label, and the background picture is canvesdisplayed in the form of a canvas.
For the puzzle, we can get the network address in the img tag through selenium, and then get the picture information through the request.
For the background image, please refer to "How to Grab the Picture in the Canvas" to get the picture information.

2. Process pictures and calculate sliding distance

Since the picture format of the puzzle is webpnot easy to handle, we first convert the puzzle into a pngformat.
Need to import the jar package webp-imageio-core-0.1.0.jar

String sUrl = driver.findElement(By.className("dx_captcha_basic_sub-slider")).findElement(By.tagName("img")).getAttribute("src");
File f = new File("d://dximg.webp");
FileUtils.copyURLToFile(new URL(sUrl), f);

ImageReader reader = ImageIO.getImageReadersByMIMEType("image/webp").next();
WebPReadParam readParam = new WebPReadParam();
readParam.setBypassFiltering(true);
reader.setInput(new FileImageInputStream(f));
BufferedImage image = reader.read(0, readParam);
ImageIO.write(image, "png", new File("d://dximg.png"));

Next is the image processing process
1. According to the height position of the puzzle on the page, crop the background image to narrow the matching range

// 大图裁剪
BufferedImage sBI = ImageIO.read(sFile);
BufferedImage bgBI = ImageIO.read(bFile);
bgBI = bgBI.getSubimage(0, top, bgBI.getWidth(), sBI.getHeight());
ImageIO.write(bgBI, "png", bFile);

2. Turn the transparent part of the puzzle into white

setWhite(sBI);
ImageIO.write(sBI, "png", sFile);
/**
* 透明区域变白
 * 
 * @param image
 * @param param
 * @throws IOException
 */
public void setWhite(BufferedImage image) throws IOException {
    
    
	if (image == null) {
    
    
		return;
	} else {
    
    
		int rgb;
		for (int i = 0; i < image.getWidth(); i++) {
    
    
			for (int j = 0; j < image.getHeight(); j++) {
    
    
				rgb = image.getRGB(i, j);
				int A = (rgb & 0xFF000000) >>> 24;
				if (A < 100) {
    
    
					image.setRGB(i, j, new Color(255, 255, 255).getRGB());
				}
			}
		}
	}
}

3. Convert the two images to grayscale images and then perform adaptive thresholding

Mat s_mat = Imgcodecs.imread(sFile.getPath());
Mat b_mat = Imgcodecs.imread(bFile.getPath());

// 转灰度图像
Mat s_newMat = new Mat();
Mat b_newMat = new Mat();
Imgproc.cvtColor(s_mat, s_newMat, Imgproc.COLOR_BGR2GRAY);
Imgproc.cvtColor(b_mat, b_newMat, Imgproc.COLOR_BGR2GRAY);
Imgcodecs.imwrite(sFile.getPath(), s_newMat);
Imgcodecs.imwrite(bFile.getPath(), b_newMat);
// 自适应阈值化
Mat s_nMat = new Mat();
Imgproc.adaptiveThreshold(s_newMat, s_nMat, 255, Imgproc.ADAPTIVE_THRESH_MEAN_C, Imgproc.THRESH_BINARY, 7, -4);
Imgcodecs.imwrite(sFile.getPath(), s_nMat);
Mat b_nMat = new Mat();
Imgproc.adaptiveThreshold(b_newMat, b_nMat, 255, Imgproc.ADAPTIVE_THRESH_MEAN_C, Imgproc.THRESH_BINARY, 7, -4);
Imgcodecs.imwrite(bFile.getPath(), b_nMat);

b_mat = Imgcodecs.imread(bFile.getPath());
s_mat = Imgcodecs.imread(sFile.getPath());

4. Fuzzy match the two images after processing

int result_rows = b_mat.rows() - s_mat.rows() + 1;
int result_cols = b_mat.cols() - s_mat.cols() + 1;
Mat g_result = new Mat(result_rows, result_cols, CvType.CV_32FC1);
Imgproc.matchTemplate(b_mat, s_mat, g_result, Imgproc.TM_CCOEFF); // 相关系数匹配法
Core.normalize(g_result, g_result, 0, 1, Core.NORM_MINMAX, -1, new Mat());
Point matchLocation = new Point();
MinMaxLocResult mmlr = Core.minMaxLoc(g_result);
matchLocation = mmlr.maxLoc; // 此处使用maxLoc还是minLoc取决于使用的匹配算法
Imgproc.rectangle(b_mat, matchLocation, new Point(matchLocation.x + s_mat.cols(), matchLocation.y + s_mat.rows()), new Scalar(0, 255, 0, 0));
Imgcodecs.imwrite("d:/dx.png", b_mat);

5. Calculate the distance to be swiped according to the ratio of the picture to the page display

(matchLocation.x + s_mat.cols() - sBI.getWidth()) * 3 / 4 - 8)

3. Simulate sliding according to the sliding distance

Get the sliding distance and directly control the sliding of the slider.
The sliding code is as follows:

	/**
	 * 模拟人工移动
	 * 
	 * @param driver
	 * @param element页面滑块
	 * @param distance需要移动距离
	 * @throws InterruptedException
	 */
	public static void move(WebDriver driver, WebElement element, int distance) throws InterruptedException {
    
    
		int randomTime = 0;
		if (distance > 90) {
    
    
			randomTime = 250;
		} else if (distance > 80 && distance <= 90) {
    
    
			randomTime = 150;
		}
		List<Integer> track = getMoveTrack(distance - 2);
		int moveY = 1;
		try {
    
    
			Actions actions = new Actions(driver);
			actions.clickAndHold(element).perform();
			Thread.sleep(200);
			for (int i = 0; i < track.size(); i++) {
    
    
				actions.moveByOffset(track.get(i), moveY).perform();
				Thread.sleep(new Random().nextInt(300) + randomTime);
			}
			Thread.sleep(200);
			actions.release(element).perform();
		} catch (Exception e) {
    
    
			e.printStackTrace();
		}
	}

	/**
	 * 根据距离获取滑动轨迹
	 * 
	 * @param distance需要移动的距离
	 * @return
	 */
	public static List<Integer> getMoveTrack(int distance) {
    
    
		List<Integer> track = new ArrayList<>();// 移动轨迹
		Random random = new Random();
		int current = 0;// 已经移动的距离
		int mid = (int) distance * 4 / 5;// 减速阈值
		int a = 0;
		int move = 0;// 每次循环移动的距离
		while (true) {
    
    
			a = random.nextInt(10);
			if (current <= mid) {
    
    
				move += a;// 不断加速
			} else {
    
    
				move -= a;
			}
			if ((current + move) < distance) {
    
    
				track.add(move);
			} else {
    
    
				track.add(distance - current);
				break;
			}
			current += move;
		}
		return track;
	}

	

4. Results display

All the processes are finished, test the effect.

How is it not bad?

5. Result analysis

aims:

Identify the shadow location, calculate the corresponding sliding distance, and simulate sliding.

Realization ideas:

1. Get two pictures (background picture, puzzle)
2. Process the picture, get the shadow position and calculate the sliding distance
3. Simulate sliding according to the sliding distance

Time-consuming identification:

15-50 ms

Passing rate:

>95%

6. Conclusion

This article is over here, thanks to the big guys for stopping and watching, big guys for your attention and praise~

Thank you guys~

---

Author: taro-flavored cat Dian

Click here→ Kangkang How many websites have your mobile phone number registered! ! !