图床系列之tinypng自动压缩图片

前置内容：

• 使用cloudflare R2托管图片
• 使用cloudflare搭建个人图床

R2的存储空间虽然很便宜，但图片尺寸仍然应该尽可能小，节约存储空间的同时也减少传输体积，节约加载时间。所以图片在上传前最好是能压缩一下。目前非常好用的压缩图片的工具网站是 tinypng，所以之前一般是手动去 tinypng 对图片进行压缩后再上传，但这样很麻烦，所以今天我们来加一步逻辑给自动处理。

第一步找 tinypng 的 API： https://tinypng.com/developers

是填写邮箱地址后它直接把控制台地址发到你的邮箱里。获取一个 API key 保管好。

第二步读文档：https://tinypng.com/developers/reference

太多字了不想读怎么办？打开 chatGPT 开始聊天。先告诉 chatGPT 我想在图片上传前通过 tinypng 的服务对图片进行压缩，我的服务是用 cloudflare 的 worker 编写的，图片存储在 R2 里，前端代码是用 solidjs 写的。

chatGPT 就给了我一堆代码：

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();
  // @ts-ignore
  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 方法即可（相关代码参考上一篇）。