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


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 相关文章推荐
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
js中传递特殊字符(+,&)的方法
Jan 16 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
vue.js项目打包上线的图文教程
Nov 16 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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版(1)
2006/10/09 PHP
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php实现微信发红包功能
2018/07/13 PHP
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
Python3模拟登录操作实例分析
2019/03/12 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python Pillow图像处理方法汇总
2019/10/16 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Python如何读写字节数据
2020/08/05 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
盛大笔试题
2016/11/05 面试题
初三班主任寄语大全
2014/04/04 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
Nginx进程调度问题详解
2021/09/25 Servers