权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：

https://blog.csdn.net/LOVEmy134611/article/details/118540051

前言

(又到了常见的无中生友环节了)我有一个朋友，最近沉迷二次元，想要与喜欢的二次元角色度过一生，就像11区与初音未来结婚的阿宅那样。于是作为为朋友两肋插刀的正义的化身，决定为其充满魔幻现实的人生再添加一抹亮色，让他深陷其中无法自拔，于是在二次元的宇宙里，帮他用Python获取了二次元女友(们)。

私信小编01即可获取大量Python学习资源

尽管二次元知识人类幻想出来的唯美世界，但其本质上还是我们心中模糊的对梦想生活的憧憬和对美好未来的期望，这卡哇伊的颜，爱了爱了，我给你讲。

程序说明

通过爬取知名二次元网站——触站，获取高清动漫图片，并将获取的webp格式的图片转化为更为常见的png格式图片。

二次元女友获取程序

使用requests库请求网页内容，使用BeautifulSoup4解析网页，最后使用PIL库将webp格式的图片转化为更为常见的png格式图片。

观察网页结构

首先选择想要获取的图片类型，这里已女孩子为例，当然大家也可以选择生活或者脚掌，甚至是男孩子。

进入女孩子标签页面，观察页面链接，爬取多个页面，查看第2页链接为：

https://www.huashi6.com/tags/161?p=2

第3页链接为：

https://www.huashi6.com/tags/161?p=3

可以看出，不同页面网址仅改变了页面数字，因此可以构造如下模式，并使用循环，爬取所有页面：

url_pattern = "https://www.huashi6.com/tags/161?p={}"
for i in range(1, 20):
    url = url_pattern.format(i)

接下来，在爬取网页前，使用浏览器“开发者工具”，观察网页结构。首先尝试定位图片元素：

于是自然想到使用find_all语法获取所有class=‘v-lazy-img v-lazy-image-loaded’的标签：

img_url = soup.find_all('img', attr={'class': 'v-lazy-img v-lazy-image-loaded'})

但是发现并未成功获取，于是经过进一步探索发现，其图片信息是在script元素中动态加载的：

需要注意的是，在请求页面时，可以在构造请求头时，添加'Cookie'键值，但是没有此键值也能够运行。

headers = {
    'User-Agent':'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:86.0) Gecko/20100101 Firefox/86.0',
    # 根据自己的情况修改Cookie值
    #'Cookie':''
}
url_pattern = "https://www.huashi6.com/tags/161"
response = requests.get(url=url, headers=headers)

页面解析

使用beautifulsoup解析页面，获取JS中所需数据：

results = soup.find_all('script')[1]

为了能够使用re解析获取内容，需要将内容转换为字符串：

image_dirty = str(results)

接下来构造正则表达式获取图片地址：

pattern = re.compile(item, re.I|re.M)

然后查找所有的图片地址：

result_list = pattern.findall(image_dirty)

为了方便获取所需字段，构造解析函数

def analysis(item,results):
    pattern = re.compile(item, re.I|re.M)
    result_list = pattern.findall(results)
    return result_list

打印获取的图片地址：

urls  = analysis(r'"path":"(.*?)"', image_dirty)
urls[0:1]

发现一堆奇怪的字符：

'images\u002Fresource\u002F2021\u002F06\u002F20\u002F906h89635p0.jpg',

这是由于网页编码的原因造成的，由于一开始使用utf-8方式解码网页，并不能解码Unicode：

response.encoding = 'utf-8'
response.raise_for_status()
soup = BeautifulSoup(response.text, 'html.parser')

因此虽然可以通过以下方式获取原始地址：

url = 'images\u002Fresource\u002F2021\u002F05\u002F22\u002F90h013034p0.jpg'
decodeunichars = url.encode('utf-8').decode('unicode-escape')

但是我们可以通过response.encoding = 'unicode-escape'进行更简单的解码，缺点是网页的许多中文字符会变成乱码，但是字不重要不是么？看图！

创建图片保存路径

为了下载图片，首先创建图片保存路径：

# 创建图片保存路径
if not os.path.exists(webp_file):
    os.makedirs(webp_file, exist_ok=True)
if not os.path.exists(png_file):
    os.makedirs(png_file, exist_ok=True)

