🎨 通义万相实战：用 Qwen 多模态 API 实现 AI 换装换姿势，10 行代码搞定！

js 复制代码

摘要：手把手教你调用阿里云通义万相 API，输入 3 张图 + 一句话，AI 自动生成换装换姿势的新图片。前端只需要 Vite + 原生 JS，零依赖，10 分钟上手。

🖼️ 效果展示

输入图 1（人物）	输入图 2（服装）	输入图 3（姿势）	生成结果

输入 prompt ：图一的女生穿着图二中的黑色裙子按图三的姿势坐下

AI 会自动理解三张图的语义关系：识别图一中的人物特征、图二中的服装样式、图三中的坐姿骨架，然后将三者融合，生成一张全新的图片。可以看到，生成结果中人物穿着黑色裙子，坐在石头上，姿势与骨架图一致，背景也保持了原图的风格。

📌 前言

最近试了下阿里云通义万相的多模态图片生成 API，发现了一个很炸裂的功能------多图输入 + 文本指令，AI 能理解多张图片的关系，然后按你的要求生成新图。

简单说就是：给 AI 一张人像、一张衣服、一张姿势图，它就能帮你"换装 + 换姿势"，生成一张全新的图片。

效果有多好？直接上代码，10 行前端代码就能跑通。

🎯 本文适合谁

想快速体验 AI 图片生成的前端开发者
对通义万相 / DashScope API 感兴趣的同学
想做 AI 图片相关项目的开发者

🛠️ 技术栈

技术	作用
Vite	构建工具，零配置启动
原生 JavaScript	无框架依赖
DashScope API	阿里云通义万相多模态生成

⚡ 为什么选 Vite？

这个 demo 用 Vite 做构建工具。核心原因：快。

Vite（法语"快"）是尤雨溪开发的前端构建工具，利用浏览器原生 ESM 按需编译，开发阶段不打包，启动秒开。相比 Webpack 的"先打包整个项目再启动"，Vite 是"请求哪个编译哪个"，1000 个文件的项目启动也几乎瞬间完成。

关键特性：

零配置 ：npm create vite@latest 直接开跑，不用写配置文件
闪电热更新：改一个文件，浏览器瞬间刷新
原生 ESM：开发时不需要 babel 转译
环境变量 ：.env.local 文件 + VITE_ 前缀即可访问

bash 复制代码

npm create vite@latest qwen-image-demo -- --template vanilla

📚 项目搭建

第一步：创建项目

bash 复制代码

npm create vite@latest qwen-image-demo -- --template vanilla
cd qwen-image-demo
npm install

第二步：配置 API Key

在项目根目录创建 .env.local 文件：

bash 复制代码

VITE_QWEN_API_KEY=你的DashScope API Key

⚠️ 注意：API Key 以 VITE_ 开头才能在前端代码中通过 import.meta.env 访问。

第三步：获取 API Key

登录阿里云 DashScope 控制台
开通通义万相服务
在「API-KEY 管理」中创建一个 Key

📝 核心代码

完整 src/main.js：

javascript 复制代码

const apiKey = import.meta.env.VITE_QWEN_API_KEY;
const root = document.querySelector('#app');

const generateImage = async () => {
  const res = await fetch(
    "https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation",
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${apiKey}`
      },
      body: JSON.stringify({
        "model": "qwen-image-2.0-pro",
        "input": {
          "messages": [
            {
              "role": "user",
              "content": [
                { "image": "图片1的URL（人物）" },
                { "image": "图片2的URL（服装）" },
                { "image": "图片3的URL（姿势）" },
                { "text": "图一的女生穿着图二中的黑色裙子按图三的姿势坐下" }
              ]
            }
          ]
        },
        "parameters": {
          "n": 1,
          "size": "1024*1536"
        }
      })
    }
  );

  const data = await res.json();
  if (!res.ok || data.error) {
    throw new Error(data.error?.message || `HTTP ${res.status}`);
  }
  return data.output.choices[0].message.content[0].image;
};

const renderImage = (imageUrl) => {
  root.innerHTML = `<img src="${imageUrl}" />`;
};

const main = async () => {
  try {
    const imageUrl = await generateImage();
    renderImage(imageUrl);
  } catch (e) {
    root.innerHTML = `<p style="color:red">生成失败：${e.message}</p>`;
  }
};

main();

🔑 请求结构解析

API 端点

ruby 复制代码

POST https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation

请求体结构

json 复制代码

{
  "model": "qwen-image-2.0-pro",
  "input": {
    "messages": [{
      "role": "user",
      "content": [
        { "image": "URL1" },
        { "image": "URL2" },
        { "image": "URL3" },
        { "text": "指令文本" }
      ]
    }]
  },
  "parameters": {
    "n": 1,
    "size": "1024*1536"
  }
}

响应结构

json 复制代码

{
  "output": {
    "choices": [{
      "message": {
        "content": [{
          "image": "生成的图片URL"
        }]
      }
    }]
  }
}

🐛 踩坑记录

问题 1：429 Rate Limit

现象：控制台报 Failed to load resource: 429，然后 TypeError: Cannot read properties of undefined (reading 'choices')

原因：DashScope API 有速率限制，请求太频繁会被拒绝。返回的错误响应没有 output.choices 字段，直接取值就炸了。

解决：加错误处理，判断响应状态和数据结构：

javascript 复制代码

const data = await res.json();
if (!res.ok || data.error) {
  throw new Error(data.error?.message || `HTTP ${res.status}`);
}
return data.output.choices[0].message.content[0].image;

问题 2：API Key 暴露

注意：VITE_QWEN_API_KEY 会被打包进前端代码，生产环境不要用这种方式。开发阶段本地调试没问题，上线前一定要换成后端代理。

问题 3：图片 URL 要求

必须是公网可访问的 HTTPS URL
支持的格式：PNG、JPG、WEBP
图片大小不超过 10MB

💡 经验总结

多图输入是核心能力：通义万相不只是单图生成，多图 + 文本指令才是杀手锏
错误处理必须做：API 限流、Key 失效、网络超时都会导致响应结构异常
开发环境 API Key 可以前端直接用，生产环境必须走后端代理
Prompt 写清楚：AI 理解能力很强，但描述越明确效果越好

🔗 参考资料

💬 交流讨论

你们在用 AI 图片生成 API 做什么有趣的项目？欢迎评论区分享！

觉得有用？点个赞👍收藏⭐关注👆，下次更新更多 AI 实战玩法！