이미지 인증코드 기능을 구현하기 위한 순수 JS 코드(IE6-8 호환)
- 零下一度원래의
- 2017-04-19 18:02:422070검색
이 글은 이미지 인증코드 기능을 구현하기 위한 순수 JS를 주로 소개하며, IE6-8 브라우저와 호환이 가능합니다. 필요하신 분들은 참고하시면 됩니다.
최근 사진 인증코드 기능을 구축하고 싶습니다. , 하지만 코드 뒤에 직접 작성하고 싶지는 않습니다. 그래서 순수 프론트엔드 인증코드 기능을 구축하려고 하다가 온라인으로 검색해보니 gVerify.js라는 플러그인을 발견했는데, 간단하고 사용하기 쉬우며 완벽하게 구현되어 있었습니다. 그런데 나중에 IE8과 호환된다는 메시지를 받고 생각만 해도 취하게 됐다. IE는 끔찍하지만 괜찮습니다. 플러그인을 찾을 생각은 없고, 지식을 배우고 강화하는 데 사용할 계획입니다. 아래에서 제가 한 방법을 참조하세요. 시간이 좀 걸렸지만 그만한 가치가 있었습니다.
사용방법
p-인증코드 입력란을 정의하고, 다운로드한 js 플러그인을 소개하고, 사용방법은 매우 간단합니다. GVerify 객체를 생성합니다. 매개변수를 사용자 정의하거나 p의 ID를 전달할 수 있습니다. 그러면 인증코드가 생성되고, 아래 그림 1-1과 같이 효과가 나타납니다. > 효과가 꽤 좋습니다. 몇 분만에 완료되었으며, 다양한 브라우저를 클릭해도 문제가 없었습니다. 하지만 일단 IE에 도달하면 IE9는 여전히 유용하지만 IE8은 어떻게 구현되는지 볼 수 있습니다. 그래서 소스코드를 열어보니 IE8 이하에서는 지원하지 않는 캔버스로 구현되어 있는 것을 발견했습니다. 그런 다음 캔버스 요소에 대한 관련 소개를 보러 가서 정말 속았다는 것을 알았습니다. "우리는 IE에서 5ba626b379994d53f7acf72a64f9b697 태그를 사용할 수도 있고 IE의 VML 지원을 기반으로 하는 오픈 소스 JavaScript 코드(Google 후원)로 호환 가능한 캔버스를 구축할 수도 있습니다. http://excanvas.sourceforge.net/을 참조하세요." 이 문장에서 제가 실수했다는 생각이 들어서 바로 excanvas.js를 다운받아서 페이지에 로딩을 했더니 js만 추가하면 될 것 같았습니다. 내 자랑을 하려고 결과를 보니 IE11인데 뭔가 잘못됐네요! 그래서 IE8에 맞춰봤는데 생각보다 간단하지가 않더군요. 그래서 플러그인 소스코드를 살펴보니 아무런 문제도 발견되지 않았고 오류도 보고되지 않았습니다. 그래서 문제가 무엇인지 검색만 할 수 있었습니다.
정보를 확인해보니 createelement() 메소드 플러그인 캔버스가 IE8 이하에서는 지원되지 않는 것으로 나타났습니다. 먼저 추가하세요. 페이지에 캔버스 요소를 작성하세요. 그래서 페이지를 수정하고 얻을 수 있는 캔버스를 생성하는 코드를 수정했습니다. 그리고 소스코드에 몇 가지 설명을 추가했습니다. 사용방법이 다음과 같이 변경되었습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形验证码</title>
</head>
<body>
<p id="v_container" style="width: 200px;height: 50px;"></p>
<input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
</body>
<script src="js/gVerify.js"></script>
<script>
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function(){
var res = verifyCode.validate(document.getElementById("code_input").value);
if(res){
alert("验证正确");
}else{
alert("验证码错误");
}
}
</script>
</html>소스코드가 다음과 같이 수정되었습니다(빨간색이 수정된 부분) 및 코멘트: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图形验证码</title>
</head>
<body>
<p id="v_container" style="width: 100px;height: 40px;position: relative;top: -61px;left: 230px;">
<canvas id="verifyCanvas" width="100" he.ight="40" style="cursor: pointer;"></canvas>
</p>
<input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
</body>
<script src="js/gVerify.js"></script>
<script>
var verifyCode = new GVerify("v_container");
document.getElementById("my_button").onclick = function(){
var res = verifyCode.validate(document.getElementById("code_input").value);
if(res){
alert("验证正确");
}else{
alert("验证码错误");
}
}
</script>
</html>요약
1. IE의 캔버스를 지원하려면 wxcanvas.js를 도입하고 캔버스 요소를 얻을 수 있도록 소스 코드를 수정해야 합니다.
위 내용은 이미지 인증코드 기능을 구현하기 위한 순수 JS 코드(IE6-8 호환)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!