Uniapp简易使用canvas绘制分享海报

使用UniApp Canvas实现分享海报

一、分享海报

现在使用 Uniapp 中的 canvas 简单实现下商品的分享海报，附上二维码（这个可以附上各种信息例如分享绑定下单等关系）,开箱即用。

• 动态生成包含商品信息、用户二维码的分佣海报
  
• 一键保存到手机相册
  
• 支持App原生分享和小程序分享
  
• 打通社交裂变传播路径
  

注：这里的分享功能用了微信的 showShareImageMenu，会调起朋友分享、朋友圈分享、收藏、保存图片等，会跟页面功能重复，并且使用这个接口记得绑定项目的 appid，否则会报错。

二、技术支持（使用 Uniapp canvas，直接复制进行更改就行）

1. <template>
2.         <view >
3.                
4.                 <view >
5.                         <canvas canvas-id="productCanvas" :
6.                                 id="productCanvas"  />
7.                         <loading v-if="loading"></loading>
8.                 </view>
10.                
11.                 <view >
12.                         <view  @tap="shareToFriend">
13.                                 <view ></view>
14.                                 <text >发送给朋友</text>
15.                         </view>
16.                         <view  @tap="shareToMoments">
17.                                 <view ></view>
18.                                 <text >分享到朋友圈</text>
19.                         </view>
20.                         <view  @tap="collectProduct">
21.                                 <view ></view>
22.                                 <text >收藏</text>
23.                         </view>
24.                         <view  @tap="savePoster">
25.                                 <view ></view>
26.                                 <text >保存图片</text>
27.                         </view>
28.                 </view>
31.         </view>
32. </template>

复制代码

三、性能优化与注意事项

1. 使用问题

• Canvas 问题：这里的 canvas 宽高使用固定的px格式，这里没做过多的适配，需要各位自己进行适配，并且绘制的时候 canvas 的背景设置的是白色，因为要作为图片进行保存，如果对其分装为组件的时候要注意层级关系并且白色背景跟 mask 背景和组件背景要做好适配兼容。还有 canvas 顶部的徽章在真机可能没有那么好看，自己再进行优化吧。
  
• 模糊问题：使用pixelRatio适配高分屏，上面没做，注释了
  
• 文字溢出：这里的文字有做分割，如果过长可能还需进行优化
  

2. 性能优化建议

• 预加载网络图片
  
• 对绘制操作进行节流控制
  
• 使用离屏Canvas处理复杂图形
  

四、效果展示

五、扩展思路

• 动态模板：配置不同风格的海报模板
  
• 海报审核：对接内容安全API
  
• 数据分析：跟踪海报分享转化率
  
• 裂变激励：如有是有自己的一些模式的话，可以分享后给予佣金奖励
  

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除