微信小程序分享海报生成的实现方法


Posted in Javascript onDecember 10, 2018

为了吸引更多的用户,设计好一个分享海报还是很有必要的。而小程序要生成一个海报还是有点坑的,下面分享下我们打卡小程序的一些经验。

分享海报的效果图如下:

微信小程序分享海报生成的实现方法

制作要求:

  • 海报以弹窗形式展现,各种手机型号都可以正常显示
  • 海报的内容由背景图、日期、随机的名言警句、活动的二维码及用户的参加活动的信息
  • 海报保存的图片大小为 iphone 6 的两倍图(750 * 1334)

由于看到的弹窗图片与保存的图片是两种大小,所以一开始看了些网上的其他教程,建议是搞两个 canvas 一个大的一个小的。实际过程中,采用了一个大的 canvas ,让其偏离视窗显示区域(不可见)并生成临时文件,弹窗的图片再使用 img 组件,引入临时文件,设置其高度;而保存的时候则直接下载临时文件。

虽然是实现了,但是后来在优化的过程中,这个方案也重新设计了。下面具体介绍下优化过的方案:

  • 优先使用一个 canvas 绘制二维码;
  • 弹窗的图片即为一个 canvas;
  • 分享的图片为该 canvas 导出的大图片;
  • 为了达到最佳效果,名言警句的换行录入时就处理好。

设计弹窗的图片比例

由于最后海报的图片大小为 iphone 6 的两倍图(750 * 1334),所以这里弹窗的图片也即是 canvas 的大小,设计为对应的尺寸的某个比例。

弹窗图片的高度 = 视窗的高度 - 上下留白 - 按钮的高度 - 图片与按钮的距离
imgHeight = 100vh - 40rpx * 2 - 50rpx - 15rpx

弹窗图片的宽度 /  弹窗图片的高度 = 750 / 1334
弹窗图片的宽度 = (750 / 1334) * 弹窗图片的高度

由于像素只能是整数,所以这样绘制出来的图片可能底部会有1px的空白,所以在设置高度的时候可以再减掉 1px,这不会影响视觉效果。

绘制背景图

如果是网络图片,绘制背景图之前一定要先下载该图片,可通过 wx.getImageInfo wx. downloadFile 下载图片,下载成功后将其塞进临时地址,然后使用 wx canvas 的 drawImage 绘制。注意图片的格式不能是 gif。

绘制二维码

绘制二维码换了好几个库,每个在安卓下面生成的二维码都会频现失败。查了好些资料,说是安卓绘制的时候要设置个 setTimeout,于是最终选择了weapp-qrcode,修改了其绘制的函数,增加了setTimeout(还真别说,加上二维码绘制就成功了)。

ctx.draw(false, function (e) {
  setTimeout(() => { // 修改增加的
    options.callback && options.callback(e)
  }, 20);
})

另:目前这些绘制小程序二维码的库都是在一个单独的新 canvas 中完成的,只要对源码稍作修改,就可以提供另一个接口,直接在一个现有的 canvas (表示 canvas 中一开始绘制了其他内容) 中绘制。

如果二维码扫不出来,则表示二维码绘制出了问题。但安卓微信 6.7.2 版本本身有个 bug,二维码本身是没有问题,它却不能识别。不过升级下微信版本就好了。

保存图片

  • 先要获取用户是否开启用户授权相册
  • 如果没有权限,则弹窗提示开通权限,如果有权限直接调用 saveImageToPhotosAlbum 接口保存图片
  • 如果弹窗提示接受开通权限,则调用 saveImageToPhotosAlbum 接口保存图片
  • 如果弹窗提示拒绝则再次弹窗是否去设置开通权限,如果是则进入设置权限

性能注意

经实践测试整个绘制过程其实还是很快的,但是如果有保存临时文件操作( wx.canvasToTempFilePath ),那么这个操作一般得占一半时间左右。除此之外,有个 measureText api,用来测量文字的长度,这个在实现自动换行的时候用得到,但是比较耗性能。

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

Javascript 相关文章推荐
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
JS中数据结构之栈
Jan 01 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
基于jQuery拖拽事件的封装
Nov 29 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 #jQuery
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 #Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 #jQuery
微信小程序与后台PHP交互的方法实例分析
Dec 10 #Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 #Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 #jQuery
发布Angular应用至生产环境的方法
Dec 10 #Javascript
You might like
PHP处理excel cvs表格的方法实例介绍
2013/05/13 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
表单元素事件 (Form Element Events)
2009/07/17 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
js面向对象的写法
2016/02/19 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
webpack下实现动态引入文件方法
2018/02/22 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
简单的编程0基础下Python入门指引
2015/04/01 Python
python中dir函数用法分析
2015/04/17 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
Django中的session用法详解
2020/03/09 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
学生会个人自荐书范文
2014/02/12 职场文书
网络管理员岗位职责
2014/03/17 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
个人专业技术总结
2015/03/05 职场文书
体育教师研修感悟
2015/11/18 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python