客户端Javascript中的Base64编码和解码

2020/10/07 18:01 · javascript ·  · 0评论

JavaScript中是否有任何方法可用于使用base64编码对字符串进行编码和解码?

某些浏览器(例如Firefox,Chrome,Safari,Opera和IE10 +)可以原生处理Base64。看一下这个Stackoverflow问题它正在使用btoa()atob()函数

对于服务器端JavaScript(节点),可以使用Buffer进行解码。

如果您要使用跨浏览器解决方案,则可以使用现有的库,例如CryptoJS或类似以下的代码:

http://ntt.cc/2008/01/19/base64-encoder-decoder-with-javascript.html

对于后者,您需要彻底测试该功能是否具有跨浏览器兼容性。并且错误已经被报告

在基于Gecko / WebKit的浏览器(Firefox,Chrome和Safari)和Opera中,可以使用btoa()atob()

原始答案:如何在JavaScript中将字符串编码为Base64?

Internet Explorer 10+

// Define the string
var string = 'Hello World!';

// Encode the String
var encodedString = btoa(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"

// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

跨浏览器

针对AMD,CommonJS,Nodejs和浏览器的UTF-8和Base64 Java编码和解码库/模块的重写和模块化。跨浏览器兼容。


与Node.js

这是在Node.js中将普通文本编码为base64的方法:

//Buffer() requires a number, array or string as the first parameter, and an optional encoding type as the second parameter. 
// Default is utf8, possible encoding types are ascii, utf8, ucs2, base64, binary, and hex
var b = new Buffer('JavaScript');
// If we don't use toString(), JavaScript assumes we want to convert the object to utf8.
// We can make it convert to other formats by passing the encoding type to toString().
var s = b.toString('base64');

这是解码base64编码的字符串的方法:

var b = new Buffer('SmF2YVNjcmlwdA==', 'base64')
var s = b.toString();

与Dojo.js

要使用dojox.encoding.base64编码字节数组:

var str = dojox.encoding.base64.encode(myByteArray);

要解码base64编码的字符串:

var bytes = dojox.encoding.base64.decode(str)

凉亭安装angular-base64

<script src="bower_components/angular-base64/angular-base64.js"></script>

angular
    .module('myApp', ['base64'])
    .controller('myController', [

    '$base64', '$scope', 
    function($base64, $scope) {
    
        $scope.encoded = $base64.encode('a string');
        $scope.decoded = $base64.decode('YSBzdHJpbmc=');
}]);

但是如何?

如果您想进一步了解base64的编码方式,尤其是在JavaScript中,我建议您阅读本文: JavaScript中的计算机科学:Base64编码

这是狙击手的收紧版本。假定格式良好的base64字符串没有回车符。这个版本消除了几个循环,添加了&0xffYaroslav修复程序,消除了尾随的null,以及一些代码优化。

decodeBase64 = function(s) {
    var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
    var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    for(i=0;i<64;i++){e[A.charAt(i)]=i;}
    for(x=0;x<L;x++){
        c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
        while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
    }
    return r;
};

简短而快速的Base64 JavaScript解码功能,无故障保护:

function decode_base64 (s)
{
    var e = {}, i, k, v = [], r = '', w = String.fromCharCode;
    var n = [[65, 91], [97, 123], [48, 58], [43, 44], [47, 48]];

    for (z in n)
    {
        for (i = n[z][0]; i < n[z][1]; i++)
        {
            v.push(w(i));
        }
    }
    for (i = 0; i < 64; i++)
    {
        e[v[i]] = i;
    }

    for (i = 0; i < s.length; i+=72)
    {
        var b = 0, c, x, l = 0, o = s.substring(i, i+72);
        for (x = 0; x < o.length; x++)
        {
            c = e[o.charAt(x)];
            b = (b << 6) + c;
            l += 6;
            while (l >= 8)
            {
                r += w((b >>> (l -= 8)) % 256);
            }
         }
    }
    return r;
}
function b64_to_utf8( str ) {
  return decodeURIComponent(escape(window.atob( str )));
}

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#The_.22Unicode_Problem.22

php.js项目有很多的PHP的功能的JavaScript实现。base64_encode并且base64_decode包括在内。

有人说打高尔夫球吗?=)

