如何在Discord中创建带有类似MJ Inpaint交互式绘图工具的模态弹窗？

核心实现思路 #

Discord原生模态弹窗仅支持官方内置组件（文本框、选择器等），无法直接嵌入绘图画布，所以类似MJ Inpaint的交互功能需要结合Discord机器人交互 + 外部绘图页面 + AI绘图API来实现。

具体步骤 #

1. 准备Discord机器人 #

• 在Discord开发者门户创建机器人，开启Message Content Intent和Server Members Intent权限
• 为机器人分配applications.commands和bot权限，邀请至目标服务器

2. 注册触发命令 #

以Discord.js v14为例，注册一个/inpaint slash命令，用于接收用户的基础图像并触发后续流程：

const { SlashCommandBuilder } = require('@discordjs/builders');

module.exports = {
    data: new SlashCommandBuilder()
        .setName('inpaint')
        .setDescription('打开交互式Inpaint工具')
        .addAttachmentOption(opt => 
            opt.setName('image')
                .setDescription('需要编辑的基础图像')
                .setRequired(true)),
    async execute(interaction) {
        // 提取用户上传的图像
        const originalImage = interaction.options.getAttachment('image');
        // 生成带交互按钮的消息，引导用户打开绘图页面
        await interaction.reply({
            content: '点击下方按钮打开绘图工具绘制蒙版：',
            components: [
                {
                    type: 1,
                    components: [
                        {
                            type: 2,
                            label: '打开绘图工具',
                            style: 5,
                            url: `你的自定义绘图页面URL?image=${originalImage.url}`
                        }
                    ]
                }
            ]
        });
    },
};

3. 实现交互式绘图页面 #

用Canvas构建一个外部网页，让用户可以在原图上绘制蒙版：

<canvas id="drawCanvas"></canvas>
<button onclick="submitMask()">提交蒙版</button>

<script>
const canvas = document.getElementById('drawCanvas');
const ctx = canvas.getContext('2d');
// 获取URL中的原图地址
const originalImageUrl = new URLSearchParams(window.location.search).get('image');

// 加载原图到画布
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = originalImageUrl;
img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
};

// 实现画笔绘制蒙版
let isDrawing = false;
canvas.addEventListener('mousedown', e => {
    isDrawing = true;
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
});
canvas.addEventListener('mousemove', e => {
    if (!isDrawing) return;
    ctx.lineWidth = 25;
    ctx.lineCap = 'round';
    ctx.strokeStyle = '#000'; // 黑色蒙版，后续可转为透明通道
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
});
canvas.addEventListener('mouseup', () => isDrawing = false);

// 提交蒙版到机器人后端
async function submitMask() {
    canvas.toBlob(async blob => {
        const formData = new FormData();
        formData.append('mask', blob, 'mask.png');
        formData.append('originalUrl', originalImageUrl);
        
        await fetch('你的机器人后端接口地址', {
            method: 'POST',
            body: formData
        });
        alert('蒙版已提交，等待生成结果！');
    });
}
</script>

4. 后端处理Inpaint请求 #

机器人后端接收蒙版和原图地址后，调用AI绘图API（如Stable Diffusion Inpaint、MidJourney代理API）生成结果，再返回给用户：

// 示例：用Discord.js发送生成后的图像
async function sendResult(userId, channelId, resultImagePath) {
    const channel = await client.channels.fetch(channelId);
    await channel.send({
        content: `<@${userId}> 你的Inpaint结果已生成：`,
        files: [resultImagePath]
    });
}

5. 优化用户体验 #

• 在绘图页面添加画笔粗细调整、撤销功能
• 机器人在用户提交蒙版后发送加载状态消息
• 处理图像格式兼容问题，确保原图和蒙版支持AI API的要求

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