图片下载

当我们使用另存为选项时，发现格式为webp，但是上述获取的图片地址为jpg或png，如果直接存储为jpg或png格式，会导致格式错误。

因此需要重新构建webp格式的文件名：

name = img.split('/')[-1]
name = name.split('.')[0]
name_webp = name + '.webp'

由于获取的图片地址并不完整，需要添加网站主页来构建图片地址：

from urllib.request import urljoin
domain = 'https://img2.huashi6.com'
img_url = urljoin(domain,img)

接下来就是下载图片了：

r = requests.get(img_url,headers=headers)
if r.status_code == 200:
  with open(name_webp, 'wb') as f:
    f.write(r.content)

格式转换

最后，由于得到的图片是webp格式的，如果希望得到更加常见的png格式，需要使用PIL库进行转换：

image_wepb = Image.open(name_webp)
image_wepb.save(name_png)

爬取结果展示

完整程序

import time
import requests
from bs4 import BeautifulSoup
import os
import re
from urllib.request import urljoin
from PIL import Image


webp_file = 'girlfriends_webp'
png_file = 'girlfriends_png'


print(os.getcwd())


# 创建图片保存路径
if not os.path.exists(webp_file):
    os.makedirs(webp_file, exist_ok=True)
if not os.path.exists(png_file):
    os.makedirs(png_file, exist_ok=True)


headers = {
    'User-Agent':'Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:86.0) Gecko/20100101 Firefox/86.0',
    #'Cookie':''
    'Connection': 'keep-alive'
}
url_pattern = "https://www.huashi6.com/tags/161?p={}"


domain = 'https://img2.huashi6.com'


# 图片地址获取函数
def analysis(item,results):
    pattern = re.compile(item, re.I|re.M)
    result_list = pattern.findall(results)
    return result_list
    
# 图片格式转换函数
def change_webp2png(name_webp, name_png, img_url):
    try:
        image_wepb = Image.open(name_webp)
        image_wepb.save(name_png)
    except:
        download_image(name_webp, name_png, img_url)


# 图片下载函数
def download_image(name_webp, name_png, img_url):
    if not os.path.exists(name_png):
        if os.path.exists(name_webp):
            os.remove(name_webp)
        print(img_url)
        r = requests.get(img_url,headers=headers)
        # print(r.content)
        time.sleep(5)
        if r.status_code == 200:
            with open(name_webp, 'wb') as f:
                f.write(r.content)
        change_webp2png(name_webp, name_png, img_url)


for i in range(1, 20):
    time.sleep(5)
    url = url_pattern.format(i)
    response = requests.get(url=url, headers=headers)
    # 解码
    # response.encoding = 'utf-8'
    response.encoding = 'unicode-escape'
    response.raise_for_status()
    soup = BeautifulSoup(response.text, 'html.parser')


    results = soup.find_all('script')


    image_dirty = str(results[1])


    urls  = analysis(r'"path":"(.*?)"', image_dirty)[:20]


    for img in urls:
        img_url = urljoin(domain,img)


        # 获取文件名
        name = img.split('/')[-1]
        name = name.split('.')[0]
        name_webp = name + '.webp'
        name_webp = os.path.join(webp_file, name_webp)
        name_png = name + '.png'
        name_png = os.path.join(png_file, name_png)
        download_image(name_webp, name_png, img_url)

球点赞

function getMeta(varA, varB) {
 if (typeof varB !== 'undefined') {
 alert(varA + ' width ' + varB + ' height');
 } else {
 var img = new Image();
 img.src = varA;
 img.onload = function() {
 getMeta(this.width, this.height);
 }
 }}getMeta("http://snook.ca/files/mootools_83_snookca.png");

明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。

一、为什么要学 SVG ?

SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失真。

与其他图像比较，SVG 的优势有以下几点：

1. SVG 可以被多个工具读取和修改。
2. SVG 与其他格式图片相比，尺寸更小，可压缩性强。
3. SVG 可任意伸缩。
4. SVG 图像可以随意地高质量打印。
5. SVG 图像可以添加文本和事件，还可搜索，适合做地图。
6. SVG 是纯粹的 XML，不是 HTML5。
7. SVG是W3C标准

二、SVG 形状元素

