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


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随机展示头像代码
Dec 21 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
Jquery easyui 实现动态树
Nov 17 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
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中神奇的fastcgi_finish_request
2011/05/02 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
关于document.cookie的使用javascript
2010/10/29 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
js实现开关灯效果
2020/03/30 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
JavaScript WeakMap使用详解
2021/02/05 Javascript
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
python设置环境变量的原因和方法
2019/06/24 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
德国旅游网站:weg.de
2018/06/03 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
小学班主任寄语大全
2014/04/04 职场文书
2015年药房工作总结
2015/04/25 职场文书
淮海战役观后感
2015/06/11 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android