[英]Text -> PNG -> ReadStream, all done on the front-end?
I'm not sure if this is even possible, but here's what I'm trying to do:我不确定这是否可能,但这是我想要做的:
ReadStream
format上传到 Pinata,这要求它是ReadStream
格式I've managed to accomplish (1) and (2) using html2canvas .我已经设法使用html2canvas完成(1)和(2)。
The tricky part is (3).棘手的部分是(3)。 The reason it has to be in ReadStream
format is because that's the format Pinata's SDK wants:它必须采用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);
});
I realize that this would be no problem to do on the backend with node, but I'd like to do it on the front-end.我意识到这在后端用 node 做没有问题,但我想在前端做。 Is that at all possible?这可能吗? Or am I crazy?还是我疯了?
I'm specifically using Vue if that matters.如果重要的话,我专门使用 Vue。
For anyone interested the solution ended up being using fetch+blob:对于任何感兴趣的人,解决方案最终使用了 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();
};
This blob can then be passed into a more manual version of their SDK:然后可以将此 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);
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.