如何在javascript内部进行base64编码答案

【问题标题】：How to base64 encode inside of javascript如何在javascript内部进行base64编码
【发布时间】：2011-04-16 00:49:40
【问题描述】：

我正在尝试在一个网站上实现一个简单的脚本，该脚本将从 google 的 ajax API 返回 base64 编码信息。这是我目前正在玩的：

<html>
<head>
<script src="http://www.google.com/jsapi?key=ABQIAAAA0duujonFsEX871htGWZBHRS76H0qhS7Lb-D1Gd0Mnaiuid8Z7BQIyz2kMpojKizoyiCQA4yRkKAKug" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    var location = 'Unable to determine your location.';
    if (google.loader.ClientLocation) {
      var loc = google.loader.ClientLocation;
      location = 'Country: <strong>' + loc.address.country + '</strong>, Region: <strong>' + loc.address.region + '</strong>, City: <strong>' +
                 loc.address.city + '</strong>, Lat/Long: <strong>' + loc.latitude + ', ' + loc.longitude + '</strong>';
    }
    jQuery('.geolocation').html(location);
  });
</script>
</head>
<body>
<span class="geolocation"></span>
</body>
</html>

它返回我试图正确获取的信息，但我需要对单独的部分进行 base64 编码，例如国家、地区、城市、纬度和经度。在 php 中它会很简单，但我无法弄清楚如何在 javascript 中做到这一点。任何帮助将不胜感激。

【问题讨论】：

How can you encode to Base64 using Javascript?的可能重复

标签： javascript geolocation base64

【解决方案1】：

Mozilla、WebKit 和 Opera 都具有分别用于 base 64 编码和解码的 btoa() 和 atob() 函数。尽可能使用它们，因为它们几乎肯定会比 JavaScript 实现快得多，并且可以回退到您执行 a web search 时出现的众多脚本之一。

2013 年 9 月 10 日编辑：atob() 和 btoa() 不处理 ASCII 范围之外的 Unicode 字符。 MDN 有 workarounds 但我不能为他们担保。感谢@larspars 指出这一点。

例如，如果您使用的是 amphetamachine 回答中的示例，则可以执行以下操作：

if (!window.btoa) {
    window.btoa = function(str) {
        return Base64.encode(str);
    }
}

if (!window.atob) {
    window.atob = function(str) {
        return Base64.decode(str);
    }
}

alert( btoa("Some text") );

【讨论】：

请注意 atob 和 btoa 不会处理 unicode，而 @amphetamachine 的答案会。 Base64.encode('☃') 有效，而 btoa('☃') 抛出错误（在 Firefox、Chrome 和 Opera 中测试）
还在犹豫是否要使用它，但现在我想我会的。当我们使用荷兰语时，我们没有奇怪的字符。感谢您发布并编辑您的评论，这对决定有很大帮助！ ;)

【解决方案2】：

This answer 似乎与您要查找的内容相符。

还有更优雅的this one：

/**
 *
 *  Base64 encode / decode
 *  http://www.webtoolkit.info/
 *
 **/

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;

        input = Base64._utf8_encode(input);

        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);
            }

        }

        output = Base64._utf8_decode(output);

        return output;

    },

    // private method for UTF-8 encoding
    _utf8_encode : function (string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }

        }

        return utftext;
    },

    // private method for UTF-8 decoding
    _utf8_decode : function (utftext) {
        var string = "";
        var i = 0;
        var c = c1 = c2 = 0;

        while ( i < utftext.length ) {

            c = utftext.charCodeAt(i);

            if (c < 128) {
                string += String.fromCharCode(c);
                i++;
            }
            else if((c > 191) && (c < 224)) {
                c2 = utftext.charCodeAt(i+1);
                string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
                i += 2;
            }
            else {
                c2 = utftext.charCodeAt(i+1);
                c3 = utftext.charCodeAt(i+2);
                string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                i += 3;
            }

        }

        return string;
    }

}

【讨论】：

这看起来很有希望，但它有点超出我对 javascript 的了解。也许我可以找到一种方法在 php 中完成所有这些操作

【解决方案3】：

我这里有部分答案的代码：

https://scotch.io/quick-tips/how-to-encode-and-decode-strings-with-base64-in-javascript

以及本页答案的另一部分： https://stackoverflow.com/a/3776796/2655623

结果如下：

var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

window.btoa = function(str) {
    return Base64.encode(str);
}

window.atob = function(str) {
    return Base64.decode(str);
}

由于这将所有内容保存在一个位置，因此我不会涉及 window.atb / window.btoa 在各种浏览器中的不同行为。

【讨论】：

【解决方案4】：

IE 10 及以上及所有最新浏览器

编码字符串

var str = "raj";
var enc = window.btoa(str); // cmFq

解码字符串

var dec = window.atoa('cmFq'); // raj

否则您可能在页面上有自己的功能。 small blog with references

【讨论】：