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


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 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
JQuery.Ajax之错误调试帮助信息介绍
Jul 04 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
JS typeof fn === 'function' && fn()详解
Aug 22 Javascript
js实现简单的倒计时
Jan 28 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 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
日本十大惊悚动漫
2020/03/04 日漫
中东人咖啡哲学
2021/03/03 咖啡文化
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
javascript 短路法代码精简
2009/08/20 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
JavaScript实现创建自定义对象的常用方式总结
2018/07/09 Javascript
小程序ios音频播放没声音问题的解决
2018/07/11 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
python实现给数组按片赋值的方法
2015/07/28 Python
Python金融数据可视化汇总
2017/11/17 Python
Python 一句话生成字母表的方法
2019/01/02 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
如何解决安装python3.6.1失败
2020/07/01 Python
python statsmodel的使用
2020/12/21 Python
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
初中同学聚会感言
2014/02/11 职场文书
开学典礼演讲稿
2014/05/23 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python
python内置进制转换函数的操作
2021/06/02 Python
HTML基础详解(下)
2021/10/16 HTML / CSS
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技
代码复现python目标检测yolo3详解预测
2022/05/06 Python