uni-app 实战：使用 lime-painter 实现页面内容一键生成海报并下载

在开发 uni-app 应用时，将页面上的内容一键生成图片并保存到相册是一个非常常见的需求，比如生成分享海报、订单卡片、个人名片等。

一、需求分析

我们要实现的核心功能：

页面展示天气海报列表（包含图片、文字、样式）
点击下载按钮，将页面上的卡片内容生成一张完整的图片
支持 H5 直接下载 、小程序/App 保存到系统相册
多端兼容，样式还原度 100%

二、第一步：插件市场导入 lime-painter

lime-painter 是 uni-app 生态中一款零配置、可视化、高性能的 canvas 海报绘制插件，完美适配 Vue3/Vue2、小程序/App/H5。

1. 插件市场导入

打开 DCloud 插件市场

点击 导入 HBuilderX，选择你的项目导入即可。

2. 项目中引入组件

在需要使用的页面直接引入，无需全局注册：

javascript 复制代码

<script setup>
// 直接引入插件目录下的组件
import lPainter from '@/uni_modules/lime-painter/components/l-painter/l-painter.vue'
import lPainterView from '@/uni_modules/lime-painter/components/l-painter-view/l-painter-view.vue'
import lPainterImage from '@/uni_modules/lime-painter/components/l-painter-image/l-painter-image.vue'
import lPainterText from '@/uni_modules/lime-painter/components/l-painter-text/l-painter-text.vue'
</script>

三、核心思路：海报绘制

用 lime-painter 复刻一份和页面一模一样的结构
点击下载时，把当前卡片数据传给绘制组件
用 canvas 生成图片
调用下载/保存相册 API

四、页面结构编写

1. 海报绘制区域（隐藏在页面底部）

这部分是真正用来生成图片的，样式和页面完全一致：

javascript1 复制代码

<!-- 海报绘制容器，默认不显示在页面可视区域 -->
<l-painter ref="painter">
  <l-painter-view css="border-radius: 16rpx;overflow: hidden;">
    <!-- 背景图 -->
    <l-painter-view css="text-align:center;background-image:url('bg.png');background-size:cover;">
      
      <!-- 天气图片 -->
      <l-painter-image :src="dataInfos.img" css="width:100%;border-radius:16rpx" />
      
      <!-- 诗词 -->
      <l-painter-text :text="dataInfos.poetry" css="text-align:center;font-size:28rpx;color:#333" />
      
      <!-- 分割线 -->
      <l-painter-view css="width:90%;height:2rpx;background:#e5e5e5;margin:0 auto" />
      
      <!-- 城市 -->
      <l-painter-text :text="`一${dataInfos.city}一`" css="font-size:30rpx" />
      
      <!-- 日期/天气 -->
      <l-painter-text :text="`${dataInfos.date}/${dataInfos.condition}`" css="font-size:26rpx;color:#666" />
      
      <!-- 温度 -->
      <l-painter-text :text="`最高${dataInfos.temp_high}℃ 最低${dataInfos.temp_low}℃`" css="font-size:26rpx" />
    </l-painter-view>
  </l-painter-view>
</l-painter>

五、JS 逻辑：下载与生成图片（核心）

1. 定义数据

js 复制代码

// 绘制海报用的数据
const dataInfos = ref({})
// 绘制组件实例
const painter = ref(null)

2. 下载方法（完整代码）

js 复制代码

const download = (item, index) => {
  // 1. 将当前点击的卡片数据赋值给绘制组件
  dataInfos.value = {
    ...item,
    ...JSON.parse(item.param),
    ...JSON.parse(item.result)
  }

  // 显示加载提示
  uni.showLoading({ title: "海报生成中..." })

  // 2. 等待 DOM 更新完成再生成图片
  nextTick(() => {
    painter.value.canvasToTempFilePathSync({
      fileType: "jpg",
      pathType: 'url', // 关键：必须是 url 才能保存相册
      quality: 1,
      success: (res) => {
        // H5 端：创建a标签下载
        // #ifdef H5
        let a = document.createElement('a')
        a.href = res.tempFilePath
        a.download = '天气海报.jpg'
        a.click()
        uni.hideLoading()
        // #endif

        // 小程序/App 端：保存到相册
        // #ifndef H5
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => {
            uni.hideLoading()
            uni.showToast({ title: "已保存到相册", icon: "none" })
          }
        })
        // #endif
      },
      fail: (err) => {
        console.log("生成失败：", err)
        uni.hideLoading()
      }
    })
  })
}

六、样式优化（保证生成效果与页面一致）

less 复制代码

.result-count-bg {
  min-height: 200rpx;
  background-image: url('你的背景图地址');
  background-size: cover;
  padding: 20rpx;
  border-radius: 16rpx;

  .weather-image {
    width: 100%;
    border-radius: 16rpx;
  }
}

七、关键知识点总结（避坑指南）

1. 必须加 nextTick

数据更新后，必须等待视图渲染完成再生成图片，否则会空白。

2. pathType: 'url'

小程序中 base64 无法保存到相册 ，必须设置 pathType: 'url'。

3. 图片必须加域名白名单

后台配置好 download、upload 域名，否则图片无法绘制。

4. 多端条件编译

H5：a标签下载
小程序/App：uni.saveImageToPhotosAlbum

八、最终效果

结语

使用 lime-painter 可以极低成本实现 uni-app 页面内容生成图片功能，无需手写复杂 canvas 语法，样式直接复制页面即可，还原度极高、稳定性强。

uni-app 实战：使用 lime-painter 实现页面内容一键生成海报并下载