2.1、svg 标签

SVG 的代码都放到 svg 标签呢，SVG 中的标签都是闭合标签，与html中标签用法一致。svg的属性有：

• 有width和height，指定了svg的大小。

eg：画一条直线，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 设置的宽高没有带单位，此时默认是像素值，如果需要添加单位时，除了绝对单位，也可以设置相对单位。

• viewBox 属性

使用语法：<svg viewBox=" x1,y1,width,height "></svg>

四个参数分别是左上角的横纵坐标、视口的宽高。表示只看SVG的某一部分，由上述四个参数决定。

使用 viewBox 之后，相当于svg整体大小不变，只能看到 viewBox 设置部分，视觉上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代码可以直接嵌入到 html 页面中，也可以通过 html 的embed、object、iframe嵌入到html中。嵌入的时候嵌入的是 SVG 文件，SVG 文件必须使用 .svg 后缀。分别介绍各种方法如何使用？

2.2.1、embed 嵌入：

使用语法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路径，type 表示 embed 引入文件类型。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用语法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路径，type 表示 object 引入文件类型。

优点：所有浏览器都支持，支持 html、html4 和 html5。

缺点：不允许使用脚本。

2.2.3、iframe 嵌入：

使用语法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路径，width、height、frameborder 设置的大小和边框。

优点：所有浏览器都支持，并允许使用脚本。

缺点：不推荐 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 标签直接插入 html 内容内，与其他标签用法一致。

2.2.5、连接到svg文件：

使用 a 标签，直接链接到 SVG 文件。

使用语法：<a href="line.svg">查看SVG</a>

三、SVG形状元素

3.1、线 - line

使用语法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line标签创建线条，(x1,y1)是起点，(x2,y2)是终点，stroke绘制黑线，stroke-width是线宽。

3.2、矩形 - rect

//使用语法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小设置
 x="50" y="50"  //可选 左上角位置，svg的左上角默认(0,0)
 rx="20" ry="50" //可选 设置圆角
 stroke-width="3" stroke="red" fill="pink" //绘制样式控制
></rect>
</svg>

上述参数 width、height是必填参数，x、y是可选参数，如不设置的时候，默认为(0,0)，也就是svg的左上角开始绘制。rx、ry是可选参数，不设置是矩形没有圆角。fill定义填充颜色。

3.3、圆形 - circle

// 使用语法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定义圆心 ，可选
  r="40" // 圆的半径
  stroke="black" stroke-width="2" fill="red"/> //绘制黑框填充红色
</svg>

上述(cx,xy)定义圆心的位置，是可选参数，如果不设置默认圆心是（0,0）。r是必需参数，设置圆的半径。

3.4、椭圆 - ellipse

椭圆与圆相似，不同之处在于椭圆有不同的x和y半径，而圆两个半径是相同的。

// 使用语法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //设置椭圆的x、y方向的半径
  fill="purple" // 椭圆填充色
  cx="150" cy="150" //设置椭圆的圆心 ，可选参数
 ></ellipse>
</svg>

上述椭圆的两个rx、ry两个方向半径是必须参数，如果rx=ry就表示是圆形，（cx,cy）是椭圆的圆心，是可选参数，如果不设置，则默认圆心为（0,0）。

3.5、折线 - polyline

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 绘制出一个默认填充黑色的三角形 -->
 <polyline 
  points=" //点的集合
   0 ,0, // 第一个点坐标
   100,100, // 第二个点坐标
   100,200 // 第三个点坐标
    " 
  stroke="green" 
 ></polyline>
<!-- 绘制一个台阶式的一条折线 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代码执行结果如图所示：

需要注意的是 points 中包含了多个点的坐标，但不是一个数组。

3.6、多边形 - polygon

polygon 标签用来创建不少于3个边的图形，多边形是闭合的，即所有线条连接起来。

// 使用语法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多边形的第一点
   100,100,  //多边形的第二点
    0,100  //多边形的第三点
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon绘制的时候与折线有些类似，但是polygon会自动闭合，折线不会。

3.7、路径 - path

path 是SVG基本形状中最强大的一个，不仅能创建其他基本形状，还能创建更多其他形状，如贝塞尔曲线、2次曲线等。

点个关注，下篇更精彩！