实现动态验证码的思路

示例

示例1

背景

验证码主要是防止机器暴力破解。之前的验证码都是以静态为主,现在一些产品开始使用动态方式,增加破解的难度。动态方式以 gif 最为简单可靠。gif 兼容性好,尺寸小。这里分享的就是一种:用 JS 实现 gif 动态验证码的思路。感谢关注。

任务分解

  1. 绘制旋转的文字
  2. 计算每个字符出现位置和角度
  3. 生成 gif 图片

逐步求精

如何绘制旋转的文字?

了解能用的 API

  • context.rotate(angle) 使当前坐标系旋转 angle,单位弧度
  • context.translate(x, y) 使当前坐标系偏移 x, y,单位像素
  • context.font 设置字体
  • context.strokeText(text, x, y [, maxWidth ]) 给文本描边
  • context.fillText(text, x, y [, maxWidth ]) 给文本填充

怎么以文字的中心位置旋转?

以文字的左下角为圆心旋转,不符合预期,见下图效果

示例1

本打算做一下偏移的计算,一想到要计算文本中心位置貌似还挺复杂。 还是看看其他人怎么做的,通过关键词 canvas rotate text center 找到一点线索。

textAlign 是横向对齐,再根据标准找到了一个纵向对齐 textBaseline

修改以后,效果符合预期,见下图:

示例2

按我的习惯就这种 “常用” 功能就封装成独立函数,方便以后使用。

如何计算每个字符出现位置和角度?

背景文字左右平移 + 旋转,生成随机的字符串计算中心坐标就好了

前景文字基本相似,只要上下来回移动和稍微摇摆,这里用的 cos 曲线控制摇摆。

如何生成 gif 图片

生成 gif 有第三方库可以使用 gifjs。 这里要注意的是,gifjs 用到 worker 技术,所以得在 http:// 环境里调试,不能用 file:// 环境

注意:由于添加的是同一个 canvas 对象,所以的是使用 copy 模式,将图像数据保留给每一帧。

完整代码

后记

功能比较简单,也写得比较简单,仅供参考。如果要应用到实战,还有很多细节要考虑

  • gif 创建的过程必然得放到后端完成,否则 兼容性、性能、安全性 都是问题(这块和传统的验证过程并无区别)。
  • 缓存(背景效果可以重复利用一段时间)。
  • 图片大小需要优化,目前是 200K(通过调整帧率和压缩比)。
  • 提供方便的调用接口(模块化)。

参考资料

2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部