以下是我在与时俱进的过程中改善自己的障碍的尝试。为您提供方便。

function decode_base64(s) {
  var b=l=0, r='',
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  s.split('').forEach(function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  });
  return r;
}

我实际上所追求的是一个异步实现,令我惊讶的是,事实证明forEach与JQuery的$([]).each方法实现相反,是非常同步的。

如果您也有这样疯狂的想法,那么0延迟window.setTimeout将异步运行base64解码,并在完成后执行回调函数并返回结果。

function decode_base64_async(s, cb) {
  setTimeout(function () { cb(decode_base64(s)); }, 0);
}

@Toothbrush建议“像数组一样对字符串进行索引”,然后删除split这个例程看起来确实很奇怪,不确定它的兼容性如何,但是它的确击中了另一个小鸟,所以让它来吧。

function decode_base64(s) {
  var b=l=0, r='',
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  [].forEach.call(s, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  });
  return r;
}

在尝试查找有关JavaScript字符串作为数组的更多信息时,我偶然发现了该专业技巧,使用/./g正则表达式单步执行字符串。通过替换就位的字符串并消除了保留返回变量的需求,这甚至进一步减少了代码大小。

function decode_base64(s) {
  var b=l=0,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  return s.replace(/./g, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    return l<8?'':String.fromCharCode((b>>>(l-=8))&0xff);
  });
}

但是,如果您正在寻找一些更传统的东西,那么以下内容可能更合您的口味。

function decode_base64(s) {
  var b=l=0, r='', s=s.split(''), i,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  for (i in s) {
    b=(b<<6)+m.indexOf(s[i]); l+=6;
    if (l>=8) r+=String.fromCharCode((b>>>(l-=8))&0xff);
  }
  return r;
}

我没有尾随的null问题,因此将其删除以保持在标准水平以下,但是如果您愿意,可以使用atrim()或a轻松解决,trimRight()如果这对您造成了问题。

即。

return r.trimRight();

注意:

结果是一个ascii字节字符串,如果您需要unicode,最简单的方法是escape对该字节字符串进行解码,decodeURIComponent以生成unicode字符串。

function decode_base64_usc(s) {      
  return decodeURIComponent(escape(decode_base64(s)));
}

由于escape不推荐使用,我们可以更改功能以直接支持unicode,而无需这样做,escape或者String.fromCharCode我们可以生成一个%转义的字符串以供URI解码使用。

function decode_base64(s) {
  var b=l=0,
  m='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
  return decodeURIComponent(s.replace(/./g, function (v) {
    b=(b<<6)+m.indexOf(v); l+=6;
    return l<8?'':'%'+(0x100+((b>>>(l-=8))&0xff)).toString(16).slice(-2);
  }));
}

欢乐!

我在phpjs.org上尝试过Javascript例程,它们运行良好。

我第一次尝试通过Ranhiru Cooray所选择的答案提出的程序- http://ntt.cc/2008/01/19/base64-encoder-decoder-with-javascript.html

我发现它们并非在所有情况下都有效。我写了一个测试例,这些例程失败了,并将它们发布到GitHub上:

https://github.com/scottcarter/base64_javascript_test_data.git

我还在ntt.cc的博客文章中发布了评论,以提醒作者(正在等待审核-该文章很旧,所以不确定是否会发表评论)。

对于它的价值,我从其他答案中得到启发,并编写了一个小的实用程序,该实用程序调用可从Node.js或浏览器通用的平台特定的API:

/**
 * Encode a string of text as base64
 *
 * @param data The string of text.
 * @returns The base64 encoded string.
 */
