收藏
评论

【技巧】利用canvas生成朋友圈分享海报

大家好,上次给大家讲了函数防抖和函数节流https://developers.weixin.qq.com/community/develop/doc/0002c892fb80a8326bf70f56d5bc04

今天给大家分享一下利用canvas生成朋友圈分享海报


由于小程序的限制,我们不能很方便地在微信内直接分享小程序到朋友圈,所以普遍的做法是生成一张带有小程序分享码的分享海报,再将海报保存到手机相册,有两种方法可以生成分享海报,第一种是让后台生成然后返回图片链接,这一种方法比较简单,只需要传后台所需要的参数就行了,今天给大家介绍的是第二种方法,用canvas生成分享海报。


首先先来看下效果:



主要步骤:

1. 把海报样式用标签先写好,方便画图时可以比对

2. 用canvas进行画图,canvas要注意定好宽高

3. canvas利用wx.canvasToTempFilePath这个api将canvas转化为图片

4. 将转化好的图片链接放入image标签里

5. 再利用wx.saveImageToPhotosAlbum保存图片


这里有几个坑点需要注意下:


1. 用canvas进行画图的时候要注意画出来的图的大小一定要是你用标签写好那个样式的两倍大小,比如你的海报大小是400*600的大小,那你用canvas画的时候大小就要是800*1200,宽高可以写在样式里,如果你画出来的图跟你海报图是一样的大小的话生成的图片是会很模糊的,所以才需要放大两倍。


2. 画图的时候要注意尺寸的转化,如果你是用rpx做单位的话,就要对单位进行转化,因为canvas提供的方法都是经px为单位的,所以这一点要注意一下,px转rpx的公式是w/750*z*2,w是手机屏幕宽度screenWidth,可以通过wx.getSystemInfo获取,z是你需要画图的单位,2就是乘以两倍大小。


3. 图片来源问题,因为canvas不支持网络图片画图,所以你的图片要么是固定的,如果不是固定的,那就要用wx.downloadFile下载后得到一个临时路径才行


4. 小程序码问题,小程序需要后台请求接口后返回一个二进制的图片,因为二进制图片canvas也是不支持的,所以也是要用wx.downloadFile下载后得到一个临时路径,或者可以叫后台直接返回一个小程序码的路径给你


5. 这里保存的时候是有个授权提醒的,如果拒绝的话再次点击就没有反应了,所以这里我做了一个判断是否有授权的,如果没有就弹窗提醒,确认的话会打开设置页面,确认授权后再次返回就行了,这里有个坑注意下,就是之前拒绝后再进入设置页面确认授权返回页面时保存图片会不成功,官方还没解决,我是加了个setTimeOut处理的,详情可以看这里https://developers.weixin.qq.com/community/develop/doc/000c46600780f0fa68d7eac345a400


代码实现:


这里图片我先用的是网上的链接,实际项目中是后台返回的数据,这个可以自行处理,这里只是为了演示方便,生成临时路径的方法我这里是分别定义了一个方法,其实可以合成一个方法的,只是生成小程序码时如果要传入参数要注意一下。

绘图方法是drawImg,这里截一部分,详细的可以看代码片段



不足:

由于在实际项目中返回的图片宽高是不固定的,但是canvas画出来的又需要固定宽高,所以分享图会有图片变形的问题,使用drawImage里的参数也不能解决,如果各位有比较好的方案可以一起讨论一下。


代码片段:

https://developers.weixin.qq.com/s/3pcsjDmS7M5Y


                                                                                                                                                                                                             系甘先,得闲饮茶

最后一次编辑于  2019-01-23
赞 6
收藏

10 个评论

  • sheng
    sheng
    2019-02-13

    代码片段  https://developers.weixin.qq.com/s/hhpCs9me7i65  

    2019-02-13
    赞同 2
    回复
  • 海里鱼
    海里鱼
    2019-03-14

    海报生成很慢,尤其是某些机型,比如小米

    2019-03-14
    赞同
    回复
  • 克莱
    克莱
    2019-03-14

    楼主 我遇到 授权 取消 后 进入到手机系统授权的页面 但是里面什么都没有 就显示个 没有任何授权信息 为什么呢

    2019-03-14
    赞同
    回复 2
    • var 友原
      var 友原
      2019-03-14

      从哪里进入手机系统授权的,要通过openSetting进入才行

      2019-03-14
      回复
    • 克莱
      克莱
      2019-03-14

      通过openSetting进入  现在调的 安卓 有授权列表了  ios没有

      2019-03-14
      回复
  • 海里鱼
    海里鱼
    2019-03-12

    你好,我想问一下,就是这个生成海报的时候,会偶尔没有成功,报TypeError: Cannot read property 'replace' of null

    是在找不到原因

    2019-03-12
    赞同
    回复 5
    • var 友原
      var 友原
      2019-03-13

      生成海报的时候要在draw的回调里调用生成图片的那个api的,不然是有可能失败的

      2019-03-13
      回复
    • 海里鱼
      海里鱼
      2019-03-13

      好的,谢啦

      2019-03-13
      回复
    • 静享华年
      静享华年
      2019-03-20回复var 友原

      官方对draw的回调说明很简短,我看了一些例子,有个问题一直想不明白,想问一下楼主,draw的第一个参数false 或true,到底是什么意思,有何不同呢?

      2019-03-20
      回复
    • var 友原
      var 友原
      2019-03-20回复静享华年


      总的来说就是画的时候要不要清空上一次画的

      2019-03-20
      回复
    • 静享华年
      静享华年
      2019-03-20回复var 友原

      原来是有说明的啊,没有找到,谢谢了

      2019-03-20
      回复
  • Lynn
    Lynn
    2019-03-10

    大神,你这个生成的变形的问题,有解决吗?

    2019-03-10
    赞同
    回复 1
    • var 友原
      var 友原
      2019-03-11

      最后我是通过我们后端接口去动态裁剪图片的,前端这边解决不了

      2019-03-11
      回复
  • 苗冲
    苗冲
    2019-03-02

    从上往下看 第一张图 变形很严重啊~

    2019-03-02
    赞同
    回复
  • 雅X共赏
    雅X共赏
    2019-03-01

    绘制不固定宽高的图片是个问题,现在小程序好像没有办法得到一张图片的尺寸,无论是本地的还是远程的

    2019-03-01
    赞同
    回复 2
  • 勤
    2019-02-18

    我也遇到这个问题。小程序中css的单位为rpx,但是js中canvas的代码默认的单位是px,px不会根据屏幕分辨率改变,比较坑爹。现在找到解决方案了吗?分享下。


    2019-02-18
    赞同
    回复 1
    • 静享华年
      静享华年
      2019-03-20

      楼主也提到了,可以通过wx.getSystemInfo获取屏幕宽高(单位是px),但是微信小程序无论什么机型,屏幕宽度都是750rpx,因此你可以做个rpx和px之间的单位换算,问题就解决了

      2019-03-20
      回复
  • 仙森ღ₅₂₀¹³¹⁴
    仙森ღ₅₂₀¹³¹⁴
    2019-02-11

    https://www.jianshu.com/p/fdfd8ca4bfec

    2019-02-11
    赞同
    回复
  • 连胜
    连胜
    2019-01-24

    先点个赞,canvas生成分享图,确实不错

    2019-01-24
    赞同
    回复
登录 后发表内容