几百行代码肝个斗图机器人!

释放双眼,带上耳机,听听看~!

前言

有一天,组织内的斗图机器人坏掉了,巧不巧的是当你需要用它时,它坏掉了。

赶上要催交同学们的周报,没有表情包,就没办法委婉又不礼仪并友好和善的催促同学们交周报。

然后只能自己做图,打开了度娘,找合适表情,然后打开sketch,一通操作后,粘贴到群,搞定。

but总使用同一表情,又很枯燥,于是又打开度娘,打开sketch,一通操作,粘贴到群,搞定。

过了一段时间,度娘,sketch,群。

又过了一段时间,度娘,sketch,群。

时间一长就会很烦躁,每次都要这样搞半天(难道喜新厌旧属性?感觉像渣男?)

后来,突然开朗。求人不如求己!发挥我的主观能动性!自己敲一个!

于是在经历Node的洗礼,Color的洗礼,Canvas的洗礼,SQL的洗礼,Docker的洗礼,Vercel的洗礼后,它诞生了。

它叫imeme,是一个斗图机器人。

本文目的

给大家介绍如何设计和实现一款斗图机器人,是有前端有后端的全栈开发。

不会讲的

  • 涉及到安全问题、隐私以及制度政策等原因,机器人的接收消息内容不介绍

  • 具体功能演示,不提供截图展示,可自行体验

  • 不会详细讲清楚每一个实现细节

But,这些限制要素无关紧要,不影响全局,也不影响大家搭建自己的机器人。

重点讲解

  • 机器人的技术选型

  • 关键环节的设计思路及相关知识点。

场景还原

使用markdown还原下真实交互场景

image.png

技术选型

明确目标,鼓舞斗志。

那么应该如何设计主体流程?先从最基本的功能入手,列下需求清单:

  • Server,用来接收命令,发送消息。
  • 绘图功能,能够把文字和图片做成一张图。
  • 图片处理,不同的图片类型采取不同策略,获取最基本的图片信息。
  • 数据存储,作为数据源,提供各种有意思的基础图片及与绘图相关的基本参数。
  • 录入导出,便于数据采集,迎支持插入多条数据以及数据库的备份。
  • UI,让imeme用起来更轻松,便于管理数据源,查看图片以及调整绘图参数,还应支持交互式新增和图片下载。

针对如上特点:

  1. Server端,基于express实现node服务,axios + canvas + sql.js。
  2. UI端,vite + vue3.x + typescript设计实现,并提供lib库供多端快捷接入。

整体架构图

简单怼了一张图

image.png界面管理就很常见了,大致长这样

image.png

关键环节的设计思路

所有源码,链接在文末参考资料中,在github上。服务部署到vercel,可访问体验Web端[3](网速不稳定,毕竟白嫖vercel)

Server

