小程序调用
微信小程序通过 wx.cloud.extend.AI.createImageModel 直接调用生图模型,不需要经过云函数中转。
前置条件
- 微信基础库 3.17.4 或更高版本
- 已创建云开发环境
- 生图资源:小程序成长计划赠送的生图资源
初始化
在 app.js 中初始化云开发,wx.cloud.extend.AI 依赖初始化完成后的环境信息:
App({
onLaunch() {
wx.cloud.init({
env: "your-env-id",
});
},
});
文生图
const imageModel = wx.cloud.extend.AI.createImageModel("hunyuan-image");
const res = await imageModel.generateImage({
model: "HY-Image-3.0-Plus-4090-Tob-v1.0",
prompt: "一只胖胖的橘猫坐在窗台上打盹,水彩风格,温暖色调",
size: "1024x1024",
revise: { value: true },
timeout: 120000,
});
console.log(res.data[0].url); // 图片 URL,24 小时有效
console.log(res.data[0].revised_prompt); // 改写后的 prompt
图生图
HY-Image-v3.0-I2I-ToB-v1.0.1 需要传入一张垫图,通过 image_urls(URL 列表)或 images(base64 列表)传入,二者选一个。最多 1 张图,单张不超过 10 MB,支持 jpg、jpeg、png 格式。
const imageModel = wx.cloud.extend.AI.createImageModel("hunyuan-image");
const res = await imageModel.generateImage({
model: "HY-Image-v3.0-I2I-ToB-v1.0.1",
prompt: "将这张照片转换为油画风格",
size: "1024x1024",
revise: { value: true },
image_urls: ["https://example.com/reference.jpg"],
timeout: 120000,
});
console.log(res.data[0].url);
用户从相册选图时,先把本地图片上传到云存储,再取临时链接作为垫图:
Page({
async pickAndGenerate() {
const { tempFiles } = await wx.chooseMedia({
count: 1,
mediaType: ["image"],
});
const { fileID } = await wx.cloud.uploadFile({
cloudPath: `ai-input/${Date.now()}.jpg`,
filePath: tempFiles[0].tempFilePath,
});
const { fileList } = await wx.cloud.getTempFileURL({ fileList: [fileID] });
const imageModel = wx.cloud.extend.AI.createImageModel("hunyuan-image");
const res = await imageModel.generateImage({
model: "HY-Image-v3.0-I2I-ToB-v1.0.1",
prompt: "将这张照片转换为油画风格",
image_urls: [fileList[0].tempFileURL],
revise: { value: true },
timeout: 120000,
});
this.setData({ imageUrl: res.data[0].url });
},
});
参数说明
AI.createImageModel
function createImageModel(provider: string): ImageModel;
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
provider | string | 是 | 模型提供商名称,固定传 "hunyuan-image" |
ImageModel.generateImage
function generateImage(data: GenerateImageInput): Promise<GenerateImageOutput>;
interface GenerateImageInput {
model: string;
prompt: string;
size?: string;
revise?: { value: boolean };
footnote?: string;
image_urls?: string[];
images?: string[];
timeout?: number;
}
interface GenerateImageOutput {
id: string;
created: number;
data: Array<{
url: string;
revised_prompt?: string;
}>;
}
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
model | string | 是 | 文生图用 HY-Image-3.0-Plus-4090-Tob-v1.0,图生图用 HY-Image-v3.0-I2I-ToB-v1.0.1 |
prompt | string | 是 | 图片描述文本,最多 500 字 |
size | string | 否 | 默认 1024x1024,可选 1024x1024、1280x720、720x1280、1280x1280 |
revise | { value: boolean } | 否 | 是否对 prompt 改写,开启后模型自动优化提示词 |
footnote | string | 否 | 水印文本 |
image_urls | string[] | 否 | 垫图 URL 列表,与 images 二选一 |
images | string[] | 否 | 垫图 base64 列表,与 image_urls 二选一 |
timeout | number | 否 | 请求超时时间,单位毫秒,建议 120000 |
返回值 data 是图片列表,每项包含 url(24 小时有效)和 revised_prompt(开启 revise 时返回)。
完整示例
一个可用的生图页面,包含加载状态和错误处理:
Page({
data: {
prompt: "",
imageUrl: "",
revisedPrompt: "",
loading: false,
},
onInput(e) {
this.setData({ prompt: e.detail.value });
},
async generate() {
const prompt = this.data.prompt.trim();
if (!prompt || this.data.loading) return;
if (prompt.length > 500) {
wx.showToast({ title: "提示词最多 500 字", icon: "none" });
return;
}
this.setData({ loading: true, imageUrl: "", revisedPrompt: "" });
try {
const imageModel = wx.cloud.extend.AI.createImageModel("hunyuan-image");
const res = await imageModel.generateImage({
model: "HY-Image-3.0-Plus-4090-Tob-v1.0",
prompt,
size: "1024x1024",
revise: { value: true },
timeout: 120000,
});
this.setData({
imageUrl: res.data[0].url,
revisedPrompt: res.data[0].revised_prompt || "",
});
} catch (err) {
console.error("生图失败", err);
wx.showToast({ title: "生成失败,请重试", icon: "error" });
} finally {
this.setData({ loading: false });
}
},
});
<view class="page">
<textarea bindinput="onInput" placeholder="描述你想生成的画面" maxlength="500" />
<button bindtap="generate" loading="{{loading}}" disabled="{{loading}}">
{{loading ? "生成中…" : "生成图片"}}
</button>
<image wx:if="{{imageUrl}}" src="{{imageUrl}}" mode="widthFix" />
<text wx:if="{{revisedPrompt}}">改写后的提示词:{{revisedPrompt}}</text>
</view>
保存图片到云存储
生成的图片 URL 24 小时后失效。需要长期保存时,下载到本地临时文件再上传云存储:
async function saveToCloudStorage(url) {
const { tempFilePath } = await wx.downloadFile({ url });
const { fileID } = await wx.cloud.uploadFile({
cloudPath: `ai-images/${Date.now()}.jpg`,
filePath: tempFilePath,
});
return fileID;
}
⚠️
wx.downloadFile受 downloadFile 合法域名限制,正式发布前需在小程序后台把图片域名加入白名单;<image>组件直接展示网络图片不受此限制。
与云函数调用的差异
| 维度 | 小程序端调用 | 云函数调用(wx-server-sdk) |
|---|---|---|
| 调用对象 | wx.cloud.extend.AI.createImageModel | cloud.ai().createImageModel |
| 基础库/依赖 | 基础库 ≥ 3.17.4,无需安装 | wx-server-sdk ≥ 4.0.2 |
| 超时控制 | timeout 参数(毫秒) | 云函数超时时间 |
| API Key 暴露 | 无,走登录态鉴权 | 无,服务端调用 |
| 适用场景 | 小程序内的直接生图 | 需要落库、批量处理、跨端复用 |
相关文档
- 混元文生图模型概述 — 模型参数与尺寸说明
- wx-server-sdk 调用 — 在云函数中生图
- 小程序调用大模型 —
wx.cloud.extend.AI文本生成接口 - 混元文生图模型升级 3.0 指南