前端可否实现文本转PNG后转ReadStream格式上传至Pinata？

这个需求完全可以在前端Vue环境下实现，你看到的Pinata官方文档里的ReadStream入参示例是Node.js服务端场景的写法，浏览器环境不需要硬套该格式，直接用前端原生的File/Blob类型即可完成上传。

1. 将html2canvas生成的canvas转为File对象 #

html2canvas渲染完成后会返回canvas实例，通过原生toBlob方法即可转为PNG格式的Blob，再封装为File对象即可：

import html2canvas from 'html2canvas'

// 假设target是你要渲染的DOM节点
const canvas = await html2canvas(target, { useCORS: true })
// 转Blob再封装为File
const pngFile = await new Promise((resolve) => {
  canvas.toBlob((blob) => {
    const file = new File([blob], 'generated-text.png', { type: 'image/png' })
    resolve(file)
  }, 'image/png')
})

2. 上传到Pinata #

提供两种可选实现方式：

方式1：使用Pinata SDK #

浏览器端调用pinFileToIPFS方法时直接传入上面生成的pngFile即可，不需要做流转换：

import pinataSDK from '@pinata/sdk'

// 初始化Pinata，建议使用带域名限制、仅上传权限的JWT，不要暴露API密钥对
const pinata = new pinataSDK({ pinataJwt: '你的Pinata上传JWT' })

const options = {
  pinataMetadata: {
    name: '自定义图片名称',
    keyvalues: {
      customKey: 'customValue',
      customKey2: 'customValue2'
    }
  },
  pinataOptions: {
    cidVersion: 0
  }
}

try {
  const result = await pinata.pinFileToIPFS(pngFile, options)
  console.log('上传成功', result)
} catch (err) {
  console.error('上传失败', err)
}

方式2：直接调用Pinata HTTP接口 #

不想引入SDK的话可以直接用FormData封装参数调用官方接口，更轻量：

const formData = new FormData()
formData.append('file', pngFile)
formData.append('pinataMetadata', JSON.stringify({
  name: '自定义图片名称',
  keyvalues: {
    customKey: 'customValue'
  }
}))
formData.append('pinataOptions', JSON.stringify({
  cidVersion: 0
}))

try {
  const res = await fetch('https://api.pinata.cloud/pinning/pinFileToIPFS', {
    method: 'POST',
    headers: {
      Authorization: `Bearer 你的Pinata上传JWT`
    },
    body: formData
  })
  const result = await res.json()
  console.log('上传成功', result)
} catch (err) {
  console.error('上传失败', err)
}

前端上传时不要使用Pinata的全权限API密钥对，建议在Pinata后台生成仅授予上传权限、绑定你站点域名的JWT，避免密钥泄露被恶意调用消耗存储额度。

内容的提问来源于stack exchange，提问作者ilmoi