使用 javascript 中的 Github API 将图像的 base64 数据 URL 保存为图像

Question

我有一个 webp 图像的 base64 数据 URL，格式为

data:image/webp;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=

我想使用API以webp图像的格式将其提交到github。

为了更清楚地说明我要存档的内容这个。

但我存档的是这个或这个。

阅读this和this应该是可能的，但到目前为止我所有的测试都失败了。

我正在使用 ofetch，它是 javascript 中 fetch 的包装器，但它适用于 json 文件。我的问题是我认为需要首先将数据转换为其他内容。

到目前为止我的代码是：

    import { ofetch } from 'ofetch';
    
    const path = 'random_name.webp';
    const message = 'random commit message';
    const data = `data:image/webp;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=`;
    const content = data.replace(/^data:image\/\w+;base64,/, '');

    await ofetch(`/repos/learntheropes/img-test/contents/${path}`, {
      method: 'PUT',
      baseURL: 'https://api.github.com',
      headers: {
        'Content-Type': 'application/vnd.github.v3+json',
        Authorization: `token OMITTED`
      },
      body: {
        message,
        content;
      },
      async onRequestError({ request, error }) {
        console.log('[fetch request error]', request, error);
      },
      async onResponseError({ request, response }) {
        console.log('[fetch response error]', request, response.status, response.body);
      }
    })

我还尝试将字符串转换为 blob，但请求被拒绝：

const dataURLtoBlob = (data) => {

  const arr = data.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new Blob([u8arr], {
    type:mime
  });
}

 const content = dataURLtoBlob(data);

Answer 1

我终于知道如何转换数据了：

const data = `data:image/webp;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=`;
const binaryImageData = atob(data.split(',')[1]);
const content = btoa(binaryImageData)

然后你可以按照问题中的描述放置它。