Github 地址：https://github.com/ChrisChan13/wxml2canvas-2d

介绍

当前，众多小程序的多处场景都需要能够生成分享图便于用户进行二次传播，从而提升小程序的传播率以及加强品牌效应。
比较简单的分享图，如寥寥几行文字和一张小程序码，可以通过微信的 Canvas API 绘制。旧版 Canvas API 绘制过程繁琐，且每次绘制都需要调用 draw 方法，一不小心代码就写了上百行。
新版 Canvas API 基本与 Web Canvas 对齐，使得开发效率提高、性能得到优化。虽然免去了很多繁琐操作，但面对拥有元素众多、结构复杂的分享图片，依然解决不了代码冗长的问题。
目前开源的一些小程序图片生成方案，有的年久失修、有的依然使用旧版 Canvas API、有的使用方式不够简便，于是便有了开发 wxml2canvas-2d 的想法。
wxml2canvas-2d 的图片生成方式简单直观：首先在 wxml 页面上编写元素结构，其次在 wxss 中编写元素样式，最后调用 wxml2canvas-2d 的相关方法即可生成所需的分享图片。
wxml2canvas-2d 会通过 class 类名查询元素节点的 computedStyle 和节点属性，从而将元素节点绘制到画布上。这样做的好处是在编写 wxml 结构以及样式时，可以直观的看见样式的变化，方便调整。当然也有坏处，这个用来生成图片的“wxml 模板”，必须存在于页面上。若需要隐藏这个“模板”，只可用定位将其移至屏幕外，不可以使用 wx:if 或 hidden 隐藏。
wxml2canvas-2d 已经支持大部分常用的 CSS 属性，等你来测~

示例

克隆此 Github 仓库，运行 npm i & npm run dev，将 miniprogram_dev 文件夹导入微信开发者工具

效果预览

小程序内容：

生成的图片：

安装

npm

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装
npm i wxml2canvas-2d -S --production

构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

使用

1. 在页面配置中引入 wxml2canvas-2d ;

{
  "usingComponents": {
    "wxml2canvas": "wxml2canvas-2d"
  }
}

2. 在页面中编写 wxml 结构，将要生成画布内容的根节点用名为 wxml2canvas-container 的样式类名称标记，将该根节点内部需要生成画布内容的节点用名为 wxml2canvas-item 的样式类名称标记（文字类节点需在对应节点声明 data-text 属性，并传入文字内容）。上述两个样式类名称可以自定义，只需将对应名称传入 wxml2canvas 组件的对应属性参数即可；

<!-- pages/index/index.wxml -->
<view class="wxml2canvas-container box">
  <view class="wxml2canvas-item title" data-text="测试标题">测试标题</view>
  <image class="wxml2canvas-item image" src="/your-image-path.png" />
  <view class="wxml2canvas-item content" data-text="测试内容，长文本。。">测试内容，长文本。。</view>
</view>
<button catchtap="generateSharingCard">生成画布内容</button>
<wxml2canvas id="wxml2canvas" />

3. 补充各个节点样式；

/* pages/index/index.wxss */
.box { /* 根节点（容器）的样式 */ }
.title { /* 标题的样式 */ }
.image { /* 图片的样式 */ }
.content { /* 内容的样式 */ }

4. 依据 wxml 结构以及 css 样式，生成画布内容，并将生成结果导出。

// pages/index/index.js
Page({
  async generateSharingCard() {
    const canvas = this.selectComponent('#wxml2canvas');
    await canvas.draw();
    const filePath = await canvas.toTempFilePath();
    wx.previewImage({
      urls: [filePath],
    });
  },
});

更多内容及文档 点击此处 前往查看！如果有好的建议或者想法，也欢迎提交 Issue 或 PR~