function encodeBase64(data: string) {
    if (typeof btoa === "function") {
        return btoa(data);
    } else if (typeof Buffer === "function") {
        return Buffer.from(data, "utf-8").toString("base64");
    } else {
        throw new Error("Failed to determine the platform specific encoder");
    }
}

/**
 * Decode a string of base64 as text
 *
 * @param data The string of base64 encoded text
 * @returns The decoded text.
 */
function decodeBase64(data: string) {
    if (typeof atob === "function") {
        return atob(data);
    } else if (typeof Buffer === "function") {
        return Buffer.from(data, "base64").toString("utf-8");
    } else {
        throw new Error("Failed to determine the platform specific decoder");
    }
}

我宁愿使用来自bas64编码/解码方法CryptoJS,利用最佳实践和模式JavaScript实现标准和安全的加密算法最流行的库。

在Node.js中,我们可以通过简单的方式做到这一点

var base64 = 'SGVsbG8gV29ybGQ='
var base64_decode = new Buffer(base64, 'base64').toString('ascii');

console.log(base64_decode); // "Hello World"

对于没有atob方法的JavaScript框架,如果您不想导入外部库,这是一个简短的函数。

它将得到一个包含Base64编码值的字符串,并将返回一个解码的字节数组(其中字节数组表示为数字数组,其中每个数字都是0到255之间的整数)。

function fromBase64String(str) {
    var alpha = 
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var value = [];
    var index = 0;
    var destIndex  = 0;
    var padding = false;
    while (true) {

        var first  = getNextChr(str, index, padding, alpha);
        var second = getNextChr(str, first .nextIndex, first .padding, alpha);
        var third  = getNextChr(str, second.nextIndex, second.padding, alpha);
        var fourth = getNextChr(str, third .nextIndex, third .padding, alpha);

        index = fourth.nextIndex;
        padding = fourth.padding;

        // ffffffss sssstttt ttffffff
        var base64_first  = first.code  == null ? 0 : first.code;
        var base64_second = second.code == null ? 0 : second.code;
        var base64_third  = third.code  == null ? 0 : third.code;
        var base64_fourth = fourth.code == null ? 0 : fourth.code;

        var a = (( base64_first << 2) & 0xFC ) | ((base64_second>>4) & 0x03);
        var b = (( base64_second<< 4) & 0xF0 ) | ((base64_third >>2) & 0x0F);
        var c = (( base64_third << 6) & 0xC0 ) | ((base64_fourth>>0) & 0x3F);

        value [destIndex++] = a;
        if (!third.padding) {
            value [destIndex++] = b;
        } else {
            break;
        }
        if (!fourth.padding) {
            value [destIndex++] = c;
        } else {
            break;
        }
        if (index >= str.length) {
            break;
        }
    }
    return value;
}

function getNextChr(str, index, equalSignReceived, alpha) {
    var chr = null;
    var code = 0;
    var padding = equalSignReceived;
    while (index < str.length) {
        chr = str.charAt(index);
        if (chr == " " || chr == "\r" || chr == "\n" || chr == "\t") {
            index++;
            continue;
        }
        if (chr == "=") {
            padding = true;
        } else {
            if (equalSignReceived) {
                throw new Error("Invalid Base64 Endcoding character \"" 
                    + chr + "\" with code " + str.charCodeAt(index) 
                    + " on position " + index 
                    + " received afer an equal sign (=) padding "
                    + "character has already been received. "
                    + "The equal sign padding character is the only "
                    + "possible padding character at the end.");
            }
            code = alpha.indexOf(chr);
            if (code == -1) {
                throw new Error("Invalid Base64 Encoding character \"" 
                    + chr + "\" with code " + str.charCodeAt(index) 
                    + " on position " + index + ".");
            }
        }
        break;
    }
    return { character: chr, code: code, padding: padding, nextIndex: ++index};
}

使用的资源:RFC-4648第4节

本文地址:http://javascript.askforanswer.com/kehuduanjavascriptzhongdebase64bianmahejiema.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!