uniapp开发微信小程序使用painter将页面转换为图片并保存到本地相册

引言

我使用到painter的原因是，在uniapp开发微信小程序时，需要将一个页面的内容转换成图片保存到本地相册。
起初在网上找到很多都是在uniapp中使用 html2canvas 将网页转换成图片再jspdf将图片转换为pdf，但是这种方式在小程序环境不支持，只在h5环境下适用，当然这个方式是可行的，可以使用webview将h5将页面嵌入到微信小程序中，可我这个整体模块已经在微信小程序实现了，时间上也不允许我重新再用h5开发，所以就使用painter方式，将微信小程序页面转换成图片。

一、painter是什么

painter是一款微信小程序插件

painter github 网址：https://github.com/Kujiale-Mobile/Painter
下图是官网自己对painter的介绍。

二、painter的应用场景

1.社交分享：开发者可以把用户的个人信息、活动页面等转换为图片，用户可以将这些图片保存到本地后分享到朋友圈，QQ空间等社交平台。

2.电商推广：电商平台可以把当前商品详情页转成图片，提供给用户分享到社交平台上，实现商品推广。

3.数据可视化：某些需要展现大量数据，或者复杂数据的场景，可以将数据以图表的形式展示出来，然后使用painter将这些数据图表转换为图片，提供给用户下载使用。

4.截图保存：例如问答、短篇小说、教程等类型的小程序，可一键截图保存整页内容。

5.生成个性化海报：如把用户的昵称，头像，成就等生成一张个性化的海报提供给用户保存，增强用户体验。

三、uniapp中自定义组件引用painter

uniapp中引用小程序自定义组件的方式
上面链接是官方教程如何在uniapp中引入自定义组件，我这里简单记录一下在引入微信小程序的自定义组件painter的方式。

1. 下载painter

painter下载地址

下载下来之后，找到compontents文件夹下的painter文件夹，这个就是我们要使用的painter组件。

2. 在项目根目录新建wxcomponents 文件夹，将下载的painter文件夹拷贝到该目录中

┌─wxcomponents                  微信小程序自定义组件存放目录
│   └──painter                   微信小程序自定义组件
│		├─painter.js
│		├─painter.wxml
│		├─painter.json
│		└─lib
├─pages
│  └─index
│		└─index.vue
│
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json

3. 在 pages.json 对应页面的 style -> usingComponents 引入组件：

// #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
	"usingComponents": {
   
		"painter": "/wxcomponents/painter/painter"
	}
// #endif

4. 然后就可以在刚配置的页面中使用painter了

    <painter name="合同签订" :scaleRatio="2" :palette="palette" @imgOK="imgOK"
      customStyle="position:fixed;top:-9999rpx"></painter>

四、painter的基本用法

这是官网的介绍：

下面是我使用时用的一个简单的demo
生成的图片效果如下：

代码如下：

• template

<painter name="合同签订" :scaleRatio="2" :palette