在进行文章撰写时,寻找适当的配图是一项重要的任务。然而,尽管我尝试在各大网站上寻找合适的图片资源,但往往面临两个主要问题:其一,这些网站大多需要付费使用,这无疑增加了我的经济负担;其二,即使有些网站提供免费图片,但其质量却令人堪忧。
为了解决这个令人头疼的问题,我自己动手一个搜索图片的网站,解决了日常文章配图的问题。整体的界面如下:
图片的加载采用瀑布流的模式。
这个网站是站在巨人的肩膀上完成的,为什么这么说呢?图片的来源是调用头条号的图片库,前端是使用Github开源的瀑布流插件。
打开头条号发布文章,点击添加图片,会出现如下图
通过分析这个接口,发现它并没有做认证,携带几个路径参数。
在无痕浏览器重放这个接口,这能正常获取数据,如下图:
现在图片的数据源找到了,可以把它做成接口,给前端用户调用了。这里我选择熟悉的FastAPI做接口。
从上述分析接口发现,路径参数只有三个参数是动态变化的。所以,我们把它做成变量的形式:
from pydantic import BaseModel
class TuotiaoParams(BaseModel):
page: int=0#图片页数
size: int = 30#展示图片的数量
term: str=None#搜索的关键字
然后,把请求头条号API接口封装成一个函数,方便后续调用:
import requests
from fake_useragent import UserAgent
from schemas import TuotiaoParams
from loguru import logger
def search_pic(params:TuotiaoParams):
try:
url = "https://dficimage.toutiao.com/api/proxy/get"
params = {
"from": params.page,
"size": params.size,
"term": params.term,
"search_id": 7274062948258316581,
"user_id": 68783357974,
"media_id": 1609422238702596,
"search_from": "search",
"position": "article_icstock",
"platform": "toutiaohao",
"path": "/micro/search"
}
res = requests.get(
url,
params=params,
headers={"User-Agent":UserAgent().random},
timeout=10
)
if res.json().get("code") == 1:
logger.info("获取头条的图片的数据:{}".format(res.json()))
return res.json().get("data").get("data").get("hits")
except Exception as e:
logger.error('抓取头条的图片错误:{}'.format(e))
利用FastAPI把头条号API做成接口模式:
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from toutiao import search_pic
from schemas import SearchKeyWork,TuotiaoParams
import uvicorn
App = FastAPI()
# 添加跨域中间件
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # 允许所有来源访问
allow_methods=["*"], # 允许所有HTTP方法
allow_headers=["*"], # 允许所有HTTP头
)
@app.post("/image_toutAIo")
def iamge_toutiao(params:TuotiaoParams):
return {"code":1,"data":search_pic(params)}
if __name__ == "__main__":
uvicorn.run(app)
执行如下代码启动程序,就可以正常访问接口:
Python/ target=_blank class=infotextkey>Python main.py
这样后台的接口,就完成了。
前端采用的github上开源的瀑布流图片展示模板,然后,自己添加搜索功能的。
https://github.com/heikaimu/vue3-waterfall-plugin
下载vue3-waterfall-plugin项目到本地,执行如下代码安装依赖:
pnpm install
安装完依赖,执行如下代码,启动前端:
pnpm run dev
启动成功之后,输入想要的图片进行搜索,如图: