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

前言

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

话不多说，搞起。

环境

node: 14.17.3

Taro: 3.0.21

Painter: 2.2.2

实现

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

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

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

引入组件包

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

copy
export default {
  // Taro 小程序引用原生小程序组件
  usingComponents: {
    painter: "./components/Painter/painter",
  },
};

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

copy
<template>
  ......
  <painter id="share-post-painter" :use2-d="true" :palette="config" />
</template>

编写 config

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

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

copy
class config {
  width = "500px"; // 图片宽度
  height = "500px"; // 图片高度
  background = ""; // 图片背景
  views = [
    {
      type: "image", // 图片view
      url: "", // 图片view图片地址
      css: {
        top: "", // 距顶定位
        left: "", // 距左定位
        width: "", // 图片view宽度
        height: "", // 图片view高度
      },
    },
    {
      type: "text", // 文字view
      text: "文字", // 文字view内容
      css: {
        top: "", // 距顶定位
        left: "", // 距左定位
        fontSize: "", // 文字大小
        fontWeight: "", // 文字宽度
        align: "", // 文字排版方式
        color: "", // 文字颜色
      },
    },
    {
      type: "qrcode", // 二维码view
      content: "", // 二维码url
      css: {
        bottom: "", // 距底定位
        left: "", // 距左定位
        width: "", // 二维码宽度
        height: "", // 二维码高度
      },
    },
  ];
}

分享图片

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

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