H5营销场景下，电子印章技术的实现与思考🤔
背景
周末在家呆着无聊刷小🍠的过程时，无意中被推荐了一个H5的营销方案所吸引：利用电子印章结合H5页面结合的方式，实现线上+线下的拓客引流。形式如下图所示。
虽然这种电子印章的形式不是第一次见到，但看到真的有人在专营这方面的营销方案，着实激起了我的好奇心。虽然之前没做过这方面的业务，但是作为伪资深の二次元，这个交互方式我熟啊! 这不就是Amiibo么，现在浏览器/微信对NFC都支持到这个程度了么？好奇心促使我开始着手探究视频中的实现方案。
探索方案
【初探】NFC API
首先，我先查询了下NFC API的MDN介绍：Web NFC API 允许通过轻量级 NFC 数据交换格式 (NDEF) 消息在 NFC 上交换数据。 部分浏览器支持，仍是一项实验性的能力，文档建议使用前查一下对应的浏览器兼容性表。
看一下目前API支持的能力：
| API | 功能 |
|---|---|
NDEFMessage | 表示可以通过NDEFReader对象从兼容标签接收或发送到兼容标签的 NDEF 消息的接口。消息由元数据和 NDEF 记录组成。 |
NDEFReader (实验性) | 支持从兼容的 NFC 标签读取和写入消息的接口。消息表示为NDEFMessage对象。 |
NDEFRecord | 表示可以包含在 NDEF 消息中的 NDEF 记录的接口。 |
/** API 示例使用方式 读写案例 **/
async function readTag() {
if ("NDEFReader" in window) {
const ndef = new NDEFReader();
try {
await ndef.scan();
ndef.onreading = event => {
const decoder = new TextDecoder();
for (const record of event.message.records) {
consoleLog("Record type: " + record.recordType);
consoleLog("MIME type: " + record.mediaType);
consoleLog("=== data ===\n" + decoder.decode(record.data));
}
}
} catch(error) {
consoleLog(error);
}
} else {
consoleLog("Web NFC is not supported.");
}
}
async function writeTag() {
if ("NDEFReader" in window) {
const ndef = new NDEFReader();
try {
await ndef.write("What Web Can Do Today");
consoleLog("NDEF message written!");
} catch(error) {
consoleLog(error);
}
} else {
consoleLog("Web NFC is not supported.");
}
}
function consoleLog(data) {
var logElement = document.getElementById('log');
logElement.innerHTML += data + '\n';
}
案例参考 whatwebcando.today/nfc.html 。同时，MDN 上还附带着 Web NFC 的实现标准。看着这些能力实现一个触碰盖章的能力感觉绰绰有余啊。
不对，它是不是还让我查看兼容性来着？
看完之后，直呼好家伙！ 这实验性的范围也太局限了基本只支持了Chrome 89之后 以及个别浏览器。基本处于一个不能上生产的情况，这似乎和我的预期相距甚远，我陷入了短暂的思考。
补充一句，当然我也看了下微信对于近场通信的支持：支持 HCE（基于主机的卡模拟）模式，即将安卓手机模拟成实体智能卡。 支持 NFC 读写，即手机作为读卡器使用。同样是不符合对这一能力的预期的。
【回首】WEB API：Multi-touch interaction
在首轮没有想到解决方案的情况下，我查看了下营销团队的官网，也就是这一看让这个探究过程出现了转机。我发现这个业务场景的适用范围是：任何场景，微信、App、网站都可以执行。所以它应该是一个相对通用的方案，不会受到平台、兼容性等因素的影响。所以。。。会不会是？同时记录了多个触摸点 或者 绘制了某个特殊图形？
复习一下Touch的相关API：
| API | 功能 |
|---|---|
TouchEvent | 表示位于表面上的一个触摸点的某个状态发生改变时产生的事件。 |
Touch | 表示用户与触摸表面间的一个单独的接触点。 |
TouchList | 表示一组 Touch，用于多点触控的情况。 |
看起来似乎可行，无论是MDN Touch的介绍，还是 TouchList 的介绍，都证明记录同时触摸点是完全可行的。又看了下 Touch Events # dom-touchlist-length实现确实可以拿到每个触摸点的位置，那么现在只需要判断，绘制的点/形状是否符合标准就可以了。
此时刚好看到一位前辈的文章，他也是通过Touch的相关能力实现的，详细介绍了电子印章的实现，以及向量对比时的一些方案。个人觉得很牛逼，我就不做无用功了，这里简单摘录一些他的过程此处附上他的github ， (侵删哈)：
H5印章实体大概就是有一些圆点凸起的方块，每个凸起的地方使用导电橡胶材料制作（类似电容笔），这样平整放置在屏幕上时就能在屏幕上形成多个触控点，模拟 手指多点触控的交互。
在给用户盖印的过程中（采集新的点位信息），会存在一些不确定性
- 因为需要通过手机屏幕采集触摸点，而不同型号的手机屏幕尺寸/分辨率都存在差异，同一个印章盖上去，每次拿到的坐标数都有可能不同
- 每次盖章时，章的方向和手机的方向可能会有所不同
基于以上几点，我们计算相似性的算法就要忽略点位整体的方向和绝对尺寸。也就是证相似而不是全等。
github文章后续使用 余弦相似性 和 差值相关性 的方法通过向量解决了 点 => 图形 的相似问题，有兴趣的朋友可以到上/下面的文章链接中详细了解，我这里就不蹭方案了。当然证明向量的相似的方案不完全固定，稳定且效率高的方案可以由感兴趣的朋友自行探索，本篇文章就不做多余扩展了。同时也附上一些方案的链接抛砖引玉。
后来，我在营销团队的官网上也发现了多点触碰的专利等字样，相关实现方案也就不言而喻了。
【终局】一点思考
写到这，电子印章的技术实现就已经基本结束。前端通过巧妙技术实现助力了更加丰富的营销场景，从而实现技术业务双赢。回顾此次探索的过程，其实是一次完整的输入 => 校验的过程，在不同场景下我们接触过许多的输入方式，无论是屏幕点击、符箓绘制、图片识别 亦或是 言出法随都能给用户耳目一新的感觉。当然，也希望本篇文章的抛转能够给各位铁子更多的实现思路与前端学习的动力。
