Taro 小程序引入 Painter 实现动态生成图片

前言

分享给用户一个二维码图片，这是一个很简单的功能，但因为这是小程序环境，且涉及Canvas，那就不简单了。

话不多说，搞起。

环境

node: 14.17.3

Taro: 3.0.21

Painter: 2.2.2

实现

npm 社区的理念就是不造重复轮子，而我身体力行的实践着这个理念。花了半个小时，找到一个可以用来生成图片的包，Painter。

这个包就和echarts一样，难点就是繁琐的配置，但是上手以后，意外的简单好用。

我只介绍最基本的用法，如果有其他需求，请移步Painter 文档。

引入组件包

我这里引入的原生小程序版本的，因为我对npm包在小程序的表现存在一定质疑。

1export default {
2  // Taro 小程序引用原生小程序组件
3  usingComponents: {
4    painter: "./components/Painter/painter",
5  },
6};

引入以后，直接调用就可以了，别忘了给它一个独一无二的id。

1<template>
2  ......
3  <painter id="share-post-painter" :use2-d="true" :palette="config" />
4</template>

编写 config

我会介绍几个常用的配置属性，帮助快速上手。

其实这个包的理念很像搭积木，就是先打一个底座，然后把你要放上去的元素都化为一个个积木块，再按照你的想法组装到对应的位置。

1class config {
2  width = "500px"; // 图片宽度
3  height = "500px"; // 图片高度
4  background = ""; // 图片背景
5  views = [
6    {
7      type: "image", // 图片view
8      url: "", // 图片view图片地址
9      css: {
10        top: "", // 距顶定位
11        left: "", // 距左定位
12        width: "", // 图片view宽度
13        height: "", // 图片view高度
14      },
15    },
16    {
17      type: "text", // 文字view
18      text: "文字", // 文字view内容
19      css: {
20        top: "", // 距顶定位
21        left: "", // 距左定位
22        fontSize: "", // 文字大小
23        fontWeight: "", // 文字宽度
24        align: "", // 文字排版方式
25        color: "", // 文字颜色
26      },
27    },
28    {
29      type: "qrcode", // 二维码view
30      content: "", // 二维码url
31      css: {
32        bottom: "", // 距底定位
33        left: "", // 距左定位
34        width: "", // 二维码宽度
35        height: "", // 二维码高度
36      },
37    },
38  ];
39}

分享图片

等组件直接渲染完成，他也会在本地存储临时图片地址，这个时候直接获取就行了。

1const share = () => {
2  // 获取当前页面实例，可以使用小程序页面实例的 selectComponent API 获取第三方原生组件的实例
3  const { page } = Taro.getCurrentInstance();
4  // 获取painter组件实例
5  const refPainter = page.selectComponent("#share-post-painter");
6  // 获取painter组件实例中的本地图片地址
7  wx.showShareImageMenu({
8    path: refPainter.data.picUrl,
9  });
10};