前置内容：
R2的存储空间虽然很便宜，但图片尺寸仍然应该尽可能小，节约存储空间的同时也减少传输体积，节约加载时间。所以图片在上传前最好是能压缩一下。目前非常好用的压缩图片的工具网站是 tinypng，所以之前一般是手动去 tinypng 对图片进行压缩后再上传，但这样很麻烦，所以今天我们来加一步逻辑给自动处理。
第一步找 tinypng 的 API： https://tinypng.com/developers
是填写邮箱地址后它直接把控制台地址发到你的邮箱里。获取一个 API key 保管好。
第二步读文档：https://tinypng.com/developers/reference
太多字了不想读怎么办？打开 chatGPT 开始聊天。先告诉 chatGPT 我想在图片上传前通过 tinypng 的服务对图片进行压缩，我的服务是用 cloudflare 的 worker 编写的，图片存储在 R2 里，前端代码是用 solidjs 写的。
chatGPT 就给了我一堆代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| const TINYPNG_API_KEY = '前面申请到的 API KEY'
export async function compressImage(file: File) {
const tinypngUrl = 'https://api.tinify.com/shrink';
const response = await fetch(tinypngUrl, {
method: 'POST',
headers: {
Authorization: 'Basic ' + btoa('api:' + TINYPNG_API_KEY),
'Content-Type': file.type,
},
body: file,
});
if (!response.ok) {
throw new Error('Error compressing image: ' + response.statusText);
}
const result = await response.json();
const compressedImageUrl = result.output.url;
const compressedImageResponse = await fetch(compressedImageUrl);
if (!compressedImageResponse.ok) {
throw new Error(
'Error fetching compressed image: ' + compressedImageResponse.statusText,
);
}
return compressedImageResponse.arrayBuffer();
}
|
拿到的结果是一个 arrayBuffer，直接给到 OSS.put 方法即可（相关代码参考上一篇）。