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


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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Oct 24 Javascript
Javascript函数式编程语言
Oct 11 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
对联广告js flash激活
2006/10/19 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
解读ES6中class关键字
2017/11/20 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
酒店销售经理岗位职责
2014/01/31 职场文书
建议书范文
2015/02/05 职场文书
清洁工个人工作总结
2015/03/05 职场文书
文艺晚会开场白
2015/05/29 职场文书
家长会后的感想
2015/08/11 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript
MYSQL 表的全面总结
2021/11/11 MySQL
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
Python+SeaTable实现计算两个日期间的工作日天数
2022/07/07 Python