前端干货之随机图库 Lorem Picsum（只需要按规则写个网址就行，不需要集成任何插件环境）

Posted 2020-12-18 Suwanbin

目录

• 前言
• 基本用法
  • 获取指定大小的随机图片
    • 获取指定宽高的图片
    • 获得指定尺寸的正方形图片
  • 通过id获取指定图片（非随机）
  • 静态随机图片（随便写个值就能获取到图片，值一样，图片就是一样的）
  • 灰度图片（灰色滤镜处理后的图片）
  • 模糊图片（类似虚化的效果）
    • 通过附加?blur到url的末尾获得模糊图像
    • 可以通过提供介于1和10之间的数字来调整模糊量。
• 高级用法
  • 请求多张相同大小的随机图片
  • 获取不同格式的图片（jpg、webp）
  • 分页获取网站中图片信息（宽高、地址，json格式）
    • 获取指定图片信息

文章声明：

• 本文基于此文章改编：前端干货之随机图库 Lorem Picsum
  • 基本就是官网文档的翻译，不过一般不会留神去看
  • 可以关注官网，说不定后续还会出些什么骚操作呢（2020-7-25写的此文章）
• 主角 Lorem Picsum 官网：https://picsum.photos/
• 原文（官网）直接就写到了我想要写的样子，我就稍微整理了下

前言

这个网站获取图片的功能十分强大，你可以在 img 标签的 src 中引入下面规则的网址，或者背景图片中应用

• 亦或是其他你想要用到的情境下
• 最主要的是网站的图片质量非常符合我的审美，预期 o(￣▽￣)ｄ
  • 反正比我网上找觉得还行的图片省力得多
  • 况且对于每一张图片都可以指定宽高、模糊度、灰度

透过本文，你可以通过简单的url拼接或者参数

• 获得随机图片
• 获得指定大小图片
• 获得指定模糊度图片（亦或是纯灰色图片）
• 获取到指定图片（固定的图片）

基本用法

获取指定大小的随机图片

获取指定宽高的图片

• 获取一张宽度为200，高度为300的随机图片

https://image.cha138.com/20210604/fd0d264510214dedb0d33fad495f21a2.jpg

获得指定尺寸的正方形图片

• 获取一张宽度为200，高度为200的随机正方形图片

https://image.cha138.com/20210604/b9c58ff629414022834cb9d3ce023f7b.jpg
// 等同于 https://image.cha138.com/20210604/b9c58ff629414022834cb9d3ce023f7b.jpg/200

通过id获取指定图片（非随机）

• 网站所有图片列表：https://picsum.photos/images
  • 打开网站后向下滚动，每页展示一些图片，有翻页
  • 你可以在所有图片列表中看看都有哪些图片，然后选择自己喜欢的图片（图片右下角的 #数字，就是图片的 id）

例如下面这张图片的 id 是 106，我们就可以通过 https://picsum.photos/id/237/宽度/高度 来取到这张图片

https://image.cha138.com/20210604/9d8500040d1d4f39813dc59da9c44f81.jpg

静态随机图片（随便写个值就能获取到图片，值一样，图片就是一样的）

每次根据种子获得相同的随机图像，方法是在URL开头添加/seed/ {seed}

• 说实话，没太看懂，但是改变 /seed/随便写/ 它的图片就会不一样，这个值一样它的图片就会一样
• 没有去探索，但有点担忧这种图片的有效期（更加推荐随便写个id）
• 我的歪脑筋：在写测试代码时，通过改变尺寸来模仿达到缩略图与原图的效果（如果是后端返回缩略图、原图列表）

https://image.cha138.com/20210604/0f3a4672419c4c1f97132a55b8eb79b8.jpg

灰度图片（灰色滤镜处理后的图片）

只需要在链接末尾添加?grayscale即可

https://image.cha138.com/20210604/fd0d264510214dedb0d33fad495f21a2.jpg?grayscale

模糊图片（类似虚化的效果）

通过附加?blur到url的末尾获得模糊图像

https://image.cha138.com/20210604/b9c58ff629414022834cb9d3ce023f7b.jpg/200/?blur

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

https://image.cha138.com/20210604/b9c58ff629414022834cb9d3ce023f7b.jpg?blur=2

高级用法

您可以结合使用以上任何选项。

例如，要获得有灰度和模糊效果的特定图片

https://image.cha138.com/20210604/9700503ef98142ce8e4f1f690f10237e.jpg

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

要在浏览器中请求多张相同大小的随机图片，请添加random查询参数（给不同的值）以防止图像被缓存：

<img src="https://image.cha138.com/20210604/fd0d264510214dedb0d33fad495f21a2.jpg?random=1">
<img src="https://image.cha138.com/20210604/fd0d264510214dedb0d33fad495f21a2.jpg?random=2">

获取不同格式的图片（jpg、webp）

如果您需要文件结尾，则可以添加.jpg到url的结尾。

https://image.cha138.com/20210604/fd0d264510214dedb0d33fad495f21a2.jpg.jpg

要获取WebP格式的图像，可以将其添加.webp到URL的末尾。

https://image.cha138.com/20210604/fd0d264510214dedb0d33fad495f21a2.jpg.webp

分页获取网站中图片信息（宽高、地址，json格式）

使用/v2/list端点获取图像详细信息数组

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

https://picsum.photos/v2/list

[
	// 单个图片信息举例
    {
        "id": "0",  // 在本网站的id号
        "author": "Alejandro Escamilla",  // 图片作者
        "width": 5616,  // 图片宽高
        "height": 3744,
        "url": "https://unsplash.com/...",  // 图片来源地址
        "download_url": "https://picsum.photos/..."  // 图片下载链接
    },
    ....
]

获取网站每页100条数据，第二页的信息（第101-200条数据）

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

获取指定图片信息

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

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

您可以通过查看Picsum-ID标题或User CommentEXIF元数据中的字段来查找图像的ID 。（没看懂，json里不是直接有吗）

{
        "id": "0",
        "author": "Alejandro Escamilla",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/...",
        "download_url": "https://picsum.photos/..."
}

如果搭配上mockjs，秒啊~

• mockjs 基本使用-按指定规则生成随机测试数据