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

这篇具有很好参考价值的文章主要介绍了uni-app：使用 Painter 在微信小程序将当前页面保存为图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1 先看效果

手机截屏
uniapp 页面保存为图片,微信小程序,uni-app

Painter 实现
uniapp 页面保存为图片,微信小程序,uni-app

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文章来源地址https://www.toymoban.com/news/detail-517146.html

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