Text -> PNG -> ReadStream，都在前端搞定了？

Question

我不確定這是否可能，但這是我想要做的：

1. 讓用戶輸入一些文本
2. 從該文本生成 PNG
3. 上傳到 Pinata，這要求它是ReadStream格式
4. 在前端完成所有這些

我已經設法使用html2canvas完成（1）和（2）。

棘手的部分是（3）。 它必須采用ReadStream格式的原因是因為這是Pinata 的 SDK想要的格式：

const fs = require('fs');
const readableStreamForFile = fs.createReadStream('./yourfile.png');
const options = {
    pinataMetadata: {
        name: MyCustomName,
        keyvalues: {
            customKey: 'customValue',
            customKey2: 'customValue2'
        }
    },
    pinataOptions: {
        cidVersion: 0
    }
};
pinata.pinFileToIPFS(readableStreamForFile, options).then((result) => {
    //handle results here
    console.log(result);
}).catch((err) => {
    //handle error here
    console.log(err);
});

我意識到這在后端用 node 做沒有問題，但我想在前端做。 這可能嗎？ 還是我瘋了？

如果重要的話，我專門使用 Vue。

Answer 1

對於任何感興趣的人，解決方案最終使用了 fetch+blob：

    const generateImg = async () => {
      const canvas = await html2canvas(document.getElementById('hello'));
      const img = canvas.toDataURL('image/png');
      const res = await fetch(img);
      return res.blob();
    };

然后可以將此 blob 傳遞到其 SDK 的更手動版本中：

const uploadImg = (blob: Blob) => {
    const url = `https://api.pinata.cloud/pinning/pinFileToIPFS`;

    const data = new FormData();
    data.append('file', blob);

    const metadata = JSON.stringify({
      name: 'testname',
    });
    data.append('pinataMetadata', metadata);

    const pinataOptions = JSON.stringify({
      cidVersion: 0,
    });
    data.append('pinataOptions', pinataOptions);

    return axios
      .post(url, data, {
        maxBodyLength: 'Infinity' as any, // this is needed to prevent axios from erroring out with large files
        headers: {
          // @ts-ignore
          'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
          pinata_api_key: apiKey,
          pinata_secret_api_key: apiSecret,
        },
      })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  };