uni-app：使用 Painter 在微信小程序将当前页面保存为图片

最新推荐文章于 2024-09-13 21:32:42 发布

小浮夏

最新推荐文章于 2024-09-13 21:32:42 发布

阅读量3.4k

点赞数 1

文章标签：微信小程序 uni-app

本文链接：https://blog.csdn.net/qq_44810980/article/details/126949869

版权

本文介绍了如何在uni-app中利用Painter组件实现在微信小程序中将当前页面保存为图片。首先展示了效果，然后详细说明了两种实现方法：直接使用Painter组件和通过Canvas手动绘制。提供了代码模板，包括data、methods和computed部分，帮助开发者快速理解和应用。

摘要由CSDN通过智能技术生成

1 先看效果

手机截屏
在这里插入图片描述

Painter 实现
在这里插入图片描述

2 如何实现

方式一：Painter

Painter 是一个微信小程序组件，具体介绍和 API 请参考：GitHub文档。

在 GitHub 下载下来之后只需要将 components 下的 painter 文件夹放到项目根目录下的 wxcomponents 文件夹即可。然后就是如何在 uni-app 中使用微信小程序形式的组件，其实很简单，参考官方文档：小程序自定义组件支持。

方式二：Canvas

当然也可以使用 Canvas 来实现上述效果，因为 Painter 就是基于 Canvas 封装的。但使用 Canvas 就显得太过于麻烦了，具体如何实现各位可以去网上搜索一下，因为我也没有实现过。

3 代码演示

template

<!-- 
  scaleRatio：缩放比，会在传入的 palette 中统一乘以该缩放比，作用和 widthPixels 类似，所以不要同时使用。使用 2 是为了使图片更加清晰，微信小程序中 px 和 rpx 刚好也是 2 倍关系
  palette：静态模板。见下文 computed 中的 palette
-->
<painter :scaleRatio="2" :palette="palette" @imgOK="imgOK"></painter>
<button @tap="saveImg"></button>

data

painterStyle: {
   
  rect: {
   
    width: '710rpx',
    left: '20rpx',
    color: '#fff',
    borderRadius: '16rpx'
  },
  textLeft: {
   
    left: '40rpx',
    fontSize: '28rpx'