使用taro+canvas实现微信小程序的图片分享功能 | 京东云技术团队

业务场景

二轮充电业务中，用户充电完成后在订单详情页展示订单相关信息，用户点击分享按钮唤起微信小程序分享菜单，将生成的图片海报分享给微信好友或者下载到本地，好友可通过扫描海报中的二维码加群领取优惠。

使用场景及功能：微信小程序 生成海报图片 分享好友 下载图片

使用技术：Taro vue vant canvas

实现效果图

重点步骤拆分

1、封装一个海报分享组件 poster-share.vue

2、用canvas画图，将背景图、费用、二维码等信息绘制在一张图上，其中费用、二维码是动态获取的

3、生成一张本地缓存图片

4、唤起微信分享功能，实现分享和下载功能

重点步骤有了，那么就开干吧！

核心代码实现

1、模版部分

需要一个画布dom用来绘制图片，一个用来存放生成图片的dom

问：canvasId为什么需要动态生成呢？

答：避免一个页面中使用多个组件引起的canvasId重复问题

<template>
  <div class="poster-share__content">
    <!-- canvas生成的海报图片 -->
    <img
      v-if="posterImg"
      class="poster-share__content--img"
      mode="aspectFit"
      :src="posterImg"
    >
    <!-- 分享海报canvas绘制部分 -->
    <canvas
      class="poster-share__content--cvs"
      :canvas-id="canvasId"
    ></canvas>
  </div>
</template>

2、样式部分

该业务场景下，不能让用户看到画布，但是设置canvas的display为none将不能进行绘制，会报如下错误，导致绘制失败。

实现方式：采用定位的方式，将canvas定位到可视区域外，具体代码如下。

.poster-share__content {
  position: absolute;
  right: -9999px;
  top: -9999px;
  width: 560px;
  height: 852px;
  opacity: 0;