E企盈营销工具技术服务商 热线:4006-838-530

小程序如何生成海报分享朋友圈

E企盈直播平台营销卖货系统

摘要: 小程序开发必备技能啊…原文:小程序如何生成海报分享朋友圈作者:小白Fundebug经授权转载,版权归原作者所有。项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。需求利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。生成的海报如下:需求分析1、利用小程序官方提供的api可以直接分享转发到微信群打开小程序2、利用小程序生成海报保存图片到相册分享到朋友圈,用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的实现方案一、分析如何实现相信大家应该都会有类似的迷惑,就是如何按照产品设计的那样绘制成海报,其实当时我也是不知道如何下手,认真想了下得通过canvas绘制成图片,这样用户保存这个图片到相册,就可以分享到朋友圈了。但是要绘制的图片上面不仅有文字还有数字、图片、二维码等且都是活的,这个要怎么动态生成呢。认真想了下,需要一点一点的将文字和数字,背景图绘制到画布上去,这样通过api最终合成一个图片导出到手机相册中。二、需要解决的问题二维码的动态获取和绘制(包括如何生成小程序二维码、公众号二维码、打开网页二维码)背景图如何绘制,获取图片信息将绘制完成的图片保存到本地相册处理用户是否取消授权保存到相册三、实现步骤这里我具体写下围绕上面所提出的问题,描述大概实现的过程①首先创建canvas画布,我把画布定位设成负的,是为了不让它显示在页面上,是因为我尝试把canvas通过判断条件动态的显示和隐藏,在绘制的时候会出现问题,所以采用了这种方法,这里还有一定要设置画布的大小。canvas canvas-id=”myCanvas” style=”width: 690px;height:1085px;position: fixed;top: -10000px;”/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); // 推进去图片 这里举个例子说下如何绘制文字,比如我要绘制如下这个“字”,需要动态获取前面字数的总宽度,这样才能设置“字”的x轴坐标,这里我本来是想通过measureText来测量字体的宽度,但是在iOS端第一次获取的宽度值不对,关于这个问题,我还在微信开发者社区提了bug,所以我想用另一个方法来实现,就是先获取正常情况下一个字的宽度值,然后乘以总字数就获得了总宽度,亲试是可以的。let allReading = 97 / 6 / app.globalData.ratio * wordNumber.toString().length + 325;ctx.font = ‘normal normal 30px sans-serif’;ctx.setFillStyle(‘#ffffff’)ctx.fillText(‘字’, allReading, 150);④绘制公众号二维码,和获取头像是一样的,也是先通过接口返回图片网络地址,然后再通过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()            }          })⑦保存到系统相册;先判断用户是否开启用户授权相册,处理不同情况下的结果。比如用户如果按照正常逻辑授权是没问题的,但是有的用户如果点击了取消授权该如何处理,如果不处理会出现一定的问题。所以当用户点击取消授权之后,来个弹框提示,当它再次点击的时候,主动跳到设置引导用户去开启授权,从而达到保存到相册分享朋友圈的目的。// 获取用户是否开启用户授权相册    if (!openStatus) {      wx.openSetting({        success: (result) = {          if (result) {            if (result.authSetting[“scope.writePhotosAlbum”] === true) {              openStatus = true;              wx.saveImageToPhotosAlbum({                filePath: canvasToTempFilePath,                success() {                  that.setData({                    showShareImg: false                  })                  wx.showToast({                    title: ‘图片保存成功,快去分享到朋友圈吧~’,                    icon: ‘none’,                    duration: 2000                  })                },                fail() {                  wx.showToast({                    title: ‘保存失败’,                    icon: ‘none’                  })                }              })            }          }        },        fail: () = { },        complete: () = { }      });    } else {      wx.getSetting({        success(res) {          // 如果没有则获取授权          if (!res.authSetting[‘scope.writePhotosAlbum’]) {            wx.authorize({              scope: ‘scope.writePhotosAlbum’,              success() {                openStatus = true                wx.saveImageToPhotosAlbum({                  filePath: canvasToTempFilePath,                  success() {                    that.setData({                      showShareImg: false                    })                    wx.showToast({                      title: ‘图片保存成功,快去分享到朋友圈吧~’,                      icon: ‘none’,                      duration: 2000                    })                  },                  fail() {                    wx.showToast({                      title: ‘保存失败’,                      icon: ‘none’                    })                  }                })              },              fail() {                // 如果用户拒绝过或没有授权,则再次打开授权窗口                openStatus = false                console.log(‘请设置允许访问相册’)                wx.showToast({                  title: ‘请设置允许访问相册’,                  icon: ‘none’                })              }            })          } else {            // 有则直接保存            openStatus = true            wx.saveImageToPhotosAlbum({              filePath: canvasToTempFilePath,              success() {                that.setData({                  showShareImg: false                })                wx.showToast({                  title: ‘图片保存成功,快去分享到朋友圈吧~’,                  icon: ‘none’,                  duration: 2000                })              },              fail() {                wx.showToast({                  title: ‘保存失败’,                  icon: ‘none’                })              }            })          }        },        fail(err) {          console.log(err)        }      })    }总结至此所有的步骤都已实现,在绘制的时候会遇到一些异步请求后台返回的数据,所以我用promise和async和await进行了封装,确保导出的图片信息是完整的。在绘制的过程确实遇到一些坑的地方。比如初开始导出的图片比例大小不对,还有用measureText测量文字宽度不对,多次绘制(可能受网络原因)有时导出的图片上的文字颜色会有误差等。如果你也遇到一些比较坑的地方可以一起探讨下做个记录,下面附下完整的代码import regeneratorRuntime from ‘../../utils/runtime.js’ // 引入模块const app = getApp(),  api = require(‘../../service/http.js’);var ctx = null, // 创建canvas对象    canvasToTempFilePath = null, // 保存最终生成的导出的图片地址    openStatus = true; // 声明一个全局变量判断是否授权保存到相册// 获取微信公众号二维码  getCode: function () {    return new Promise(function (resolve, reject) {      api.fetch(‘/wechat/open/getQRCodeNormal’, ‘GET’).then(res = {        console.log(res, ‘获取微信公众号二维码’)        if (res.code == AD:【E企盈小程序开发公司】E企盈系统专业开发:直播系统,直播平台系统源码,小程序,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序如何生成海报分享朋友圈
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