Server要实现,接收到消息命令请求后,绘制图形,并能够给出合理结果反馈,也就是新的图像。所以基于express实现node服务,接口的设计要求如下:

  1. /test 用于测试服务的可用性,get请求。
  2. 设置origin * 允许接口的跨域请求以及多种请求头,默认编码utf-8。
  3. 为Chat端提供的/send,post发送Webhooks消息体。
  4. 为Web端提供的/image/*接口
  • /catalog用于目录获取,读取数据库中存储的图片源列表显示。
  • /open 打开用户选中的列表内容,接口返回图片基本信息(base64及绘图数据)。
  • /save 绘图数据的保存接口,用于图片拖拽编辑后,把最新数据同步到数据库中。
  • /create 新建表情,保存到数据库。
  • /update 更新表情数据
  • /download 下载接口,用户拖拽好的内容,可以直接下载到本地。
  • /export 数据导出备份

Server的接口逻辑在service模块,分为四个层次

  • router.js api接口层,管理服务提供的所有api。
  • data.js 连接接口和数据库的数据层,数据封装,为api提供数据获取服务。
  • ajax.js 请求结果集封装,根据data.js请求,给出结果反馈信息。
  • send.js 为Chat端提供的发送消息服务

绘图

简单的讲,表情就是图片加文字,即我们常见的水印,选择使用canvas来处理。

Node本身不具备canvas的能力,需要借助canvas库[4]来实现基本的绘图能力。

本部分内容在convert模块,主要提供给Chat端使用。

Web端不需要这些,对于浏览器来讲,canvas绘图小菜一碟,属于基本操作。

这里按照功能逻辑设计,分为4个层次:

  • make.js 提供绘图能力,支持图片本地保持。
  • size.js 根据base64串获取图片的widht和height。
  • format.js 菜单格式化,无效命令反馈。
  • parser.js 解析接收到的请求命令。

一个完整的水印图,由很多部分组成,拆解为base64编码的图片,水印文字,文字的位置横纵坐标,文字的颜色,字体大小,对齐方向,最大宽度。

绘图,就是把上述已知信息整合到一起

首先,根据base64编码,获取图片内容的基本类型,不同类型的图片,需要不同的解析流程。对于暂不支持水印功能的图片格式或者空命令的请求,直接返回base64原始编码。

接下来,调用size.js中的getSize获取图片的width和height,创建固定大小的canvas画布,进一步,得到ctx。

因为水印中图片在下层,文字在上层,所以先通过ctx.drawImage(img, 0, 0)绘制原始图片,再结合ctx.fillText(text, x, y, max || width)在(x, y)点,绘制最大长度为max的文字信息。

最后,通过base64 = canvas.toDataURL(type)生产出我们需要的绘图后的base64编码。

另外,在make.js中还提供了writeImg方法,可用于在开发中及时本地调试位置参数信息,检测生产的图片是否满足要求。(已经提供UI的交互式调整,解放了本地调试的痛苦)

图片尺寸

这部分内容在size.js,原理是根据base64的buffer,提取image的width和height。

针对不同格式的图片,要采取不同的处理策略,imeme目前提供5种(png/jpg/jpeg/gif/bpm)图片格式的处理,我们以png为例来说明,如何根据图片的buffer获取,真实的尺寸。

这里,你需要一点点的node buffer知识,以及了解简单的图片编码原理。

每种类型的文件都有自己独特的标识,直观上通过文件的扩展名来区分类型,然而扩展名可以随意的更改。所有的文件在计算机上都是以二进制方式存储的,我们可以通过分析标识头来确定文件类型。

我们本地查看任意一个png文件,用十六进制编辑器打开(可使用vscode的hexdump[5]

image.png我们分析下前两行内容

  • 89 50 4E 47 0D 0A 1A 0A png文件的标识头
  • 00 00 00 0D IHDR头块长度为13 bytes
  • 49 48 44 52 IHDR标识
  • 00 00 00 BC width,换算成十进制为188(16 * 11 + 12)px
  • 00 00 00 C4 height,换算成十进制为196(16 * 12 + 4)px
  • 08 色深,换算下即2^8=256,即256色的图像
  • 06 颜色类型,6表示,带α通道数据的真彩色图像
  • 00 压缩方法,LZ77派生算法(PNG Spec规定此处总为0,非0值为将来使用更好的压缩方法预留)
  • 00 滤波器方法,总为0,同上
  • 00 隔行扫描方法,0表示采用非隔行扫描
  • 25 38 3B 07 4个byte的CRC校验[6]

image.png在MacOS可以通过file快速查看1.png

  • width位于第16个byte,长度是4bytes
  • height位于第20个byte,长度是4bytes

buffer又是什么?

我们简化一下base64图片格式,还是以png为例讲解

对base64编码的图片字符串,解析,获取到CODE内容,然后使用Buffer.from转换为’base64’编码的buffer

vscode还可以使用Hex Editor[7]插件,能够更快捷的查看转码后的内容,同时也能够帮助buffer的转换提供一些思路。hexdump[8]需要鼠标hover才会提示。

image.png其他图片格式,同理可得!!(???说的好轻松???)

例如gif文件

image.png

image.png

DB

数据存储,使用SQLite,足够轻量,简单易学易用,需要引入sql.js[9]

功能介绍

该部分在db模块,基本涵盖的功能可以概括为:

  • 数据库的初始化、读取、存储、重置
  • 数据表的初始化、查询、插入、更新和删除
  • 获取某表的一条数据
  • 获取某表的所有数据
  • 获取所有数据
  • 日志
表结构设计

表结构,目前设计了四张表

  • STORY 记录图片指令和base64的image
  • TEXT 记录图片对应的绘图信息,例如x, y, font, color等
  • LOGGER 日志表,主要收集imeme缺失的资源
  • SPECIAL 特殊表,表结构同STORY,用于保存彩蛋指令,像中秋节、国庆节这种关键字,Chat端通过@imeme是查询不到的,属于隐藏的key,使用@imeme 中秋 金馆长会随机返回一张图。

  • id 主键,自增,不用于其他操作
  • mid 唯一key,用于数据的各种操作
  • title 文件标题,图片指令,唯一
  • feature 所属类别,用于归类,很多title可以对应同一个feature
  • image base64 image

不同于MYSQL,由于SQLite是大小写不敏感的数据库,所以为省去后面使用上的麻烦,建表的时候,把所有字段都统一小写。

数据备份

灾备的话,目前仅提供基于脚本的方式备份数据,npm run backup,默认把常用表和特殊表的内容,转化成js文件,存储到指定位置,默认为assets/backup目录。(后续会支持数据库自动备份)

数据采集

提供两种方式的数据导入

  • npm run import fileName默认读取assets/fileName目录,获取满足格式要求的文件,转换为base64,并附加绘图基本信息,存储为fileName.js文件。

  • 交互式添加单个图片,自定义表情内容,支持选择、拖拽以及拷贝粘贴的方式添加新图。

图形界面

为了更加友好方便快捷的斗图,imeme需要配备一个管理端imeme-view,它主要做这些事:

  • 管理数据源,管理imeme所有的表情资源
  • 查看表情
  • 动态调整绘图参数,支持可拖拽本文编辑,实时查看
  • 新增表情,提供选择框,拖拽、拷贝粘贴三种方式导入
  • 下载,实时下载表情资源

image.png

部署

前端静态页依赖于Gitbhu Action[10]托管在Github Pages[11],Node Server部署在Vercel[12]

vue3 + vite

<script setup lang="ts">谁用谁知道,爽的不得了。

lib

为了便于imeme的任意部署和运维,提供imeme-view的lib输出,支持在多种(es/cjs/umd/iife)环境下的使用。

主要依赖于强大的vite + rollup。

  • npm run lib 构建生成各种格式的js库
  • vite.lib.config.ts 配置文件,指定基础构建目录和打包方式
  • .env.lib 环境变量
  • lib/index.ts lib包入口,提供load方法,用于加载替换DOM元素和提供服务的url地址
  • lib/index.html 使用示例

npm使用引入meme-view[13]

成长

精疲力尽,受益匪浅。

  • 成长的路,如果有能够一起奋斗的伙伴固然难得,在大家做项目产品的团队中,与peer保持良好的合作关系,当我们遇到问题,就能够很方便求助解答,专业问题交给专业的同学(感谢2geng[14]同学在专业领域给予的大力支持,希望他的第一篇博文再快些)。

  • 做好时间管理,前前后后用掉很多碎片时间,通勤的路上思考,半夜睡不着爬起来赶进度,放弃午睡,每天花一点点时间,努力搬砖。

  • 脚踏实地,慎始敬终,行稳致远,进而有为。

结语

有好的idea,就动手行动,不要让idea就是一个idea。

意见收集

大家如果想要什么表情,可以自己加,也可以留言,看到后会及时补充。更欢迎提交pr,提交issue。

还有一些功能在不断的丰富和完善。

  • [ ]  解决Web端canvas绘制gif不动
  • [ ]  增加gif格式的水印服务
  • [ ]  数据的定时备份
  • [ ]  数据源的下载
  • [ ]  资源内容太少,缺少欢迎新人系列、大胆想法系列,撤回也没用等等

 

给TA买糖
共{{data.count}}人
人已赞赏
前端技术

看一道简单的题目,控制台会输出什么?

2021-12-22 21:37:42

前端技术

几百行代码肝个斗图机器人!

2021-12-22 21:43:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索