Preface

Crap
Slider verification code cracking is a project that has always wanted to do, after all, most websites will use slider verification code, so recently in the spare time to modify the paper to solve this matter. To make the slider verification code, image processing is the first choice, of course, OpenCV-Python! Of course, my OpenCV is very delicious (P.S. can't guarantee code quality quickly in two days). If you find the problem, point it out directly. Don't go through the process!

Environmental Science
First you need a python, then install the python Library of opencv, as follows:
pip install opencv-python
Then test whether it is available, as follows:

import cv2 as cv
import numpy as np

if __name__ == '__main__':
    img = np.ones((200, 200, 3), np.uint8) * 255
    cv.rectangle(img, (50, 50), (150, 150), (0, 0, 255), 2)
    cv.imshow('test', img)
    cv.waitKey(0)
    cv.destroyAllWindows()

Normally, it will be shown as follows:

Use of OpenCV
I also use the relevant API while checking, it is quite strange to use! Specific common methods we have to Baidu, I will not be ugly!

Principle and method of realization

Tencent slider verification
The goal of this project is Tencent slider verification code. There are many websites that call Tencent slider interface, such as ProcessOn, a very useful online drawing website, where the slider verification part is similar to this:

Grab a bag and find that there are only slider diagrams and notched diagrams, as follows:

The key point to crack the slider verification code is to find the location of the slider gap. After finding the location of the gap, we can use Selenium simulation to drag the slider to the designated location to achieve cracking. The old method before was to compare the pixels of the complete image with those of the notched image to get the location of the gap. But now, we generally do not expose the complete image to us, so we only use Selenium simulation to drag the slider to the designated location. Processing is done on a map with gaps. There are two schemes for gap location recognition. One is based on template matching, the other is based on contour detection. The realization methods of the two schemes are described in detail below.

Template matching to identify gaps
The implementation process is as follows:
1. Processing pictures of sliders

• Grayscale slider image
• Processing the outer circle of the slider in the slider diagram
• Using inRange binary slider graph
• White Noise Removal Using Open Operations

The operation results are as follows (the original slider on the left and the treated slider on the right):

2. Processing pictures with gaps

• First, a Gauss filter for denoising
• Grayscale band gap map
• Use threshold binarization to transform the graph

The results are as follows (the original image on the left and the processed image on the right):

3. Template matching
Call the template matching API and circle the matching area as follows:

Warning Warning Warning
The gap recognition rate of this method is about 50%. A large part of the reason is that the background of the slider image is pure white, which will cause great interference in matching. If the background of the slider image is transparent, the correct matching rate can reach more than 90%.

If you have any way to make the background of the slider map transparent, you can leave a message in the comment area, I really appreciate it!!! The following is the implementation code at this stage:

# encoding:utf-8
import cv2 as cv
import numpy as np


# Binary processing of slider
def handle_img1(image):
    kernel = np.ones((8, 8), np.uint8)  # Foreground Noise Kernel for Slider Removal
    gray = cv.cvtColor(image, cv.COLOR_BGR2GRAY)
    width, heigth = gray.shape
    for h in range(heigth):
        for w in range(width):
            if gray[w, h] == 0:
                gray[w, h] = 96
    # cv.imshow('gray', gray)
    binary = cv.inRange(gray, 96, 96)
    res = cv.morphologyEx(binary, cv.MORPH_OPEN, kernel)  # Open Operations to Remove White Noise Points
    # cv.imshow('res', res)
    return res


# Template matching (errors in finding gaps)
def template_match(img_target, img_template):
    tpl = handle_img1(img_template)  # The source of the error is that the background image of the slider is white.
    blurred = cv.GaussianBlur(img_target, (3, 3), 0)  # Gauss filtering of target image
    gray = cv.cvtColor(blurred, cv.COLOR_BGR2GRAY)
    ret, target = cv.threshold(gray, 127, 255, cv.THRESH_BINARY)  # Object Graph Binarization
    # cv.imshow("template", tpl)
    # cv.imshow("target", target)
    method = cv.TM_CCOEFF_NORMED
    width, height = tpl.shape[:2]
    result = cv.matchTemplate(target, tpl, method)
    min_val, max_val, min_loc, max_loc = cv.minMaxLoc(result)
    left_up = max_loc
    right_down = (left_up[0] + height, left_up[1] + width)
    cv.rectangle(img_target, left_up, right_down, (0, 0, 255), 2)
    cv.imshow('res', img_target)


if __name__ == '__main__':
    img0 = cv.imread('./demo/3/hycdn_3.jpg')
    img1 = cv.imread('./demo/3/hycdn_3_2.png')
    template_match(img0, img1)
    cv.waitKey(0)
    cv.destroyAllWindows()

Contour Detection and Recognition Gap
The idea based on contour detection gap is much simpler, and the reasonable condition recognition rate is more than 95%. The realization process is as follows:

• Gauss Fuzzy Denoising with Notched Graph
• Canny Edge Detection Using (200,400) Threshold
• Looking for outline
• Constraints on existing contours, such as the area range of contours, the perimeter range of contours

Multiple matching results are as follows:

The implementation code is as follows:

# encoding:utf-8
import cv2 as cv


def get_pos(image):
    blurred = cv.GaussianBlur(image, (5, 5), 0)
    canny = cv.Canny(blurred, 200, 400)
    contours, hierarchy = cv.findContours(canny, cv.RETR_EXTERNAL, cv.CHAIN_APPROX_SIMPLE)
    for i, contour in enumerate(contours):
        M = cv.moments(contour)
        if M['m00'] == 0:
            cx = cy = 0
        else:
            cx, cy = M['m10'] / M['m00'], M['m01'] / M['m00']
        if 6000 < cv.contourArea(contour) < 8000 and 370 < cv.arcLength(contour, True) < 390:
            if cx < 400:
                continue
            x, y, w, h = cv.boundingRect(contour)  # External rectangle
            cv.rectangle(image, (x, y), (x + w, y + h), (0, 0, 255), 2)
            cv.imshow('image', image)
            return x
    return 0


if __name__ == '__main__':
    img0 = cv.imread('./demo/4/hycdn_4.jpg')
    get_pos(img0)
    cv.waitKey(0)
    cv.destroyAllWindows()

remaining problems

Question 1
How to change the pure white background of slider diagram into transparent background?

Question 2
Selenium and trajectory algorithm are used to drag the slider out of the left range. The trajectory algorithm accelerates first and then decelerates. The whole slider moves forward. It is theoretically impossible to go back. However, the phenomenon of slider dragging backward and dragging out of the range appears in the simulation of dragging. How to solve this problem?

Have a small partner who knows how to solve the above problems, look forward to your message or comments!!!

END