效果
说明:
canvas官方很早已经发声不再维护了,所以很多方法都已经不再适用。目前官方推荐适用canvas2d来绘制生成海报。
canvas2d
来绘制海报:
canvas2d的优点:
例如:
- 不需要先预下载网络图片再绘制,前端只需要调用网络图片即可。
- 新版canvas2d海报,官方文档比较乱,开发起来难度大。
- anvas2d生成海报效率高,资源开资少,性能强。
- 普通canvas生成海报比canvas2d稍慢。
- 通过网上方法,进行大量的开发实现,最后封装成的组件
- 开发完成后,发现拼多多、淘宝、京东等流行商城都在使用这样子的分享海报。
- 调用组件,只需要传参数即可,简单高效。
- 不需要的样式可以调成自己特色。
实现的方法:
1、在相应页面json调用
"usingComponents": {
"share2d": "/Component/share2d/share2d"
}
2、wxml页面
<share2d id="share2d" bind:canvas_return="canvas_return" goods_data="{{share2d_goods_data}}" goods_img="{{combo.master_img_list[0]}}" share_type="combo"></share2d><!--胶囊固定转发海报-->
3、js页面调用绘制方法
const share2d = that.selectComponent('#share2d');
share2d.getposter();
4、绘制完海报后,返回图片路径
canvas_return(e){
console.log(e.detail)
this.setData({
canvas_return_img:e.detail
})
},
总结:
喜欢的小伙可以到资源里面下载 资源下载