Uniapp简易使用canvas绘制分享海报
使用UniApp Canvas实现分享海报一、分享海报
现在使用 Uniapp 中的 canvas 简单实现下商品的分享海报，附上二维码（这个可以附上各种信息例如分享绑定下单等关系）,开箱即用。
[*]动态生成包含商品信息、用户二维码的分佣海报
[*]一键保存到手机相册
[*]支持App原生分享和小程序分享
[*]打通社交裂变传播路径
注：这里的分享功能用了微信的 showShareImageMenu，会调起朋友分享、朋友圈分享、收藏、保存图片等，会跟页面功能重复，并且使用这个接口记得绑定项目的 appid，否则会报错。
二、技术支持（使用 Uniapp canvas，直接复制进行更改就行）
<template>
<view >
<view >
<canvas canvas-id="productCanvas" :
id="productCanvas"/>
<loading v-if="loading"></loading>
</view>
<view >
<view@tap="shareToFriend">
<view ></view>
<text >发送给朋友</text>
</view>
<view@tap="shareToMoments">
<view ></view>
<text >分享到朋友圈</text>
</view>
<view@tap="collectProduct">
<view ></view>
<text >收藏</text>
</view>
<view@tap="savePoster">
<view ></view>
<text >保存图片</text>
</view>
</view>
</view>
</template>三、性能优化与注意事项
1. 使用问题
[*]Canvas 问题：这里的 canvas 宽高使用固定的px格式，这里没做过多的适配，需要各位自己进行适配，并且绘制的时候 canvas 的背景设置的是白色，因为要作为图片进行保存，如果对其分装为组件的时候要注意层级关系并且白色背景跟 mask 背景和组件背景要做好适配兼容。还有 canvas 顶部的徽章在真机可能没有那么好看，自己再进行优化吧。
[*]模糊问题：使用pixelRatio适配高分屏，上面没做，注释了
[*]文字溢出：这里的文字有做分割，如果过长可能还需进行优化
2. 性能优化建议
[*]预加载网络图片
[*]对绘制操作进行节流控制
[*]使用离屏Canvas处理复杂图形
四、效果展示
五、扩展思路
[*]动态模板：配置不同风格的海报模板
[*]海报审核：对接内容安全API
[*]数据分析：跟踪海报分享转化率
[*]裂变激励：如有是有自己的一些模式的话，可以分享后给予佣金奖励
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]