3
收藏
评论

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

本文主要介绍了小程序分享朋友圈时分享海报的制作方法

前言

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

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

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

效果

主要步骤

  1. 把海报样式用标签先写好,方便画图时可以比对
  2. 用canvas进行画图,canvas要注意定好宽高
  3. canvas利用wx.canvasToTempFilePath这个api将canvas转化为图片
  4. 将转化好的图片链接放入image标签里
  5. 再利用wx.saveImageToPhotosAlbum保存图片

坑点

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

  2. 画图的时候要注意尺寸的转化,如果你是用rpx做单位的话,就要对单位进行转化,因为canvas提供的方法都是经px为单位的,所以这一点要注意一下,px转rpx的公式是w/750z2,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

最后一次编辑于  02-22  (未经腾讯允许,不得转载)
复制链接赞 3收藏投诉评论

27 个评论

  • 八月
    八月
    02-22

    不是不允许带二维码....

    不过还是点个赞~

    02-22
    赞同
    回复 2
    • var 友原
      var 友原
      02-25

      这不是二维码,是小程序码,小程序码是ok的

      02-25
      回复
    • 八月
      八月
      02-25回复var 友原

      我擦 为啥我之前带的小程序码不行...好像回复说不能生成带 二维码的小程序  但是那个二维码就是小程序码啊

      02-25
      回复
  • 💊💊💊
    💊💊💊
    02-23

    使用第三方画布绘制的地图  老铁有没有思路怎么生成分享图

    02-23
    赞同
    回复 2
    • var 友原
      var 友原
      02-25

      要生成什么分享图啊

      02-25
      回复
    • 💊💊💊
      💊💊💊
      05-30回复var 友原

      我们是做一个类似足迹地图的页面,引用了第三方的画布,现在需要使用画布来生成足迹地图,貌似没找到很好的方法来用画布生成一个带画布的分享图。

      05-30
      回复
  • 东方小萝卜🐥
    东方小萝卜🐥
    02-25

    Q:实际项目中返回的图片宽高是不固定的,但是canvas画出来的又需要固定宽高,所以分享图会有图片变形的问题

    A:算出图片的宽高之后,通过setData设置canvas的宽高,然后绘制图像

    02-25
    赞同
    回复 6
    • var 友原
      var 友原
      02-25

      没用的,canvas已经固定了就那么大,而且你不知道返回的图片有多大,如果只是一个小图标呢,或者是一张超大的图片

      02-25
      回复
    • 东方小萝卜🐥
      东方小萝卜🐥
      02-25回复var 友原

      downloadImage getImageInfo可以得到图片的宽高。。我做过这个需求

      02-25
      1
      回复
    • var 友原
      var 友原
      02-25回复东方小萝卜🐥

      你还是没有理解我的意思,我的意思是我容器的宽高都是固定的,不能改的,你图片无论多大都只在这个大小的容器里显示,所以才会有变形的问题

      02-25
      回复
    • 东方小萝卜🐥
      东方小萝卜🐥
      02-27回复var 友原

      你不能按比例缩放吗?还是没理解你的诉求,反正无论怎样可以实现图片不变形。

      02-27
      回复
    • var 友原
      var 友原
      02-27回复东方小萝卜🐥


      给你画个图应该能理解了吧,绿色边框的是canvas,固定宽高不能改,蓝色背景的是图片也是固定宽高,现在的图片是宽比高大,如果返回的图片是高比宽大,就会变形,没办法用获取图片宽高的api去设定宽高,像我前面说的,如果返回的图片是一个图标,宽度只有10*10那不就乱了。我目前的做法是将返回的图片用接口去裁剪成想要的比例

      02-27
      回复
    查看更多(1)
  • Peter👊
    Peter👊
    02-25

    不需要image标签,之前公司一个技术点,要我研究下,我搞定了,给别人拿去黏贴了。

    02-25
    赞同
    回复 8
    • var 友原
      var 友原
      02-25

      不用image怎么保存图片

      02-25
      回复
    • Peter👊
      Peter👊
      02-25回复var 友原

      canvas可以生成图片

      02-25
      回复
    • Peter👊
      Peter👊
      02-25回复var 友原


      可以拿到tempFilePath,然后用这个


      02-25
      回复
    • var 友原
      var 友原
      02-25

      不太友好,而且保存之后在相册里找不到

      02-25
      回复
    • Peter👊
      Peter👊
      02-25回复var 友原

      这样啊,我手机第一张图片就是刚刚保存到照片,清晰度啥的都还行。

      02-25
      回复
    查看更多(3)
  • 彭涛 Chris
    彭涛 Chris
    02-27

    可以试试这个开源库,图片宽高啥的一些坑,它都有解决,https://github.com/Kujiale-Mobile/painter

    02-27
    赞同
    回复 1
  • JustinYi922
    JustinYi922
    08-08

    你们有遇到从其他页面到这个分享海报的页面,页面会卡一下。等加载完数据,这个页面才全部显示


    08-08
    赞同
    回复 1
    • var 友原
      var 友原
      08-08
      不懂你的意思
      08-08
      回复
  • 起步
    起步
    08-30

    老铁  你们这个生成图片的时间长不长啊 为啥我的时间很长啊

    08-30
    赞同
    回复