一个在线艺术创作工具

如图所示，这是一张图片。

这是关于潘妮塔大挑战的提交（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的图片截图。