侧边栏壁纸
博主头像
孔子说JAVA博主等级

成功只是一只沦落在鸡窝里的鹰,成功永远属于自信且有毅力的人!

  • 累计撰写 377 篇文章
  • 累计创建 136 个标签
  • 累计收到 12 条评论

目 录CONTENT

文章目录

免费的随机图库 Lorem Picsum,通过改变网址规则获取指定格式的图片

孔子说JAVA
2022-12-23 / 0 评论 / 0 点赞 / 74 阅读 / 2,821 字 / 正在检测是否收录...

大家在做网站或 App 开发、写文章、做 PPT,是不是有时候会遇到一些要配图的时候。有了好看的图,格调瞬间就起来了。相反,如果配图过于随意,这格调就感觉差不少档次。随机图库 Lorem Picsum(网站)获取图片的功能十分强大,你可以在 img 标签的 src 中引入指定规则的网址,或者背景图片中应用,通过简单的url拼接或者参数,你可以获得随机图片、指定大小图片、获得指定模糊度图片(亦或是纯灰色图片)、获取到指定图片(固定的图片)等。

image-1670982902106

1、基本用法

1.1 获取指定大小的随机图片

  1. 使用下述网址可以获取一张宽度为200,高度为300的随机图片,可以尝试多次访问该网址,可以看到每次返回的图片都不一样。
https://picsum.photos/200/300

image-1670980196536

访问该网址后地址栏中返回的地址变了,如下:

https://i.picsum.photos/id/927/200/300.jpg?hmac=QPcp-v-pSMdg7Ly4-wWB7E0es9E0WWk9ll_YTYNeb_w

如果访问该网址返回的图片是固定的。

image-1670980630155

  1. 获取一张宽度为200,高度为200的随机正方形图片
https://picsum.photos/200

等同于

https://picsum.photos/200/200

image-1670980689882

在写测试代码时,我们可以通过改变尺寸来模仿达到缩略图与原图的效果。

1.2 通过id获取指定图片

在访问网址中,我们可以通过制定id来获取指定的图片,该方式为非随机的,每次访问获取到的图片都是一致的。通过下面的步骤来选取我们需要的图片。

  1. 打开网站所有图片列表:https://picsum.photos/images,打开网站后向下滚动,每页都会展示一些图片,有翻页
  2. 选择自己喜欢的图片(图片右下角的 #数字,就是图片的 id),记住图片id,我们就可以通过 https://picsum.photos/id/106/宽度/高度,网址中的106就是图片id。

例如这张图片的 id 是 106,我们可以通过下面的网址来取到这张图片(宽度为600,高度为400)

https://picsum.photos/id/106/600/400

image-1670981056775

1.3 根据种子获得相同的随机图像

每次根据种子获得相同的随机图像,方法是在URL开头添加/seed/{seed},只要种子的值一样,图片就是一样的。如下面网址中的abc就是种子值,300表示图片的宽度和高度都是300。

https://picsum.photos/seed/abc/300

该url获取到的图片如下:

image-1670981325874

可以改变图片的宽和高,url如下:

https://picsum.photos/seed/abc/300/200

改变种子值:

https://picsum.photos/seed/1/500/400

image-1670981453484

1.4 灰度图片(灰色滤镜处理后的图片)

如果想要使获取的图片灰色处理,只需要在链接末尾添加?grayscale即可

https://picsum.photos/id/199/300/200?grayscale

image-1670981703802

未灰化的图片如下:

https://picsum.photos/id/199/300/200

image-1670981691261

1.5 模糊图片(类似虚化的效果)

通过在链接末尾附加 ?blur 获得模糊图像,url示例为获取一个随机图片并虚化:

https://picsum.photos/200/200/?blur

image-1670981817617

可以通过提供介于1和10之间的数字来调整模糊量。

https://picsum.photos/200/200/?blur=2

image-1670981852901

2、高级用法

可以结合使用基本用法中的任何选项,来达到你想要的更复杂的效果。

2.1 获得有灰度和模糊效果的特定图片

https://picsum.photos/id/684/520/350?grayscale&blur=3

image-1670982016802

2.2 请求多张相同大小的随机图片

如果要在浏览器中请求多张相同大小的随机图片,请添加random查询参数(random需要给不同的值),这样的目的是防止图像被缓存:

<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">

image-1670982089891

image-1670982094159

2.3 获取不同格式的图片(jpg、webp)

如果您需要不同格式的文件后缀,则可以添加 .jpg 或 .webp 到url的结尾。

https://picsum.photos/600/300.jpg

image-1670982196325

https://picsum.photos/600/300.webp

image-1670982217226

2.4 分页获取网站中图片信息

分页获取网站中图片信息,包括宽高、地址,json格式等信息。通过使用 /v2/list 获取图像详细信息数组,

  • 默认情况下,该API每页将返回30个图片的信息。
  • 要请求另一个页面,请使用?page参数。
  • 要更改每页的项目数量,请使用?limit参数。

分页获取网站数据:

访问下述网址会返回第一页的数据。

https://picsum.photos/v2/list

image-1670982409236

图片的json格式如下:

[
    {
        "id": "0",
        "author": "Alejandro Escamilla",
        "width": 5000,
        "height": 3333,
        "url": "https://unsplash.com/...",
        "download_url": "https://picsum.photos/..."
    },
    ......
]

获取网站每页100条数据,第二页的信息(第101-200条数据),url如下:

https://picsum.photos/v2/list?page=2&limit=100

image-1670982519178

2.5 获取指定图片信息

使用/id/{id}/info端点获取有关特定图像的信息。url如下:

https://picsum.photos/id/0/info

image-1670982596059

返回的json格式如下:

{
	"id": "0",
	"author": "Alejandro Escamilla",
	"width": 5000,
	"height": 3333,
	"url": "https://unsplash.com/photos/yC-Yzbqy7PY",
	"download_url": "https://picsum.photos/id/0/5000/3333"
}
0

评论区