自用 API 之随机猫猫头像
本文目录
简介
本博客的老读者可能会发现一个有意思的点:本站的 logo 似乎每天都会换一只新的猫猫头像。
于是笔者索性将其封装为一个开放的 API 托管至 Cloudflare Workers,方便各位读者免费调用。
使用指南
基本信息
API 端点: https://random-cat-assets-r2.hats-land.com/
速率限制: 30 RPM/IP
(每IP每分钟30次请求)
响应格式: WebP
, PNG
, JSON
可选
直接引用图片
GET https://random-cat-assets-r2.hats-land.com/api/v1/images
API 默认根据浏览器请求信息自适应返回 WebP 还是 PNG,如果你想指定返回的图片格式,可以添加以下参数:
?format=png
强制返回 PNG 格式的图片?format=webp
强制返回 WebP 格式的图片
JSON API
请求
GET https://random-cat-assets-r2.hats-land.com/api/v1/json
响应
JSON API 示例返回:
json
{
"url": {
"png": "https://s3-apac.hats-land.com/cat-assets/avatar/pb-5767334.png",
"webp": "https://s3-apac.hats-land.com/cat-assets/avatar/pb-5767334.webp"
},
"width": 853,
"height": 853
}
小贴士
此 API 并不保证 SLA 可用性,请提前处理可能遇到的错误。
请尽量选择 WebP 格式,目前浏览器中除了 IE 均支持 WebP。
示例代码
你可以直接使用以下 JavaScript 代码嵌入到您网站的 HTML 中。
这个代码可实现加载页面后自动往 class 为 random-cat
的元素注入一个随机的猫猫图片。
例如 <div class="random-cat" style="aspect-ratio:1/1"></div>
javascript
(()=>{
const getRandomCat = () =>
fetch('https://random-cat-assets-r2.hats-land.com/api/v1/json', {
headers: { 'Accept': 'application/json' }
})
.then(r => r.json())
.then(d => {
const i = new Image();
i.src = d.url.webp; // 可以将 d.url.webp 替换为 d.url.png
i.alt = 'Random Cat Avatar';
document.querySelector('.random-cat')?.replaceChildren(i);
})
.catch(e => console.error('RandomCat fetch failed:', e));
document.addEventListener('DOMContentLoaded', getRandomCat);
})();
版权信息 (点击展开)
cs
Copyright (c) @ Hat's Blog www.hats-land.com
Released Date @ 2024-09-26 '/archives/technology/open-api-for-random-cat-avatars'
GPG Signature: 'https://www.hats-land.com/gpg-public.txt' (F166C5F4F897B96A07390B8574E3D911A0E70FEC)
// -----BEGIN PGP MESSAGE-----
// hF4DYvdQZ6S+TycSAQdA4YLsG2kv3qaa0J5LKHRD56rI8wna3OoKIwnHVzOiQCww
// axDk+KcrP3YULoLr7857CluyUtM+UW/Zyg9F0WYzDgeG9aPBMlh/W2eKWQ9qdDeh
// 1MCCAQkCECgQXU6drqBDjsv3t9nRLpMS/aMGtZ5/PrYRPROymKdDuSz48qiQQkHo
// XBtf2goIqYwYngpXD/b9F+vJ09O1UhxKCZUllIhMArM/GcUJTKmWsCGwp7YA/noW
// zuNVud4K34PUiodjvuyEIsEP/8E2C32FG4MtPOkYJ3Q5VNNliq3nh7Q/BCOaGSKb
// JpsezETOmxbwATVK6NphwBeEWVWA0wcHghSTj8itDNHH3WBeUwINptcpQ66wzuJ6
// gq5pt3wQ77d+gcHUW8yXk8i6F3eRS1q1qmc5/hQKlBWNsC+Xo+l7VJOsd2/sfkjh
// LAA84DyJPkyt3TAUyfMlv5WHoCBd3hgjHQFNMf+X1j8zmusc5qO2oJTp6DAfMgs9
// CVQvIWPgM64jTYFJYz+RdPSaevJD1HEuiNaY7KtCUIJfA1RMYw==
// =ahI2
// -----END PGP MESSAGE-----