jquery idcode.js 验证码如何使用

JavaScript076

jquery idcode.js 验证码如何使用,第1张

我发现现在回答问题的人真是无聊，不能把答案写全？

这个JS首先引用：

<link href="Scripts/idcode/jquery.idcode.css" rel="stylesheet" type="text/css" />

<script src="Scripts/idcode/jquery.idcode.js" type="text/javascript"></script>

然后加载它的一个方法：

<script type="text/javascript">

$(document).ready(function () {

$.idcode.setCode()

})

</script>

然后要到它的JS文件去指定一个输入验证码框的ID

var settings = {

e : 'idcode',

codeType : { name : 'follow', len: 4},

codeTip : 'refresh?',

inputID:'Txtidcode'//这个就是你页面输入验证码的文本框ID

}

然后是页面元素：

<label class ="lblVerification">验证码</label>

<input type ="text" id ="Txtidcode" class ="txtVerification" />

<span id="idcode"></span>

最后是JS调用：var IsBy = $.idcode.validateCode()返回的是true或false。这样就可以验证

一、需求背景

在 VUE 开发的微信公众号项目中，有一个动态生成二维码的需求：根据后端传来的参数，动态生成二维码，用户长按动态生成的二维码，然后识别做相应操作。

二、BUG问题

二维码的生成采用的是第三方库 qrcodejs2，功能实现后，测试发现，在苹果 IOS 系统中长按可以正常识别，而在安卓手机长按则无法识别。

三、原因分析

第三方库 qrcodejs2 生成二维码时，它会在我们指定 div 盒子内动态生成两个元素，分别是 canvas 和 img，如下图所示：

浏览器代码截图

上图是在浏览器测试时的截图，可以看到 canvas 处于隐藏（display: none）状态，img 处于显示（display: block）状态。这种状态是没问题的，因为只有长按 img 图片才会弹出识别按钮，既然安卓手机长按无法弹出识别按钮，说明安卓手机展示的不是 img 元素，而是 canvas 元素。

四、解决方案

既然只有 img 元素才可以被识别，那么我们只要保证不让其展示 canvas 画布，始终展示 img 就可以了。具体代码如下：

<!-- 隐藏原来存放二维码的 div -->

<div id="qrcode" style="display: none"></div>

<!-- 添加一个新的div，用来展示 canvas 转换的 base64 图片 -->

<div style="text-align: center">

<img :src="qrcodeimg" alt="" width="200" height="200" v-show="qrcodeimg">

</div>

我们在指定的 div#qrcode 下面，再创建了一个div，并把原来装二维码的 div#qrcode 进行隐藏，然后生成二维码之后，我们获取 div#qrcode 里的 canvas 元素，并将拿到的 canvas 转为 base64 图片，然后展示在下面新创建的 div 中。这样处理之后，不管什么情况，始终展示的都是 img 图片了…

// 生成二维码

new QRCode("qrcode", {

width: 200,

height: 200,

text: this.payCode

})

// 生成二维码之后，获取canvas元素

let qrcodeEle = document.getElementById("qrcode")

let cvs = qrcodeEle.querySelector('canvas')

this.qrcodeimg = cvs.toDataURL('image/png')