这是关于潘妮塔大挑战的提交（https://dev.to/challenges/pinata）
我建的东西我开发了一个网络应用，让用户能够绘制数字草图并将其上传到Pinata，存储在IPFS网络上。该应用程序具有一个用户友好的绘图界面，包括各种工具，例如颜色选择器和画笔大小调整。当草图完成后，用户可以将其下载成图像文件并上传到Pinata，确保他们的作品既安全存储又容易访问。
演示版你可以试试我的应用程序的演示版[https://sketchbook-pinata-client.vercel.app/]
我的程序你可以在我位于GitHub的仓库里看看源代码：GitHub仓库
更多细节
我利用Pinata来处理由绘图工具生成图片的上传过程。这里有一些重要特点：
IPFS上传流程：当草图保存后，图像会被转换成Blob并上传到Pinata，Pinata提供了一个安全且去中心化的存储方案。
高效文件管理：每次上传都会与特定用户（如果启用了身份验证）关联，使得他们的作品管理更加有序。
如何获取Pinata的API密钥
要将Pinata与您的项目集成，请按照以下步骤来获取它的API密钥。
注册或登录Pinata账户，如下：
访问 https://pinata.cloud/ 并创建一个账户，或者如果您已有账户，直接登录。
-
创建API密钥：
登录后，在仪表板中找到“API密钥”部分。
点击“新建密钥”来创建一个新的API密钥。
为密钥起一个名字，并设置所需的权限（例如，pinFileToIPFS（用于上传文件））。 -
点击“创建”，您将收到一个API密钥、密钥和JWT（JSON Web令牌）。请将这些内容复制下来，因为您的项目会用到它们。
安全地保存API密钥:在你的 Next.js 项目中，创建一个 .env.local 文件用来安全地存放 API 密钥。
NEXT_PUBLIC_PINATA_JWT=请填写您的JWT令牌按一下全屏，按一下退出全屏
将your_jwt_token_here替换为从Pinata获得的JWT。确保不要在代码中或公开场合暴露这个密钥，以免他人误用。
我是如何创建Sketch应用的
- 图像转换：我将绘制的内容使用
canvas.toDataURL()方法转换为 Base64 字符串，并将其转换为 Blob 以便上传。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.addEventListener('mousedown', startDrawing); // 鼠标按下事件，开始绘制
canvas.addEventListener('mousemove', draw); // 鼠标移动事件，绘制
canvas.addEventListener('mouseup', stopDrawing); // 鼠标抬起事件，停止绘制
// 获取画布元素的上下文
const ctx = canvas.getContext('2d');进入全屏 退出全屏
- Pinata集成（使用Pinata集成）: 我通过使用Pinata API，将Blob（二进制大对象）作为multipart/form-data（多部分/表单数据格式）格式的文件发送。这确保文件能被Pinata正确处理和上传，在上传成功后，用户将收到他们草图的唯一IPFS哈希。
const downloadSketch = () => {
// 下载草图
const URL = canvas.toDataURL('image/jpeg'); // 转换为data URL
const anchor = document.createElement('a'); // 创建一个新的锚元素
anchor.href = URL; // 设置锚元素的href属性
anchor.download = 'sketch.jpg'; // 设置下载文件的名称
anchor.click(); // 触发点击事件
};
// canvas: 画布对象进入全屏模式，退出全屏模式
const uploadToPinata = async (anchor) => {
const token = process.env.NEXT_PUBLIC_PINATA_JWT;
const form = new FormData();
const blob = await fetch(anchor.href).then(anchor => anchor.blob());
const file = new File([blob], 'sketch.jpg', { type: 'image/jpeg' });
form.append("file", file);
const options = {
method: 'POST',
headers: {
Authorization: `Bearer ${token}`,
},
body: form
};
try {
const response = await fetch('https://uploads.pinata.cloud/v3/files', options);
const data = await response.json();
if (response.ok) {
console.log("上传成功:", data);
return data;
} else {
console.error("上传失败:", data);
}
} catch (error) {
console.error("上传失败:", error);
}
};
进入全屏，退出全屏
- 用户通知：每次上传完成后，用户都会收到上传成功或失败的通知，从而提升用户体验。
从SketchBook应用上传的草图截图
下面展示的是使用SketchBook应用创建并成功上传至Pinata Cloud的图片截图。