建站百科
当前位置:首页 > 资讯 > 建站百科
SVG映射反爬示例练习-直接提取SVG文字图片的文本
发布日期:2023-01-04 阅读次数:9 字体大小:

前面我已经介绍过解析CSS图片偏移反爬和字体反爬的数据,链接如下:

  • Python提取CSS图片背景偏移定位的数据

    https://blog.csdn.net/as604049322/article/details/118401598

  • 2万字硬核剖析网页自定义字体解析

    https://blog.csdn.net/as604049322/article/details/119333427

  • woff字体图元结构剖析,自定义字体的制作与匹配和识别

    https://blog.csdn.net/as604049322/article/details/119415686

最后一篇主要针对几年后,各大厂对字体反爬升级到轮廓图顺序随机,甚至基础字形随机的情况。近几年内还不需要理解的那么深,看不懂直接收藏即可,因为目前还没有任何一个网站的字体反爬搞的我想象的那么复杂~

SVG映射反爬示例

今天呢,我将分享一个相对非常简单的小例子,SVG文字图片偏移反爬数据提取

这种反爬机制相对前两种来说,反爬强度也弱了很多,所以现在已经很少有网站还在继续采用这种反爬机制。

这里找到了一个SVG映射反爬的练习网站可以玩一下,网址是:http:///tos-cn-i-tjoges91tu/SwT79OZ4VQfwFl~noop.image?_iz=58558&from=article.pc_detail&x-expires=1673399026&x-signature=xGUDULeXkLjgKf6nruMC9XxFcGA%3D" img_width="853" img_height="525" image_type="1" mime_type="image/png" web_uri="tos-cn-i-tjoges91tu/SwT79OZ4VQfwFl" style="display: block;margin-right: auto;margin-left: auto;height: auto !important;" data-ratio="0.6154747948417351" class="rich_pages wxw-img" data-w="853" data-type="png">

可以清楚的看到使用了CSS图片背景偏移来定位显示相应的数据,不过这张图片是svg格式的文字图片,

查看svg的内容如下:

说明这种svg实际存储仍然是纯文本的。

那么我们完全可以解析svg,根据background的偏移值定位匹配在svg实际的文本直接提取。

为了提取css数据简单一些,这里我直接使用selenium操作,首先打开目标网址:

from selenium import webdriver
browser = webdriver.Chrome
url = 'http:///tos-cn-i-tjoges91tu/SwT79R55NefVDl~noop.image?_iz=58558&from=article.pc_detail&x-expires=1673399026&x-signature=IqtID%2F3JTAHv6pw9IK%2BB2Oy5u4c%3D" img_width="604" img_height="326" image_type="1" mime_type="image/png" web_uri="tos-cn-i-tjoges91tu/SwT79R55NefVDl" data-type="png" style="display: block;margin-right: auto;margin-left: auto;height: auto !important;" data-ratio="0.5397350993377483" class="rich_pages wxw-img" data-w="604">

红色部分就是整块图片画布,-8px表示向左偏移8像素,-15px表示向上偏移15像素,这样左上角这部分就会被裁剪掉,然后只获取指定长度和宽度范围的图片,就得到图中蓝框的部分显示在界面上。

那么如何匹配获取到我们需要的数据呢?

这时就可以通过2分查找获取插入点,例如对于右上角1那个数字,可以通过下面的方式获取:

from bisect import bisect

data[bisect(ys, 15)][bisect(xs, 8)]
'1'

刷新页面后,重新批量测试一下:

import re

d_tags = browser.find_elements_by_css_selector('.more d[class^="vhk"]')
for d_tag in d_tags:
position = d_tag.value_of_css_property("background-position")
x, y = map(int, re.findall("\d+", position))
print(x, y, data[bisect(ys, y)][bisect(xs, x)])

从结果看每个节点都精准的匹配上对应的文本数字:

此时考虑将以上svg节点都替换成对应的文本后,就可以直接整体提取文本数据(调用JavaScript脚本进行节点替换):

import re

def parseAndReplaceSvgNode(d_tags):
for d_tag in d_tags:
position = d_tag.value_of_css_property("background-position")
x, y = map(int, re.findall("\d+", position))
num = data[bisect(ys, y)][bisect(xs, x)]
# 替换节点为普通文本
browser.execute_script(f"""
var element = arguments[0];
element.parentNode.replaceChild(document.createTextNode("{num}"), element);
""", d_tag)


d_tags = browser.find_elements_by_css_selector('.more d[class^="vhk"]')
parseAndReplaceSvgNode(d_tags)
phone = browser.find_element_by_css_selector('.more').text
phone
'电话:400-51771'

执行后,对应的svg节点都转换成对应的文本节点:

这样我们就可以很方便的解析所有需要的数据了。

基于此,相关基础知识我已经解析完全,下面公布完整处理代码:

import re
from requests_html import HTMLSession
from selenium import webdriver
from bisect import bisect


def parseAndReplaceSvgNode(d_tags):
for d_tag in d_tags:
position = d_tag.value_of_css_property("background-position")
x, y = map(int, re.findall("\d+", position))
num = data[bisect(ys, y)][bisect(xs, x)]
# 替换节点为普通文本
browser.execute_script(f"""
var element = arguments[0];
element.parentNode.replaceChild(document.createTextNode("{num}"), element);
""", d_tag)


browser = webdriver.Chrome
url = 'http://ment_score .item")
taste = comment_score_tags[0].text
environment = comment_score_tags[1].text
service = comment_score_tags[2].text
# 地址
address = browser.find_element_by_css_selector('.address .address_detail').text
# 特色
characteristic = browser.find_element_by_css_selector(
'.characteristic .info-name').text
# 电话
phone = browser.find_element_by_class_name("more").text

print(title, comment, avgPrice, taste, environment,
service, address, characteristic, phone)
柳州螺蛳粉 100条评论 人均:12 口味:8.7 环境:7.4 服务:7.6 中山大道浦西路28号商铺 特色:脆爽酸笋,热辣红油,香葱萝卜,吃完还想吃 电话:400-51771

可以看到这样就完美准确的提取出了每一个文本。

版权声明:本文为CSDN博主「小小明-代码实体」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/as604049322/article/details/1201475