Aaron's Blog logo Aaron's Blog

<!DOCTYPE html>   
<html>   
<head>   
<meta charset="utf-8">   
<title>base64 인코딩 자바스크립트 함수</title>   
<style>   
    div {   
        margin-top: 12px;   
    }   
    
    textarea {   
        width: 100%;   
        height: 45px;   
    }   
</style>   
<script>   
    
    var Base64 = {   
    
        // private property   
        _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",   
    
        // public method for encoding   
        encode : function (input) {   
            var output = "";   
            var chr1, chr2, chr3, enc1, enc2, enc3, enc4;   
            var i = 0;   
    
            while (i < input.length) {   
    
              chr1 = input.charCodeAt(i++);   
              chr2 = input.charCodeAt(i++);   
              chr3 = input.charCodeAt(i++);   
    
              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;   
              }   
    
              output = output +   
                  this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +   
                  this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);   
    
            }   
    
            return output;   
        },   
    
        // public method for decoding   
        decode : function (input)   
        {   
            var output = "";   
            var chr1, chr2, chr3;   
            var enc1, enc2, enc3, enc4;   
            var i = 0;   
    
            input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");   
    
            while (i < input.length)   
            {   
                 enc1 = this._keyStr.indexOf(input.charAt(i++));   
                 enc2 = this._keyStr.indexOf(input.charAt(i++));   
                 enc3 = this._keyStr.indexOf(input.charAt(i++));   
                 enc4 = this._keyStr.indexOf(input.charAt(i++));   
    
                 chr1 = (enc1 << 2) | (enc2 >> 4);   
                 chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);   
                 chr3 = ((enc3 & 3) << 6) | enc4;   
    
                 output = output + String.fromCharCode(chr1);   
    
                 if (enc3 != 64) {   
                     output = output + String.fromCharCode(chr2);   
                 }   
                 if (enc4 != 64) {   
                     output = output + String.fromCharCode(chr3);   
                 }   
            }   
    
            return output;   
        }   
    }   
    
    function changeSourceView(obj) {   
        var encodeStr = Base64.encode( obj.value );   
        var decodeStr = Base64.decode( encodeStr )   
        document.mainForm.resultEncode.value = encodeStr;   
        document.mainForm.resultDecode.value = decodeStr;   
    }   
    
</script>   
</head>   
<body>   
    
    <form method="post" name="mainForm">   
    
        <div>문자를 입력하세요.</div>   
        <textarea onkeypress="changeSourceView(this)" name="source"></textarea>   
    
        <div>base64 인코딩</div>   
        <textarea name="resultEncode"></textarea>   
    
        <div>base64 디코딩</div>   
        <textarea name="resultDecode"></textarea>   
    
    </form>   
    
    
</body>   
</html>