微信小程序分享海报生成的实现方法
作者:结一 发布时间:2024-05-02 17:29:49
为了吸引更多的用户,设计好一个分享海报还是很有必要的。而小程序要生成一个海报还是有点坑的,下面分享下我们打卡小程序的一些经验。
分享海报的效果图如下:
制作要求:
海报以弹窗形式展现,各种手机型号都可以正常显示
海报的内容由背景图、日期、随机的名言警句、活动的二维码及用户的参加活动的信息
海报保存的图片大小为 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,用来测量文字的长度,这个在实现自动换行的时候用得到,但是比较耗性能。
来源:104.116.116.112.58.47.47.105.109.119.101.98.46.105.111.47.116.111.112.105.99.47.53.99.48.100.52.102.49.56.54.49.49.97.50.53.99.99.55.98.102.49.100.56.48.48.
猜你喜欢
- 开发新版本 Vue 项目推荐你使用 Vite 脚手架构建开发环境,然而 Vite 脚手架更倾向于构建纯 Web 页面,而不是桌面应用,因此开
- <?php header(“Content-Type:text/html;charset=utf-8″); if (isset($_G
- 在Vista IIS 7 中用 vs2005 调试 Web 项目核心是要解决以下几个问题:1、Vista 自身在安全性方面的User Acc
- zabbix部署文档zabbix部署完之后zabbix-agent操作 1.监控mysql,首先要先安装mysql[root@lo
- 本文模仿实现数据库访问的通用类,代码清晰,而且很实用,包括了对数据库的所有的常用的操作。 /// <summary>
- 1、如果之前已经安装我们先卸载一下yum -y remove php*2、由于linux的yum源不存在php7.x,所以我们要更改yum源
- 这篇文章主要介绍了Python hashlib模块加密过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- 采用Appium进行自动化的功能性测试最酷的一点是,你可以使用具有最适合你的测试工具的任何一门语言来写你的测试代码。大家选择最多
- 当产品走到HTML Coding这块,多浏览器的测试是很重要,也很麻烦的一个环节。现在大家主要是保证IE6,7及Firefox的一致。bro
- 本文实例讲述了Python模拟简单电梯调度算法。分享给大家供大家参考,具体如下:经常在公司坐电梯,由于楼层较高,是双联装的电梯,但是经常等电
- 下面请看本文详细介绍.Perl字符串处理函数1. index语法:position=index(string,substring,posit
- 一、将PHP数组转换为JSON格式在PHP中,我们可以直接使用数组来存储数据。但是在JS中,数组通常以JSON(JavaScript Obj
- 功能描述:1)使用tkinter设计程序界面;2)调用Windows API函数实现录音机和音乐播放器。参考代码:运行界面:总结以上所述是小
- 首先说登陆在config.inc.php文件中,有一个选项需要设置查找:$cfg['Servers'][$i]['a
- pathlib 模块提供了表示文件系统路径的类,可适用于不同的操作系统。使用 pathlib 模块,相比于 os 模块可以写出更简洁,易读的
- 问题你想将一个模块分割成多个文件。但是你不想将分离的文件统一成一个逻辑模块时使已有的代码遭到破坏。解决方案程序模块可以通过变成包来分割成多个
- gjsonGJSON 是一个Go包,它提供了一种从json文档中获取值的快速简单的方法。它具有单行检索、点符号路径、迭代和解析 json 行
- 一 Process对象的join方法在主进程运行过程中如果想并发地执行其他的任务,我们可以开启子进程,此时主进程的任务与子进程的任务分两种情
- 深底色风格的页面设计很受欢迎,它可以创造出别致优雅、极富创造力的效果。深底色设计适用于许多网站类型,但并非所有。这种风格应该在恰当的条件下使
- 本文实例讲述了微信小程序学习笔记之本地数据缓存功能。分享给大家供大家参考,具体如下:前面介绍了微信小程序获取位置信息操作。这里再来介绍一下微