小程序生成海报 微信小程序海报分享功能实现-手机电子游戏网址

小程序开发

2021-06-12

  我们在开发小程序项目之前,就需要考虑如何提高小程序的用户和使用,这中间就涉及到了小程序的运营环节,因此在开发过程中,经常会看到生成海报功能,利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户,今天厦门在乎科技为大家带来微信小程序海报分享功能实现,一起来了解一下吧。

小程序生成海报 微信小程序海报分享功能实现


  一、分析如何实现

  相信大家应该都会有类似的迷惑,就是如何按照产品设计的那样绘制成海报,其实当时我也是不知道如何下手,认真想了下得通过canvas绘制成图片,这样用户保存这个图片到相册,就可以分享到朋友圈了。但是要绘制的图片上面不仅有文字还有数字、图片、二维码等且都是活的,这个要怎么动态生成呢。认真想了下,需要一点一点的将文字和数字,背景图绘制到画布上去,这样通过api最终合成一个图片导出到手机相册中。

  二、需要解决的问题

  1、二维码的动态获取和绘制(包括如何生成小程序二维码、公众号二维码、打开网页二维码)

  2、背景图如何绘制,获取图片信息

  3、将绘制完成的图片保存到本地相册

  4、处理用户是否取消授权保存到相册

  三、实现步骤

  这里我具体写下围绕上面所提出的问题,描述大概实现的过程

  ①首先创建canvas画布,我把画布定位设成负的,是为了不让它显示在页面上,是因为我尝试把canvas通过判断条件动态的显示和隐藏,在绘制的时候会出现问题,所以采用了这种方法,这里还有一定要设置画布的大小。

       

  ②创建好画布之后,先绘制背景图,因为背景图我是放在本地,所以获取

组件 canvas-id 属性,通过createcanvascontext创建canvas的绘图上下文 canvascontext 对象。使用drawimage绘制图像到画布,第一个参数是图片的本地地址,后面两个参数是图像相对画布左上角位置的x轴和y轴,最后两个参数是设置图像的宽高。

       const ctx = wx.createcanvascontext('mycanvas')

       ctx.drawimage('/img/study/shareimg.png', 0, 0, 690, 1085)

  ③创建好背景图后,在背景图上绘制头像,文字和数字。通过getimageinfo获取头像的信息,这里需要注意下在获取的网络图片要先配置download域名才能生效,具体在小程序后台设置里配置。

  获取头像地址,首先量取头像在画布中的大小,和x轴y轴的坐标,这里的result[0]是我用promise封装返回的一个图片地址

  let headimg = new promise(function (resolve) {

  wx.getimageinfo({

  src: `${app.globaldata.baseurl2}${that.data.currentchildren.headimg}`,

  success: function (res) {

  resolve(res.path)

  },

  fail: function (err) {

  console.log(err)

  wx.showtoast({

  title: '网络错误请重试',

  icon: 'loading'

  })

  }

  })

  })

  let avatarurl_width = 60, //绘制的头像宽度

  avatarurl_heigth = 60, //绘制的头像高度

  avatarurl_x = 28, //绘制的头像在画布上的位置

  avatarurl_y = 36; //绘制的头像在画布上的位置

  ctx.save(); // 先保存状态 已便于画完圆再用

  ctx.beginpath(); //开始绘制

  //先画个圆 前两个参数确定了圆心 (x,y) 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false,即顺时针

  ctx.arc(avatarurl_width / 2 avatarurl_x, avatarurl_heigth / 2 avatarurl_y, avatarurl_width / 2, 0, math.pi * 2, false);

  ctx.clip(); //画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内

  ctx.drawimage(result[0], avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片

小程序生成海报 微信小程序海报分享功能实现


  ④绘制公众号二维码,和获取头像是一样的,也是先通过接口返回图片网络地址,然后再通过getimageinfo获取公众号二维码图片信息

  ⑤如何绘制小程序码,具体手机电子游戏网址官网文档也给出生成无限小程序码接口,通过生成的小程序可以打开任意一个小程序页面,并且二维码永久有效,具体调用哪个小程序二维码接口有不同的应用场景,具体可以看下官方文档怎么说的,也就是说前端通过传递参数调取后端接口返回的小程序码,然后绘制在画布上(和上面写的绘制头像和公众号二维码一样的)

  ctx.drawimage('小程序码的本地地址', x轴, y轴, 宽, 高)

  ⑥最终绘制完把canvas画布转成图片并返回图片地址

  wx.canvastotempfilepath({

  canvasid: 'mycanvas',

  success: function (res) {

  canvastotempfilepath = res.tempfilepath // 返回的图片地址保存到一个全局变量里

  that.setdata({

  showshareimg: true

  })

  wx.showtoast({

  title: '绘制成功',

  })

  },

  fail: function () {

  wx.showtoast({

  title: '绘制失败',

  })

  },

  complete: function () {

  wx.hideloading()

  wx.hidetoast()

  }

  })

  ⑦保存到系统相册;先判断用户是否开启用户授权相册,处理不同情况下的结果。比如用户如果按照正常逻辑授权是没问题的,但是有的用户如果点击了取消授权该如何处理,如果不处理会出现一定的问题。所以当用户点击取消授权之后,来个弹框提示,当它再次点击的时候,主动跳到设置引导用户去开启授权,从而达到保存到相册分享朋友圈的目的。

小程序生成海报 微信小程序海报分享功能实现


  以上就是今天为大家带来的关于“小程序生成海报 微信小程序海报分享功能实现”全部内容,整体来说,通过生成海报分享功能,大大提高了小程序的用户和产品的转化,想要了解更多关于小程序海报生成的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「在乎科技」专业项目经理为您提供产品咨询和项目报价!

contact us

联系手机电子游戏网址

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区湖滨南路388号国贸大厦34d单元

公司地址