水墨江南模型微信小程序开发打造个人水墨画创作工具最近身边不少朋友都在玩AI绘画尤其是那种能把照片变成水墨画风格的应用特别受欢迎。但很多现成的工具要么功能受限要么需要付费用起来总感觉不那么顺手。我就想能不能自己动手把那个效果很棒的“水墨江南”AI模型直接塞进我们天天用的微信小程序里做一个完全属于自己的创作工具呢说干就干。这个想法其实挺直接的用户在小程序里拍张照或者选张图点一下就能立刻得到一张充满诗意的水墨画风格作品还能保存和分享给朋友。整个过程从构思到实现我把它拆解成了几个核心步骤首先是让AI模型能通过API被调用然后是小程序端做一个简洁好用的界面最后把前后端顺畅地连接起来。这篇文章我就来分享一下我是怎么一步步把这个想法变成现实的希望能给同样想折腾点有趣小项目的朋友一些参考。1. 核心思路与准备工作在开始敲代码之前我们先得把整个项目的脉络理清楚。这个小工具的核心逻辑其实不复杂就是一个典型的“用户上传 - 后端处理 - 返回结果”的流程。整体工作流是这样的用户在微信小程序里选择或拍摄一张照片。小程序将这张图片上传到我们自己的服务器后端。后端服务器接收到图片后调用“水墨江南”AI模型进行处理。模型生成水墨风格的结果图由后端返回给小程序。小程序将生成的水墨画展示给用户并提供保存、分享等功能。为了实现这个流程我们需要准备两个主要部分后端API服务和微信小程序前端。后端负责重度的AI计算前端负责友好的用户交互。技术选型与准备后端API服务我选择了Python的FastAPI框架。它轻量、异步支持好写API接口特别快。AI模型部分需要你先在服务器上部署好“水墨江南”模型例如使用相关的开源代码库并准备好调用它的Python函数。前端微信小程序自然是使用微信小程序原生开发框架。你需要先注册一个微信小程序账号拿到AppID然后在微信开发者工具中创建项目。通信与存储前后端通过HTTP协议通信。上传的图片和生成的图片可以暂时保存在服务器本地或者为了更好的扩展性上传到云存储服务如腾讯云COS、七牛云等小程序端直接访问返回的图片URL即可。把这几块怎么连接想明白后面的开发就是按部就班地填空了。2. 构建后端AI处理API后端是整个应用的大脑它隐蔽地完成最复杂的AI绘画工作。我们的目标是创建一个接收图片、返回水墨画结果的HTTP接口。2.1 搭建FastAPI应用骨架首先我们创建一个最简单的FastAPI应用并设计好主要的接口。# main.py from fastapi import FastAPI, File, UploadFile, HTTPException from fastapi.middleware.cors import CORSMiddleware from fastapi.responses import FileResponse import os import uuid from pathlib import Path # 导入你写好的水墨画风格转换函数 # 假设这个函数接收原始图片路径返回生成的水墨画图片路径 from ink_painter import generate_ink_painting app FastAPI(title水墨江南AI服务) # 非常重要允许微信小程序的域名进行跨域请求 app.add_middleware( CORSMiddleware, allow_origins[*], # 生产环境应替换为具体的小程序域名 allow_credentialsTrue, allow_methods[*], allow_headers[*], ) # 创建用于存放上传和生成图片的临时目录 UPLOAD_DIR Path(temp_uploads) GENERATED_DIR Path(temp_generated) UPLOAD_DIR.mkdir(exist_okTrue) GENERATED_DIR.mkdir(exist_okTrue) app.get(/) def read_root(): return {message: 水墨江南AI服务已启动} app.post(/generate/) async def generate_ink_art(image: UploadFile File(...)): 核心接口接收图片返回生成的水墨画图片URL # 1. 校验上传的文件是否为图片 if not image.content_type.startswith(image/): raise HTTPException(status_code400, detail请上传图片文件) # 2. 生成唯一文件名保存上传的图片 file_extension os.path.splitext(image.filename)[1] unique_filename f{uuid.uuid4().hex}{file_extension} upload_path UPLOAD_DIR / unique_filename try: contents await image.read() with open(upload_path, wb) as f: f.write(contents) except Exception: raise HTTPException(status_code500, detail图片上传失败) # 3. 调用AI模型处理图片 try: # 这里是核心处理逻辑调用你封装好的模型函数 generated_image_path generate_ink_painting(str(upload_path), str(GENERATED_DIR)) except Exception as e: # 记录日志方便排查模型错误 print(f模型处理失败: {e}) raise HTTPException(status_code500, detailAI处理失败请稍后重试) # 4. 返回生成图片的访问地址 # 假设我们通过另一个接口来提供静态文件访问 generated_filename os.path.basename(generated_image_path) return { code: 0, message: success, data: { generated_image_url: f/generated/{generated_filename} } } app.get(/generated/{filename}) async def get_generated_image(filename: str): 提供生成图片的访问 file_path GENERATED_DIR / filename if file_path.exists(): return FileResponse(file_path) raise HTTPException(status_code404, detail图片未找到)这个骨架提供了两个关键接口/generate/用于处理图片/generated/{filename}用于让前端获取生成后的图片。2.2 集成水墨江南模型ink_painter.py是你需要根据具体模型实现的核心模块。这里给出一个概念性的示例# ink_painter.py (示例逻辑) import cv2 import numpy as np from some_ink_style_library import apply_ink_effect # 假设的样式转换库 def generate_ink_painting(input_path: str, output_dir: str) - str: 调用水墨风格转换模型。 参数: input_path: 上传的原始图片路径 output_dir: 生成图片的存放目录 返回: 生成图片的完整路径 # 1. 读取图片 image cv2.imread(input_path) if image is None: raise ValueError(无法读取图片文件) # 2. 这里应替换为实际的水墨画风格转换代码 # 可能是调用一个预训练的PyTorch/TensorFlow模型 # 也可能是使用OpenCV进行一系列图像处理滤镜的组合。 # 例如 # output_image your_ink_model.predict(image) # 为了示例我们用一个简单的边缘保留滤镜模拟效果 output_image apply_ink_effect(image) # 这是一个假想函数 # 3. 保存处理后的图片 import os output_filename fink_{os.path.basename(input_path)} output_path os.path.join(output_dir, output_filename) cv2.imwrite(output_path, output_image) return output_path关键点你需要根据“水墨江南”模型的具体实现方式例如是使用Stable Diffusion的LoRA模型还是特定的GAN网络或者是传统的图像处理算法来填充generate_ink_painting函数内部的逻辑。确保模型在服务器环境下能稳定运行。2.3 部署与测试开发完成后你可以在本地用uvicorn main:app --reload启动服务进行测试。使用Postman或类似的工具尝试向http://127.0.0.1:8000/generate/发送一个包含图片的POST请求看看是否能成功返回图片URL。对于正式部署你可以将代码部署到云服务器如腾讯云CVM、阿里云ECS或云容器平台。记得配置好生产环境下的跨域设置allow_origins和静态文件服务对于生成的图片使用Nginx等直接提供静态文件访问效率更高。3. 开发微信小程序前端界面前端是小程序的脸面追求的是简单直观。我们主要设计两个页面首页上传/生成和个人中心作品展示。3.1 项目初始化与页面结构在微信开发者工具中创建项目后我们规划两个页面pages/index/index首页用于上传图片和展示生成结果。pages/gallery/gallery画廊页展示用户历史生成的作品。我们先搭建首页index.wxml的基本结构!-- pages/index/index.wxml -- view classcontainer !-- 标题区域 -- view classheader text classtitle水墨江南/text text classsubtitle将你的照片化作水墨诗意/text /view !-- 图片展示区域 -- view classimage-section view wx:if{{!originalImagePath !generatedImageUrl}} classupload-placeholder bindtapchooseImage image src/images/upload-icon.png modeaspectFit/image text点击上传或拍摄照片/text /view view wx:if{{originalImagePath}} classimage-preview view classimage-box text classimage-label原图/text image src{{originalImagePath}} modewidthFix classpreview-image/image /view view classimage-box wx:if{{generatedImageUrl}} text classimage-label水墨画/text image src{{generatedImageUrl}} modewidthFix classpreview-image/image /view /view /view !-- 操作按钮区域 -- view classaction-buttons button wx:if{{!originalImagePath}} typeprimary bindtapchooseImage sizedefault选择图片/button button wx:if{{originalImagePath !generatedImageUrl}} typeprimary bindtapgenerateInkPainting loading{{loading}} sizedefault生成水墨画/button view wx:if{{generatedImageUrl}} classresult-actions button typeprimary bindtapsaveToAlbum sizedefault保存到相册/button button typedefault bindtapshareImage sizedefault分享作品/button button typewarn bindtapresetAll sizedefault重新开始/button /view /view !-- 提示信息 -- view wx:if{{tipMessage}} classtip{{tipMessage}}/view /view相应的index.wxss负责美化界面这里省略具体样式代码重点是布局清晰、操作按钮醒目。3.2 实现图片选择与上传逻辑前端的核心交互逻辑在index.js中实现。// pages/index/index.js Page({ data: { originalImagePath: , // 原始图片临时路径 generatedImageUrl: , // 生成的水墨画图片URL loading: false, // 生成按钮加载状态 tipMessage: , // 提示信息 // 你的后端API地址本地测试用localhost上线需换成域名 apiBaseUrl: https://your-api-domain.com }, // 1. 选择图片 chooseImage() { const that this; wx.chooseMedia({ count: 1, mediaType: [image], sourceType: [album, camera], success(res) { const tempFilePath res.tempFiles[0].tempFilePath; that.setData({ originalImagePath: tempFilePath, generatedImageUrl: , // 清除之前的结果 tipMessage: 图片已选择点击下方按钮开始转换 }); }, fail(err) { console.error(选择图片失败:, err); that.showTip(选择图片失败请重试); } }); }, // 2. 调用后端API生成水墨画 async generateInkPainting() { const that this; const { originalImagePath, apiBaseUrl } this.data; if (!originalImagePath) { this.showTip(请先选择图片); return; } this.setData({ loading: true, tipMessage: AI正在创作中请稍候... }); // 上传文件 wx.uploadFile({ url: ${apiBaseUrl}/generate/, // 你的后端生成接口 filePath: originalImagePath, name: image, formData: {}, success(res) { const data JSON.parse(res.data); if (data.code 0) { // 拼接完整的图片访问URL const fullImageUrl ${apiBaseUrl}${data.data.generated_image_url}; that.setData({ generatedImageUrl: fullImageUrl, tipMessage: 创作完成 }); // 可选将生成记录存入本地缓存或上传 that.saveToHistory(fullImageUrl); } else { that.showTip(生成失败 data.message); } }, fail(err) { console.error(API请求失败:, err); that.showTip(网络请求失败请检查连接); }, complete() { that.setData({ loading: false }); } }); }, // 3. 保存图片到手机相册 saveToAlbum() { const { generatedImageUrl } this.data; wx.showLoading({ title: 保存中 }); wx.downloadFile({ url: generatedImageUrl, success(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success() { wx.hideLoading(); wx.showToast({ title: 保存成功, icon: success }); }, fail(err) { wx.hideLoading(); // 处理用户拒绝授权等情况 if (err.errMsg.includes(auth deny)) { wx.showModal({ title: 提示, content: 需要您授权保存到相册, showCancel: false }); } else { wx.showToast({ title: 保存失败, icon: none }); } } }); }, fail() { wx.hideLoading(); wx.showToast({ title: 下载图片失败, icon: none }); } }); }, // 4. 分享图片生成分享图或引导分享 shareImage() { wx.showActionSheet({ itemList: [分享给好友, 生成分享海报], success(res) { if (res.tapIndex 0) { // 分享给好友需要设置页面的onShareAppMessage wx.showToast({ title: 点击右上角分享给好友, icon: none }); } else if (res.tapIndex 1) { // 跳转到生成海报页面 wx.navigateTo({ url: /pages/poster/poster }); } } }); }, // 5. 重置重新开始 resetAll() { this.setData({ originalImagePath: , generatedImageUrl: , tipMessage: }); }, // 辅助函数显示提示 showTip(msg) { this.setData({ tipMessage: msg }); setTimeout(() this.setData({ tipMessage: }), 3000); }, // 辅助函数保存生成记录到本地缓存 saveToHistory(imageUrl) { let history wx.getStorageSync(inkHistory) || []; history.unshift({ url: imageUrl, time: new Date().toLocaleString() }); // 只保留最近20条记录 if (history.length 20) history.pop(); wx.setStorageSync(inkHistory, history); }, // 分享回调 onShareAppMessage() { const { generatedImageUrl } this.data; return { title: 看我用水墨江南AI创作的水墨画, path: /pages/index/index, imageUrl: generatedImageUrl || /images/share-default.jpg }; } });这样一个具备完整上传、生成、保存、分享功能的小程序前端页面就基本完成了。画廊页gallery的实现思路类似主要从本地缓存wx.getStorageSync(inkHistory)中读取历史记录并列表展示。4. 前后端联调与优化当后端API和小程序前端都开发得差不多了就需要把它们连接起来并处理一些细节问题。联调关键步骤配置服务器域名在小程序管理后台的“开发设置”中将你的后端API域名添加到“服务器域名”request合法列表中。这是必须的否则小程序无法向你的服务器发起请求。测试上传与生成在微信开发者工具中运行小程序选择图片点击生成。观察网络请求Console或Network面板是否成功返回的数据格式是否正确。处理图片显示确保后端返回的图片URL能被小程序的image组件正确加载。如果图片较大可以考虑在后端生成缩略图或在小程序端使用modewidthFix等属性进行适配性显示。性能与体验优化加载反馈在调用AI生成时使用loading状态或wx.showLoading给用户明确的等待提示。错误处理网络错误、服务器错误、模型处理失败等都需要有友好的提示引导用户重试或检查。图片压缩在上传前可以使用wx.compressImageAPI对用户选择的图片进行适当压缩减少上传流量和时间。结果缓存对于同一张原图可以在后端或前端增加简单的缓存机制避免重复计算提升响应速度。历史记录利用小程序的本地存储能力保存用户的历史作品提升用户粘性。5. 总结与展望走完这一整套流程一个属于你自己的水墨画创作小程序就初具雏形了。从效果上看它已经实现了核心功能让用户能方便地体验AI水墨画的魅力。整个过程最有趣的部分其实是看着一个从图片输入到艺术风格输出的完整链路在自己手里一点点搭建起来。实际开发中肯定还会遇到各种小问题比如模型处理速度慢怎么办、生成效果不满意如何调整、用户量上来后服务器压力大等等。这些问题都有对应的解决思路比如用消息队列异步处理任务、尝试调整模型参数或尝试不同的风格迁移模型、将服务部署到可弹性伸缩的云容器中等。这个小项目本身也是一个很好的起点。基于这个框架你可以很容易地扩展其他AI能力比如换成其他艺术风格油画、卡通、素描或者增加更丰富的编辑功能调整笔画浓度、添加题词印章等。甚至如果生成效果足够好可以考虑加入简单的社交功能让用户们能在一个小社区里展示自己的作品。技术最终是为了创造有趣和美好的体验。希望这个分享能帮你打开一扇门亲手将AI的创造力封装进每个人触手可及的小程序里做出更多让人眼前一亮的小工具。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
水墨江南模型微信小程序开发：打造个人水墨画创作工具
发布时间：2026/5/27 16:31:47
水墨江南模型微信小程序开发打造个人水墨画创作工具最近身边不少朋友都在玩AI绘画尤其是那种能把照片变成水墨画风格的应用特别受欢迎。但很多现成的工具要么功能受限要么需要付费用起来总感觉不那么顺手。我就想能不能自己动手把那个效果很棒的“水墨江南”AI模型直接塞进我们天天用的微信小程序里做一个完全属于自己的创作工具呢说干就干。这个想法其实挺直接的用户在小程序里拍张照或者选张图点一下就能立刻得到一张充满诗意的水墨画风格作品还能保存和分享给朋友。整个过程从构思到实现我把它拆解成了几个核心步骤首先是让AI模型能通过API被调用然后是小程序端做一个简洁好用的界面最后把前后端顺畅地连接起来。这篇文章我就来分享一下我是怎么一步步把这个想法变成现实的希望能给同样想折腾点有趣小项目的朋友一些参考。1. 核心思路与准备工作在开始敲代码之前我们先得把整个项目的脉络理清楚。这个小工具的核心逻辑其实不复杂就是一个典型的“用户上传 - 后端处理 - 返回结果”的流程。整体工作流是这样的用户在微信小程序里选择或拍摄一张照片。小程序将这张图片上传到我们自己的服务器后端。后端服务器接收到图片后调用“水墨江南”AI模型进行处理。模型生成水墨风格的结果图由后端返回给小程序。小程序将生成的水墨画展示给用户并提供保存、分享等功能。为了实现这个流程我们需要准备两个主要部分后端API服务和微信小程序前端。后端负责重度的AI计算前端负责友好的用户交互。技术选型与准备后端API服务我选择了Python的FastAPI框架。它轻量、异步支持好写API接口特别快。AI模型部分需要你先在服务器上部署好“水墨江南”模型例如使用相关的开源代码库并准备好调用它的Python函数。前端微信小程序自然是使用微信小程序原生开发框架。你需要先注册一个微信小程序账号拿到AppID然后在微信开发者工具中创建项目。通信与存储前后端通过HTTP协议通信。上传的图片和生成的图片可以暂时保存在服务器本地或者为了更好的扩展性上传到云存储服务如腾讯云COS、七牛云等小程序端直接访问返回的图片URL即可。把这几块怎么连接想明白后面的开发就是按部就班地填空了。2. 构建后端AI处理API后端是整个应用的大脑它隐蔽地完成最复杂的AI绘画工作。我们的目标是创建一个接收图片、返回水墨画结果的HTTP接口。2.1 搭建FastAPI应用骨架首先我们创建一个最简单的FastAPI应用并设计好主要的接口。# main.py from fastapi import FastAPI, File, UploadFile, HTTPException from fastapi.middleware.cors import CORSMiddleware from fastapi.responses import FileResponse import os import uuid from pathlib import Path # 导入你写好的水墨画风格转换函数 # 假设这个函数接收原始图片路径返回生成的水墨画图片路径 from ink_painter import generate_ink_painting app FastAPI(title水墨江南AI服务) # 非常重要允许微信小程序的域名进行跨域请求 app.add_middleware( CORSMiddleware, allow_origins[*], # 生产环境应替换为具体的小程序域名 allow_credentialsTrue, allow_methods[*], allow_headers[*], ) # 创建用于存放上传和生成图片的临时目录 UPLOAD_DIR Path(temp_uploads) GENERATED_DIR Path(temp_generated) UPLOAD_DIR.mkdir(exist_okTrue) GENERATED_DIR.mkdir(exist_okTrue) app.get(/) def read_root(): return {message: 水墨江南AI服务已启动} app.post(/generate/) async def generate_ink_art(image: UploadFile File(...)): 核心接口接收图片返回生成的水墨画图片URL # 1. 校验上传的文件是否为图片 if not image.content_type.startswith(image/): raise HTTPException(status_code400, detail请上传图片文件) # 2. 生成唯一文件名保存上传的图片 file_extension os.path.splitext(image.filename)[1] unique_filename f{uuid.uuid4().hex}{file_extension} upload_path UPLOAD_DIR / unique_filename try: contents await image.read() with open(upload_path, wb) as f: f.write(contents) except Exception: raise HTTPException(status_code500, detail图片上传失败) # 3. 调用AI模型处理图片 try: # 这里是核心处理逻辑调用你封装好的模型函数 generated_image_path generate_ink_painting(str(upload_path), str(GENERATED_DIR)) except Exception as e: # 记录日志方便排查模型错误 print(f模型处理失败: {e}) raise HTTPException(status_code500, detailAI处理失败请稍后重试) # 4. 返回生成图片的访问地址 # 假设我们通过另一个接口来提供静态文件访问 generated_filename os.path.basename(generated_image_path) return { code: 0, message: success, data: { generated_image_url: f/generated/{generated_filename} } } app.get(/generated/{filename}) async def get_generated_image(filename: str): 提供生成图片的访问 file_path GENERATED_DIR / filename if file_path.exists(): return FileResponse(file_path) raise HTTPException(status_code404, detail图片未找到)这个骨架提供了两个关键接口/generate/用于处理图片/generated/{filename}用于让前端获取生成后的图片。2.2 集成水墨江南模型ink_painter.py是你需要根据具体模型实现的核心模块。这里给出一个概念性的示例# ink_painter.py (示例逻辑) import cv2 import numpy as np from some_ink_style_library import apply_ink_effect # 假设的样式转换库 def generate_ink_painting(input_path: str, output_dir: str) - str: 调用水墨风格转换模型。 参数: input_path: 上传的原始图片路径 output_dir: 生成图片的存放目录 返回: 生成图片的完整路径 # 1. 读取图片 image cv2.imread(input_path) if image is None: raise ValueError(无法读取图片文件) # 2. 这里应替换为实际的水墨画风格转换代码 # 可能是调用一个预训练的PyTorch/TensorFlow模型 # 也可能是使用OpenCV进行一系列图像处理滤镜的组合。 # 例如 # output_image your_ink_model.predict(image) # 为了示例我们用一个简单的边缘保留滤镜模拟效果 output_image apply_ink_effect(image) # 这是一个假想函数 # 3. 保存处理后的图片 import os output_filename fink_{os.path.basename(input_path)} output_path os.path.join(output_dir, output_filename) cv2.imwrite(output_path, output_image) return output_path关键点你需要根据“水墨江南”模型的具体实现方式例如是使用Stable Diffusion的LoRA模型还是特定的GAN网络或者是传统的图像处理算法来填充generate_ink_painting函数内部的逻辑。确保模型在服务器环境下能稳定运行。2.3 部署与测试开发完成后你可以在本地用uvicorn main:app --reload启动服务进行测试。使用Postman或类似的工具尝试向http://127.0.0.1:8000/generate/发送一个包含图片的POST请求看看是否能成功返回图片URL。对于正式部署你可以将代码部署到云服务器如腾讯云CVM、阿里云ECS或云容器平台。记得配置好生产环境下的跨域设置allow_origins和静态文件服务对于生成的图片使用Nginx等直接提供静态文件访问效率更高。3. 开发微信小程序前端界面前端是小程序的脸面追求的是简单直观。我们主要设计两个页面首页上传/生成和个人中心作品展示。3.1 项目初始化与页面结构在微信开发者工具中创建项目后我们规划两个页面pages/index/index首页用于上传图片和展示生成结果。pages/gallery/gallery画廊页展示用户历史生成的作品。我们先搭建首页index.wxml的基本结构!-- pages/index/index.wxml -- view classcontainer !-- 标题区域 -- view classheader text classtitle水墨江南/text text classsubtitle将你的照片化作水墨诗意/text /view !-- 图片展示区域 -- view classimage-section view wx:if{{!originalImagePath !generatedImageUrl}} classupload-placeholder bindtapchooseImage image src/images/upload-icon.png modeaspectFit/image text点击上传或拍摄照片/text /view view wx:if{{originalImagePath}} classimage-preview view classimage-box text classimage-label原图/text image src{{originalImagePath}} modewidthFix classpreview-image/image /view view classimage-box wx:if{{generatedImageUrl}} text classimage-label水墨画/text image src{{generatedImageUrl}} modewidthFix classpreview-image/image /view /view /view !-- 操作按钮区域 -- view classaction-buttons button wx:if{{!originalImagePath}} typeprimary bindtapchooseImage sizedefault选择图片/button button wx:if{{originalImagePath !generatedImageUrl}} typeprimary bindtapgenerateInkPainting loading{{loading}} sizedefault生成水墨画/button view wx:if{{generatedImageUrl}} classresult-actions button typeprimary bindtapsaveToAlbum sizedefault保存到相册/button button typedefault bindtapshareImage sizedefault分享作品/button button typewarn bindtapresetAll sizedefault重新开始/button /view /view !-- 提示信息 -- view wx:if{{tipMessage}} classtip{{tipMessage}}/view /view相应的index.wxss负责美化界面这里省略具体样式代码重点是布局清晰、操作按钮醒目。3.2 实现图片选择与上传逻辑前端的核心交互逻辑在index.js中实现。// pages/index/index.js Page({ data: { originalImagePath: , // 原始图片临时路径 generatedImageUrl: , // 生成的水墨画图片URL loading: false, // 生成按钮加载状态 tipMessage: , // 提示信息 // 你的后端API地址本地测试用localhost上线需换成域名 apiBaseUrl: https://your-api-domain.com }, // 1. 选择图片 chooseImage() { const that this; wx.chooseMedia({ count: 1, mediaType: [image], sourceType: [album, camera], success(res) { const tempFilePath res.tempFiles[0].tempFilePath; that.setData({ originalImagePath: tempFilePath, generatedImageUrl: , // 清除之前的结果 tipMessage: 图片已选择点击下方按钮开始转换 }); }, fail(err) { console.error(选择图片失败:, err); that.showTip(选择图片失败请重试); } }); }, // 2. 调用后端API生成水墨画 async generateInkPainting() { const that this; const { originalImagePath, apiBaseUrl } this.data; if (!originalImagePath) { this.showTip(请先选择图片); return; } this.setData({ loading: true, tipMessage: AI正在创作中请稍候... }); // 上传文件 wx.uploadFile({ url: ${apiBaseUrl}/generate/, // 你的后端生成接口 filePath: originalImagePath, name: image, formData: {}, success(res) { const data JSON.parse(res.data); if (data.code 0) { // 拼接完整的图片访问URL const fullImageUrl ${apiBaseUrl}${data.data.generated_image_url}; that.setData({ generatedImageUrl: fullImageUrl, tipMessage: 创作完成 }); // 可选将生成记录存入本地缓存或上传 that.saveToHistory(fullImageUrl); } else { that.showTip(生成失败 data.message); } }, fail(err) { console.error(API请求失败:, err); that.showTip(网络请求失败请检查连接); }, complete() { that.setData({ loading: false }); } }); }, // 3. 保存图片到手机相册 saveToAlbum() { const { generatedImageUrl } this.data; wx.showLoading({ title: 保存中 }); wx.downloadFile({ url: generatedImageUrl, success(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success() { wx.hideLoading(); wx.showToast({ title: 保存成功, icon: success }); }, fail(err) { wx.hideLoading(); // 处理用户拒绝授权等情况 if (err.errMsg.includes(auth deny)) { wx.showModal({ title: 提示, content: 需要您授权保存到相册, showCancel: false }); } else { wx.showToast({ title: 保存失败, icon: none }); } } }); }, fail() { wx.hideLoading(); wx.showToast({ title: 下载图片失败, icon: none }); } }); }, // 4. 分享图片生成分享图或引导分享 shareImage() { wx.showActionSheet({ itemList: [分享给好友, 生成分享海报], success(res) { if (res.tapIndex 0) { // 分享给好友需要设置页面的onShareAppMessage wx.showToast({ title: 点击右上角分享给好友, icon: none }); } else if (res.tapIndex 1) { // 跳转到生成海报页面 wx.navigateTo({ url: /pages/poster/poster }); } } }); }, // 5. 重置重新开始 resetAll() { this.setData({ originalImagePath: , generatedImageUrl: , tipMessage: }); }, // 辅助函数显示提示 showTip(msg) { this.setData({ tipMessage: msg }); setTimeout(() this.setData({ tipMessage: }), 3000); }, // 辅助函数保存生成记录到本地缓存 saveToHistory(imageUrl) { let history wx.getStorageSync(inkHistory) || []; history.unshift({ url: imageUrl, time: new Date().toLocaleString() }); // 只保留最近20条记录 if (history.length 20) history.pop(); wx.setStorageSync(inkHistory, history); }, // 分享回调 onShareAppMessage() { const { generatedImageUrl } this.data; return { title: 看我用水墨江南AI创作的水墨画, path: /pages/index/index, imageUrl: generatedImageUrl || /images/share-default.jpg }; } });这样一个具备完整上传、生成、保存、分享功能的小程序前端页面就基本完成了。画廊页gallery的实现思路类似主要从本地缓存wx.getStorageSync(inkHistory)中读取历史记录并列表展示。4. 前后端联调与优化当后端API和小程序前端都开发得差不多了就需要把它们连接起来并处理一些细节问题。联调关键步骤配置服务器域名在小程序管理后台的“开发设置”中将你的后端API域名添加到“服务器域名”request合法列表中。这是必须的否则小程序无法向你的服务器发起请求。测试上传与生成在微信开发者工具中运行小程序选择图片点击生成。观察网络请求Console或Network面板是否成功返回的数据格式是否正确。处理图片显示确保后端返回的图片URL能被小程序的image组件正确加载。如果图片较大可以考虑在后端生成缩略图或在小程序端使用modewidthFix等属性进行适配性显示。性能与体验优化加载反馈在调用AI生成时使用loading状态或wx.showLoading给用户明确的等待提示。错误处理网络错误、服务器错误、模型处理失败等都需要有友好的提示引导用户重试或检查。图片压缩在上传前可以使用wx.compressImageAPI对用户选择的图片进行适当压缩减少上传流量和时间。结果缓存对于同一张原图可以在后端或前端增加简单的缓存机制避免重复计算提升响应速度。历史记录利用小程序的本地存储能力保存用户的历史作品提升用户粘性。5. 总结与展望走完这一整套流程一个属于你自己的水墨画创作小程序就初具雏形了。从效果上看它已经实现了核心功能让用户能方便地体验AI水墨画的魅力。整个过程最有趣的部分其实是看着一个从图片输入到艺术风格输出的完整链路在自己手里一点点搭建起来。实际开发中肯定还会遇到各种小问题比如模型处理速度慢怎么办、生成效果不满意如何调整、用户量上来后服务器压力大等等。这些问题都有对应的解决思路比如用消息队列异步处理任务、尝试调整模型参数或尝试不同的风格迁移模型、将服务部署到可弹性伸缩的云容器中等。这个小项目本身也是一个很好的起点。基于这个框架你可以很容易地扩展其他AI能力比如换成其他艺术风格油画、卡通、素描或者增加更丰富的编辑功能调整笔画浓度、添加题词印章等。甚至如果生成效果足够好可以考虑加入简单的社交功能让用户们能在一个小社区里展示自己的作品。技术最终是为了创造有趣和美好的体验。希望这个分享能帮你打开一扇门亲手将AI的创造力封装进每个人触手可及的小程序里做出更多让人眼前一亮的小工具。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
