微信小程序生成分享海报方法(附带二维码生成)


Posted in Javascript onMarch 29, 2019

昨天写了一篇小程序本地生成二维码的功能小程序本地生成二维码,趁热打铁今天给大家分享一下小程序内生成海报的功能以及具体步骤

这次分享海报里面的元素比较少,进行绘制的分别有头像,海报背景以及二维码(二维码的生成请看上面《小程序本地生成二维码》一文),此次没有涉及到文字的绘制,不过原理大致相同,这篇文章就不对文字绘制进行阐述了。
下面我们就开始吧?

注:实现基于mpvue框架,如果使用小程序自有框架直接开发需要少许改动

流程

微信小程序生成分享海报方法(附带二维码生成)

0-1

微信小程序生成分享海报方法(附带二维码生成)

0-2

在(0-1)页面点击“生成专属海报” > 跳转到(0-2)页面进行海报

资源前期准备

在生成海报之前需要准备,头像,海报背景图以及二维码

为了在海报生成是页面没有闪动或者卡顿,需要先在(0-1)页面把这些数据准备好

需要注意的是,生成海报时需要时临时文件或者是本地文件,如果是网络图片,需要通过wx.getImageInfo() api获取图片的临时路径

这里头像用到的是网络路径,所以需要获取头像的临时临时路径,海报背景在本地直接用本地路径即可

二维码则通过weapp-qrcode生成后返回临时路径进行使用(生成逻辑详见文章开头“小程序本地生成二维码”)

准备完成后将资源信息以参数的形式传给(0-2)页面

let shareInfo = {
 headerImg: 'tempfilepath',
 bgImg: '本地路径的图片',
 qrcode: 'tempfilepath'
}
wx.navigateTo({
 url: '/pages/createPoster/main?shareInfo=' + JSON.stringify(shareInfo)
})

获取资源

在(0-2)中获取参数

我们公司的工程是通过mpvue搭建的,获取方法是

mounted () {
 const options = this.$root.$mp.query
 this.shareInfo= JSON.parse(options.shareInfo)
}
// 如果是通过微信开发工具直接开发则在onLoad函数中获取options
onLoad (options) {
 const shareInfo = JSON.parse(options.shareInfo)
}

画布的样式

由于在获取临时路劲保存图片的时候用一倍的canvas保存的图片会很模糊,我们需要对canvas画布进行多倍处理,一般二倍即可,太大了在Android上可能会出现问题

也可以以像素比为倍率,这样比较好处理,这里用的是像素比,具体如下

wx.getSystemInfo({
 success (res) {
 // 通过像素比计算出画布的实际大小(330x490)是展示的出来的大小
 this.width = 330 * res.pixelRatio
 this.height = 490 * res.pixelRatio
 }
})
// 结构样式
<canvas class="canvas-poster" id="canvasPoster" :style="{width:width+'px;',height: height+'px'}" canvas-id="canvasPoster"></canvas>
<img :src="poster" class="poster-img" @click="previewImg" alt="">
<div type="button" @click="savePoster" class="save-btn">
 <img src="../img/0.3_btn_yellow_bg.png" alt="">
 <div class="btn-text">保存图片</div>
</div>
.canvas-poster{
 background-color: #fafafa;
 zoom: 50%; // 将画布缩小到50%(最好通过像素比进行缩小,像素比是2的话就是50%,如果不全是以像素比为标准,在生成图片的时候可能会出现四周黑边)
 position: absolute;
 left: -10000px; // 将画布隐藏在可视区域外
 background: #206949;
}

生成之前获取画布信息

mounted () {
 var query = wx.createSelectorQuery()
 query.select('#canvasPoster').boundingClientRect((res) => {
 // 返回值包括画布的实际宽高
 this.drawImage(res)
 }).exec()
}

生成逻辑

methods: {
 drawImage (canvasAttrs) {
 let ctx = wx.createCanvasContext('canvasPoster', this)
 let canvasW = canvasAttrs.width // 画布的真实宽度
 let canvasH = canvasAttrs.height //画布的真实高度
 // 头像和二维码大小都需要在规定大小的基础上放大像素比的比例后面都会 *this.systemInfo.pixelRatio
 let headerW = 48 * this.systemInfo.pixelRatio
 let headerX = (canvasW - headerW) / 2
 let headerY = 40 * this.systemInfo.pixelRatio
 let qrcodeW = 73 * this.systemInfo.pixelRatio
 let qrcodeX = 216 * this.systemInfo.pixelRatio
 let qrcodeY = 400 * this.systemInfo.pixelRatio
 // 填充背景
 ctx.drawImage(this.shareInfo.bgImg, 0, 0, canvasW, canvasH)
 ctx.save()
 // 控制头像为圆形
 ctx.setStrokeStyle('rgba(0,0,0,.2)') //设置线条颜色,如果不设置默认是黑色,头像四周会出现黑边框
 ctx.arc(headerX + headerW / 2, headerY + headerW / 2, headerW / 2, 0, 2 * Math.PI)
 ctx.stroke()
 //画完之后执行clip()方法,否则不会出现圆形效果
 ctx.clip()
 // 将头像画到画布上
 ctx.drawImage(this.shareInfo.headerImg, headerX, headerY, headerW, headerW)
 ctx.restore()
 ctx.save()
 // 绘制二维码
 ctx.drawImage(this.shareInfo.qrcode, qrcodeX, qrcodeY, qrcodeW, qrcodeW)
 ctx.save()
 ctx.draw()
 setTimeout(() => {
 //下面的13以及减26推测是因为在写样式的时候写了固定的zoom: 50%而没有用像素比缩放导致的黑边,所以在生成时进行了适当的缩小生成,这个大家可以自行尝试
 wx.canvasToTempFilePath({
 canvasId: 'canvasPoster',
 x: 13,
 y: 13,
 width: canvasW - 26,
 height: canvasH - 26,
 destWidth: canvasW - 26,
 destHeight: canvasH - 26,
 success: (res) => {
  this.poster = res.tempFilePath
 }
 })
 }, 200)
 },
 previewImg () {
 if (this.poster) {
 //预览图片,预览后可长按保存或者分享给朋友
 wx.previewImage({
 urls: [this.poster]
 })
 }
 },
 savePoster () {
 if (this.poster) {
 wx.saveImageToPhotosAlbum({
 filePath: this.poster,
 success: (result) => {
  wx.showToast({
  title: '海报已保存,快去分享给好友吧。',
  icon: 'none'
  })
 }
 })
 }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
js中unicode转码方法详解
Oct 09 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Angular4 ElementRef的应用
Feb 26 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 #Javascript
微信小程序生成二维码的示例代码
Mar 29 #Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 #Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 #Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 #Javascript
详解a标签添加onclick事件的几种方式
Mar 29 #Javascript
node(koa2) web应用模块介绍详解
Mar 29 #Javascript
You might like
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
BootStrap按钮标签及基本样式
2016/11/23 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
2018/01/21 jQuery
vue项目中axios使用详解
2018/02/07 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
Vue-cli3.x + axios 跨域方案踩坑指北
2019/07/04 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python模块文件结构代码详解
2018/02/03 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python hashlib模块的使用示例
2020/10/09 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
法学专业个人求职信
2013/09/26 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
教师节慰问信
2015/02/15 职场文书
丧事主持词
2015/07/02 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
Java并发编程必备之Future机制
2021/06/30 Java/Android