微信小程序新版canvas2d海报绘制(教你轻松搞定)

效果

微信小程序新版canvas2d海报绘制(教你轻松搞定)_第1张图片微信小程序新版canvas2d海报绘制(教你轻松搞定)_第2张图片

说明:

canvas官方很早已经发声不再维护了,所以很多方法都已经不再适用。目前官方推荐适用canvas2d来绘制生成海报。


canvas2d来绘制海报

canvas2d的优点:

例如:

  1. 不需要先预下载网络图片再绘制,前端只需要调用网络图片即可。
  2. 新版canvas2d海报,官方文档比较乱,开发起来难度大。
  3. anvas2d生成海报效率高,资源开资少,性能强。
  4. 普通canvas生成海报比canvas2d稍慢。
  5. 通过网上方法,进行大量的开发实现,最后封装成的组件
  6.  开发完成后,发现拼多多、淘宝、京东等流行商城都在使用这样子的分享海报。
  7. 调用组件,只需要传参数即可,简单高效。
  8. 不需要的样式可以调成自己特色。

实现的方法:

1、在相应页面json调用

"usingComponents": {
    "share2d": "/Component/share2d/share2d"
  }

2、wxml页面

3、js页面调用绘制方法

const share2d = that.selectComponent('#share2d');
share2d.getposter();

4、绘制完海报后,返回图片路径

canvas_return(e){
    console.log(e.detail)
    this.setData({
      canvas_return_img:e.detail
    })
 },

总结:

喜欢的小伙可以到资源里面下载   资源下载

你可能感兴趣的:(微信小程序,微信小程序,小程序)