业务场景
二轮充电业务中,用户充电完成后在订单详情页展示订单相关信息,用户点击分享按钮唤起微信小程序分享菜单,将生成的图片海报分享给微信好友或者下载到本地,好友可通过扫描海报中的二维码加群领取优惠。
使用场景及功能:微信小程序 生成海报图片 分享好友 下载图片
使用技术: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: