zoukankan      html  css  js  c++  java
  • 前端干货之随机图库 Lorem Picsum(只需要按规则写个网址就行,不需要集成任何插件环境)

    文章声明:

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

    前言

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

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

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

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

    基本用法

    获取指定大小的随机图片

    获取指定宽高的图片

    • 获取一张宽度为200,高度为300的随机图片
    https://picsum.photos/200/300
    

    img

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

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

    img

    通过id获取指定图片(非随机)

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

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

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

    img

    静态随机图片(随便写个值就能获取到图片,值一样,图片就是一样的)

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

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

    img

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

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

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

    img

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

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

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

    img

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

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

    img

    高级用法

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

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

    https://picsum.photos/id/1084/536/354?grayscale&blur=2
    

    img

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

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

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

    img

    img

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

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

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

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

    https://picsum.photos/200/300.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,秒啊~

  • 相关阅读:
    python中进程池和回调函数
    python网络编程中互斥锁与进程之间的通信
    python支持的进程与线程
    python网络编程之进程
    python网络编程之粘包
    python中socket编程
    python的异常处理
    webstorm(四):webstrom配置一键修复ESLint的报错
    JavaScript Array map() 方法
    ES6之Array.includes()函数
  • 原文地址:https://www.cnblogs.com/suwanbin/p/13376140.html
Copyright © 2011-2022 走看看