小游戏/小程序如何快速生成分享海报图
在应用开发过程中,我们会遇到各种各样的分享场景,例如邀请、拉新、分享内容等。分享链接是 Web 时代常见的分享形式,实现也相对容易。但是现在人们时间大都花在了 APP 上,所以应用之间的分享越来越重要,然而应用之间分享链接却不是那么顺利和有效果。往往受以下制约:
纯文字链接,依靠文字向外界传达信息,信息量小、可信度低。群里丢了一个链接进来,什么描述都没有,大多数人都不会去点。链接的描述一般也不会太长,信息不会太多。
分享的目标应用的外链策略。淘宝购物链接不能分享到微信、营销链接容易被微信封禁,都是受微信外链策略的影响。
平台分享机制限制。小程序的转发功能允许用户直接将小程序分享到联系人中,却无法分享到朋友圈。若开发者希望用户可以分享小程序到朋友圈中,通常需要生成分享海报图片,分享图片到朋友圈中。
所以 APP、H5、小程序等应用中分享功能,除了实现分享链接以外,还需要生成分享海报图片,在图片上展现更丰富的内容,一图胜千言。
如何低成本地生成内容丰富的海报图片,就是我们想要解决的问题。
常见技术方案
从生成图片的位置划分,可以将方案划分为两种:客户端生成、服务端生成。
在客户端生成图片是将图片中的元素都下载到本地,然后使用绘图 API 进行绘制,典型方案就是使用 Canvas 来绘制图片。
在服务端生成图片,又可以分为两种,一种是在服务端使用绘图库绘制,然后返回图片或图片链接给客户端;另一种是在服务端使用HTML + CSS 生成带有样式的网页,然后使用无头浏览器截图,返回图片或图片链接给客户端。
简而言之,一般会使用下面这三种方式:
在客户端使用 Canvas 生成图片
在服务器上使用网页完成样式渲染,然后截图返回给客户端
使用后端绘图库绘制,然后返回给客户端
下面逐一分析各种方案生成海报图片的优缺点。
客户端使用 Canvas 生成海报图片
优点:
渲染过程在每个客户端中完成,渲染相对独立,基本上不需要考虑并发的问题。
Canvas 特性丰富,可以实现样式复杂的图片渲染。
缺点也很明显:
上手门槛高,需要灵活使用 Canvas API
代码可读性差,调试过程复杂。
代码复用程度低,每个端都需要重新编码。客户端型号众多,用户设备上的表现还可能与在开发机上的表现存在差异。兼容性太差,这是客户端渲染最大的痛点。
如果有远程图片,可能会因跨域,无法下载,导致绘制失败。
推荐阅读:小程序canvas绘制海报
服务端浏览器,网页截图
在服务器上使用 HTML + CSS 在无头浏览器中完成网页样式布局与内容填充,然后使用无头浏览器提供的截图 API,将生成的网页截图保存。无头浏览器一般会选用 Puppeteer
。
Puppeteer
是谷歌官方团队开发的一个 Node.js 库,它提供了一些 API 用来控制浏览器的行为,比如打开网页、模拟输入、点击按钮、屏幕截图等操作,通过这些 API 可以完成很多有趣的事情,比如本文要讲的海报渲染服务,就会用到屏幕截图功能。
这种方案的优缺点也很明显。
优点:
上手简单,只需要了解 HTML 、CSS 就可以
代码可读性高,易于调试
得力于HTML、CSS,表达力强。只要在网页上能实现,就可以应用到海报图片中。
返回给客户端的是图片链接,不用考虑兼容性。
服务端生成图片带来的最大好处是多端兼容。但这也会引入一个问题,成本高。
在后端需要运行一个 Node 服务来跑Puppeteer
控制一个浏览器,性能太低。一个4核16G内存的服务器生成图片,峰值QPS只有 10-20,在较差情况下每秒只能生成10张图片。
推荐阅读:使用 Puppeteer 搭建统一海报渲染服务
服务端绘图库绘制图片
在服务端中,使用绘图库,绘制图片,然后将图片保存至 CDN 中,再返回图片链接给客户端。常用编程语言都有绘图库,例如 PHP 的 GD 库。相较于控制浏览器截图,这个方案的性能更高,也具有服务端渲染的好处,但灵活性却没有使用CSS控制样式高。
优点:
性能高
服务端架构统一,开发者不用单独维护一个Node.js 服务。
代码可读性高
缺点:
- 复杂样式,开发时间长,需要微调。
- 自适应布局困难。
推荐阅读:PHP 使用GD库合成带二维码的海报步骤以及源码实现
上面介绍了三种生成分享海报图片的常用方案,了解了实现原理。开发者在实现这些方案时都需要进行独立的开发,维护复杂的样式代码,每增加一种海报,就需要维护一份样式代码。
海报只是业务中很小的一环,自己维护一个海报渲染服务,付出的成本与收益之间不成正比。所以我们更推荐使用第三方海报/图片渲染服务,来完成实现我们的想法。
imgrender.cn 动态海报渲染服务
Imgrender 是一个免费的图片渲染服务,通过一个API,根据配置动态渲染图片,快速生成不同内容的图片。渲染模板配置简单,特别适合拥有不同分享海报的应用,快速、动态地生成分享海报。Imgrender 支持「文本」、「图片」、「二维码」、「矩形」、「线段」五种组件,可满足绝大多数海报的渲染需求。
小游戏/小程序如何快速生成分享海报图相关推荐
- 微信小程序使用canvas生成分享海报功能复盘
前言 近期需要开发一个微信小程序生成海报分享的功能.在h5一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理.但是由于小程序不具备传统意义的dom元素,所以也没有办法 ...
- 第二期:如何通过知晓云快速生成分享海报
作者:知晓云 - 小程序开发快人一步 来源:知晓课堂 在小程序中生成分享海报是一个很常见的需求,目前主要有以下两种做法: 直接由前端生成,使用小程序提供的 canvas API 由后端(知晓云云函数) ...
- 微信小程序 api+前端实现生成分享海报
1.先看效果图,点击分享海报按钮,然后弹出分享海报 2.前端代码 这里用的组件有vant组件库还有canvas_drawer(一个画布组件) canvas_drawer下载地址https://gith ...
- 小程序Canvas生成分享海报避坑指南
关于小程序使用Canvas画布生成分享海报,网上有很多的教程,但是结合到自己的业务上面就BUG百出了 接下来分享一下我的经历 微信出了新的api 微信公众平台目前更新不是太即使,查问题好多帖子都是一两 ...
- Python贪吃蛇小游戏_完整源码免费分享
文章目录 Python 贪吃蛇小游戏 1. 导包 2. 配置初始化参数 3. 主函数及运行主体 4. 画食物的函数 5. 画贪吃蛇的函数 6. 画网格的函数(非必选,觉得多余的可以忽略此项) 7. 操 ...
- “限时分享“ 本地80个小游戏 HTML+CSS+JS源码分享
开源项目集合 1. "限时分享" 本地80个小游戏 HTML+CSS+JS源码分享 2. "限时分享" 别错过了,最全的微信小程序源码收集分享 里面有80款小游 ...
- 性能测试实践|PerfDog助力微信小游戏/小程序性能调优
概述 随着近年来微信生态圈的发展,小游戏,小程序也随之爆火,同样伴随着的便是对于小游戏/小程序的用户体验的严格要求:微信团队也在自家的微信平台推荐使用PerfDog测试小游戏/小程序的性能. 1.评测 ...
- 基于GPT-4免费生成代码的工具!小游戏,管理系统都能生成!
Cursor支持Python.Java.C++.JavaScript.C#等等,可AI生成代码,功能非常强大!这篇教程将教你如何下载安装,带你玩转Cursor 目录 话不多说,先看能力: 只需要三步, ...
- 用C语言实现推箱子小游戏基础程序plus
目录 设计一个简单的推箱子游戏 功能设计要求: 代码实现 数据定义头文件data_def.h 窗口设置头文件WindowsSet.h WindowsSet.cpp 上移函数 矩阵旋转函数 游戏帧 菜单 ...
最新文章
- word 论文排版 —— 按指定格式章节的自动编号
- python list tuple区别_Python list、tuple、dict区别
- 报表软件公司高价悬赏BUG,100块1个我真是醉了
- openlayers5学习笔记-001
- title或alt自动换行
- 4.2 优化数据访问
- 算法实践——改良的求解数独的暴力搜索法
- nvidia控制面板点了没反应win7_nvidia控制面板打不开,教你win7系统nvidia控制面板打不开的解决方法...
- EasyUI框架01——基础学习
- Java设计模式之工厂模式最详解(类图+源码)
- 微信小程序tabbar美化(中间图标突起)
- 飞秒激光制备量子计算机,制备出世界最大规模光量子计算芯片
- Gazebo models / Gazebo Error [Node.cc:90] No namespace found
- JavaScript中this的使用(四种情况下this的指向)
- margin的百分比参照物
- 智能家居,在互联中看见全屋智能
- 大学计算机社团学什么好,大学一般有哪些社团 最值得报名的社团有哪些
- [导入]《玫瑰人生》【第80届奥斯卡获奖大片】【DVD中英字幕】【14:50发布】
- Vite+Vue3+TypeScript
- 《流浪地球》后续,深度对话刘慈欣:地球只是太空中的一粒尘埃
热门文章
- 微信小程序使用canvas生成分享海报功能复盘