이번 시간에는 Base64 Encode/Decode 변환 예제이다.
▣ Base64.html
<html>
<head>
<title>JavaScript Base64 Encoder/Decoder</title>
<script type="text/javascript">
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZ" + //all caps
"abcdefghijklmnopqrstuvwxyz" + //all lowercase
"0123456789+/="; // all numbers plus +/=
function encode64(inp) {
var out = ""; //This is the output
var chr1, chr2, chr3 = ""; //These are the 3 bytes to be encoded
var enc1, enc2, enc3, enc4 = ""; //These are the 4 encoded bytes
var i = 0; //Position counter
do //Set up the loop here
{
chr1 = inp.charCodeAt(i++); //Grab the first byte
chr2 = inp.charCodeAt(i++); //Grab the second byte
chr3 = inp.charCodeAt(i++); //Grab the third byte
//Here is the actual base64 encode part.
//There really is only one way to do it.
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
//Lets spit out the 4 encoded bytes
out = out + keyStr.charAt(enc1) + keyStr.charAt(enc2) + keyStr.charAt(enc3) + keyStr.charAt(enc4);
// OK, now clean out the variables used.
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
} while (i < inp.length);
//And finish off the loop
//Now return the encoded values.
return out;
}
function decode64(inp) {
var out = ""; //This is the output
var chr1, chr2, chr3 = ""; //These are the 3 decoded bytes
var enc1, enc2, enc3, enc4 = ""; //These are the 4 bytes to be decoded
var i = 0; //Position counter
// remove all characters that are not A-Z, a-z, 0-9, +, /, or =
var base64test = /[^A-Za-z0-9+/=]/g;
if (base64test.exec(inp)) //Do some error checking
{
alert("There were invalid base64 characters in the input text.n"
+ "Valid base64 characters are A-Z, a-z, 0-9, ?+?, ?/?, and ?=?n"
+ "Expect errors in decoding.");
}
inp = inp.replace(/[^A-Za-z0-9+/=]/g, "");
do // decode loop.
{
//Grab 4 bytes of encoded content.
enc1 = keyStr.indexOf(inp.charAt(i++));
enc2 = keyStr.indexOf(inp.charAt(i++));
enc3 = keyStr.indexOf(inp.charAt(i++));
enc4 = keyStr.indexOf(inp.charAt(i++));
//Heres the decode part.
chr1 = (enc1 << 2) | (enc2 >> 4);
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
chr3 = ((enc3 & 3) << 6) | enc4;
//Start to output decoded content
out = out + String.fromCharCode(chr1);
if (enc3 != 64) {
out = out + String.fromCharCode(chr2);
}
if (enc4 != 64) {
out = out + String.fromCharCode(chr3);
}
//now clean out the variables used
chr1 = chr2 = chr3 = "";
enc1 = enc2 = enc3 = enc4 = "";
} while (i < inp.length); //finish off the loop
//Now return the decoded values.
return out;
}
</script>
</head>
<body>
<form name="Base64">
<textarea name="Test" cols="40" rows="6"></textarea><br>
<input type="button" name="encode" value="Encode" onClick="document.Base64.Test.value=encode64(document.Base64.Test.value);">
<input type="button" name="decode" value="Decode" onClick="document.Base64.Test.value=decode64(document.Base64.Test.value);">
</form>
</body>
</html>
▣ 페이지 로딩
▣ Encode 버튼 클릭
테스트를 위해 위의 소스코드를 복사해서 Encode 버튼을 클릭하였다.
▣ Decode 버튼 클릭
Encode된 문자열을 입력하고 Decode 버튼을 클릭하면 위와 같이 변환된다.
728x90
'■ Front-End ■ > JavaScript' 카테고리의 다른 글
| [JavaScript] History, Screen, Navigator 브라우저 객체 예제 (0) | 2023.02.28 |
|---|---|
| [JavaScript] 날짜계산 및 문자열 출력 (0) | 2023.02.28 |
| [JavaScript] 테이블에 롤오버/클릭 효과 (0) | 2023.02.28 |
| [JavaScript] 이미지 업로드 하기전 표시하기 (ImageViewer ) (0) | 2023.02.28 |
| [JavaScript] 모달창에서 부모창의 함수호출 (0) | 2023.02.28 |
댓글