小程序生成分享海报图片并保存相册

前言

最近开发的小程序都有分享需求，功能大体为点击分享按钮，或主动生成海报后，用户操作保存对应海报为图片实现分享。以下是具体实现。

最终生成效果如图：

一、普通二维码生成

此处主要是生成工具库来生成普通二维码，如果要生成小程序码，只能通过后台接口调用开放API实现，且需要小程序已上线发布才能通过微信扫一扫进入小程序（废话不多说了。。。。）

• 工具库：weapp.qrcode.min.js

template

<template>
	<view class="page">
		<canvas
          id="canvas"
          style="width: 160rpx; height: 160rpx"
          canvas-id="canvas"
        ></canvas>
	</view>
</template>

script

// 调用很简单
const drawQrcode = require("@/lib/weapp.qrcode.min.js)
export default {
   
	data(){
   return {
   }};
	onLoad(){
   
		this.drawCode();
	}
	methods:{
   
		drawCode(){
   
			drawQrcode({
   
				text: `二维码内容`,
				canvasId: "canvas",
				width: 80,
				height: 80
			})
			console.log("二维码生成")
		}
	}
}

二、生成海报图片并保存

生成海报分为两步
一是海报预览弹窗（这个是小程序内页弹窗所以直接代码编写就好）
二是通过painter将元素生成为图片保存到本地。以下代码只描述重点部分，全部代码请查看源码文件。
这里用到了painter这个组件库，这是一个通过配置json就直接生成图片的工具库，开源地址

1、引入依赖组件

这里引用了painter组件来生成（懒人不想造轮子- _ -)。因为是微信原生编写，所以放在根目录下的wxcomponents中

目录如下：

|__ wxcomponents
	|__ painter
		|__ painter.wxml
		|__ painter.wxss
		|__painter.json
		|__painter.js
		|__ ...

page.json中引入微信组件

{
   
	"globalStyle":{
   
		"usingComponents": {
   
			"painter": "/wxcomponents/painter/painter"
		 }
	}
}

2、生成海报图片

这里新建了两个文件，一个share.vue用于在小程序中直接展示海报的样式，一个share.js是配置painter海报的数据源

• share.vue

<template>
  <view class="share" v-if="visible">
    <view class="share-content">
      <view class="share-chart-wrap"