python+playwright learning-36. How to compare the similarity of two pictures

foreword

When doing web automation, in some scenarios, it is necessary to judge whether the picture on the page is the same as the expected picture, or to determine whether the picture has been loaded correctly, and picture comparison is required.
If you have been exposed to airtest before, then you should know that it is a professional image comparison, so we should go there and borrow some code!

borrow code

Find Lib\site-packages\airtest\aircvthe cal_confidence.py file in the directory, which is the code we want to borrow

#!/usr/bin/env python
# -*- coding: utf-8 -*-

"""These functions calculate the similarity of two images of the same size."""


import cv2
from .utils import img_mat_rgb_2_gray


def cal_ccoeff_confidence(im_source, im_search):
    """求取两张图片的可信度，使用TM_CCOEFF_NORMED方法."""
    # 扩展置信度计算区域
    im_search = cv2.copyMakeBorder(im_search, 10,10,10,10,cv2.BORDER_REPLICATE)
    
    im_source, im_search = img_mat_rgb_2_gray(im_source), img_mat_rgb_2_gray(im_search)
    res = cv2.matchTemplate(im_source, im_search, cv2.TM_CCOEFF_NORMED)
    min_val, max_val, min_loc, max_loc = cv2.minMaxLoc(res)

    return max_val


def cal_rgb_confidence(img_src_rgb, img_sch_rgb):
    """同大小彩图计算相似度."""
    # 扩展置信度计算区域
    img_sch_rgb = cv2.copyMakeBorder(img_sch_rgb, 10,10,10,10,cv2.BORDER_REPLICATE)
    # 转HSV强化颜色的影响
    img_src_rgb = cv2.cvtColor(img_src_rgb, cv2.COLOR_BGR2HSV)
    img_sch_rgb = cv2.cvtColor(img_sch_rgb, cv2.COLOR_BGR2HSV)
    src_bgr, sch_bgr = cv2.split(img_src_rgb), cv2.split(img_sch_rgb)

    # 计算BGR三通道的confidence，存入bgr_confidence:
    bgr_confidence = [0, 0, 0]
    for i in range(3):
        res_temp = cv2.matchTemplate(src_bgr[i], sch_bgr[i], cv2.TM_CCOEFF_NORMED)
        min_val, max_val, min_loc, max_loc = cv2.minMaxLoc(res_temp)
        bgr_confidence[i] = max_val

    return min(bgr_confidence)

Compare 2 pictures

When we see the following 2 pictures on the browser

The html part of the code is as follows

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3  col-md-3">
            <a href="#" class="thumbnail" id="imag1">
                <img src="liu1.png">
            </a>

        </div>
        <div class="col-xs-6 col-sm-3 col-md-3">
            <a href="#" class="thumbnail" id="imag2">
                <img src="liu2.png">
            </a>
        </div>
    </div>
</div>

First use playwright to save 2 pictures

# 上海悠悠 wx:283340479
# blog:https://www.cnblogs.com/yoyoketang/
from playwright.sync_api import sync_playwright



with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("file:///D:/demo/play_web_p/demo/demo.html")

    # 截图
    page.locator('#imag1').screenshot(path="png/demo1.png")
    page.locator('#imag2').screenshot(path="png/demo2.png")
    page.close()
    browser.close()

Save to png directory
Picture 1

picture 2

Then our local images directory can put 2 pictures
Picture 3

picture 4

Next, compare the similarity between picture 1 and picture 3, and the similarity between picture 2 and picture 4

# 上海悠悠 wx:283340479
# blog:https://www.cnblogs.com/yoyoketang/
    img1 = cv2.resize(cv2.imread('png/demo1.png'), (100, 100))
    img3 = cv2.resize(cv2.imread('images/liu3.png'), (100, 100))
    res1 = cal_ccoeff_confidence(img1, img3)
    print(res1)  # 0.32
    img2 = cv2.resize(cv2.imread('png/demo2.png'), (100, 100))
    img4 = cv2.resize(cv2.imread('images/liu4.png'), (100, 100))
    res2 = cal_ccoeff_confidence(img2, img4)
    print(res2)  # 0.75

operation result

From the comparison results, it can be seen that the more similar the two pictures are, the higher the similarity of the obtained results.

cv2.resize() uses

Use the syntax:cv2.resize(src, dsize, dst=None, fx=None, fy=None, interpolation=None)

• src source image
• dsize output image size
• Scaling in the fx width direction
• Scaling ratio in fy height direction
• interpolation This is the way to specify interpolation

Because the comparison of two pictures must first set the picture size to be consistent, use the cv2.resize() method to process the original picture for comparison.