基于Canvas实现刮刮卡效果验证码的方法.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN110543755A(43)申请公布日2019.12.06(21)申请号201910836197.5(22)申请日2019.09.04(71)申请人四川长虹电器股份有限公司地址621000四川省绵阳市高新区绵兴东路35号(72)发明人谢俊肖一梅常清雪(74)专利代理机构四川省成都市天策商标专利事务所51213代理人张秀敏(51)Int.Cl.G06F21/36(2013.01)G06F9/451(2018.01)H04L29/06(2006.01)权利要求书2页说明书4页附图1页(54)发明名称基于Canvas实现刮刮卡效果验证码的方法(57)摘要本发明公开了基于Canvas实现刮刮卡效果验证码的方法，通过CanvasAPI渲染刮刮卡效果的刮涂层，通过JavaScript技术对Canvas元素进行事件注入、监听及处理，实现验证码“按需加载，后置请求与渲染”，达到帮助客户端禁用脚本程序抓取验证码的效果，提升客户端通过此验证机制区分真实用户和脚本程序的正确率和提高用户使用验证码功能时的趣味性。CN110543755ACN110543755A权利要求书1/2页1.基于Canvas实现刮刮卡效果验证码的方法，其特征在于，包括以下步骤：步骤1，页面加载完成时，使用Canvas渲染验证码模块的上图层，并为Canvas元素添加系列事件监听函数；步骤2，当用户在验证码模块区域内按下鼠标左键时，通过AJAX技术向服务端发送验证码请求，并返回验证码；步骤3，客户端接收到返回的验证码时，开始渲染验证码模块的下图层；步骤4，对于简单的验证要求，判断上图层区域被刮开面积达到70％时，自动填写验证码；步骤5，对于复杂的验证要求，不做被刮开区域面积占比监听，须手动填写验证码；步骤6，验证码填写完毕后，自动提交至服务器验证。2.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤1中，在全局监听DOMContentLoaded事件，当该事件被触发，即表明DOM树渲染完成，此时使用JavaScript调用CanvasAPI绘制验证码模块的刮刮卡图层，并在生成的Canvas元素上添加系列的事件监听函数，包括鼠标按钮事件、鼠标拖拽事件、Canvas元素的像素点个数与ALPHA值计算函数。3.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤2中，通过步骤1中添加的鼠标事件监听函数，监听到当用户在验证码区域内按下鼠标左键触发MouseEvent事件时，客户端向服务端发起AJAX请求，请求验证码，并将请求的验证码返回给客户端；所述步骤2中客服端向服务端发送AJAX请求是在用户按下鼠标左键触发MouseEvent的button属性且值为0时触发。4.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤3中，客服端接收到返回的验证码后，使用JavaScript技术生成验证码图层，其中包括验证码数据的读取、验证码显示的渲染及验证码输入框的渲染，渲染的样式依然使用JavaScript编写样式表内容，在生成的验证码元素上添加输入事件监听函数并获取步骤2中返回的验证码字符串的长度值；所述步骤3中的验证码图层的渲染生成是发生在客服端成功拿到所述步骤2中的验证码之后，而非预先渲染完成。5.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤4中，通过步骤1中添加的路径记录函数实时的计算验证码区域被用户刮去面积在总面积中的占比，为了提升用户体验，在路径记录函数的实时计算过程，对用户的鼠标拖拽事件进行“节流”操作，当面积占比达到阈值时，获取返回的验证码并自动填入验证码框内；所述步骤4中的刮去涂层面积占比是通过Canvas元素的getImageData.data方法获取并计算像素点个数与其像素点的alpha值来判断被刮开区域面积的占比是否在70％及以上来实现。6.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤6中，通过添加的输入事件监听函数监听并判断验证码输入框的value字符串的长度，当输入串的长度值等于验证码串长度值时，自动提交至服务器验证；所述步骤6中的自动提交验证码功能的触发是通过判断用户输入的验证码字符串长度2CN110543755A权利要求书2/2页是否与步骤2中返回的验证码字符串的长度相等，相等时便触发该功能。7.如权利要求1所述的基于Canvas实现刮刮卡效果验证码的方法，其特征在于，所述步骤1中的页面加载完成是指当前页面的DOM树渲染完成，可触发DOMContentLoaded事件时；所述步骤1中的刮刮卡涂层效果是通过CanvasAPI与J