资讯专栏INFORMATION COLUMN

JS处理base64编码

stormgens / 1826人阅读

摘要:因为项目需求,需要处理编码,再次记录,便于之后调用关于的本质就是把每位的编码变成另外一个每位的编码,用另外一个参照表进行对应翻译。

因为项目需求,需要处理base64编码,再次记录,便于之后调用 关于base64:

base64的本质就是把每8位的ASCII编码变成另外一个每6位的编码,用另外一个参照表进行对应翻译。

以下为base64的js:

var Base64 = {
    // 转码表
    table : [
        "A", "B", "C", "D", "E", "F", "G", "H",
        "I", "J", "K", "L", "M", "N", "O" ,"P",
        "Q", "R", "S", "T", "U", "V", "W", "X",
        "Y", "Z", "a", "b", "c", "d", "e", "f",
        "g", "h", "i", "j", "k", "l", "m", "n",
        "o", "p", "q", "r", "s", "t", "u", "v",
        "w", "x", "y", "z", "0", "1", "2", "3",
        "4", "5", "6", "7", "8", "9", "+", "/"
    ],
    UTF16ToUTF8 : function(str) {
        var res = [], len = str.length;
        for (var i = 0; i < len; i++) {
            var code = str.charCodeAt(i);
            if (code > 0x0000 && code <= 0x007F) {
                // 单字节,这里并不考虑0x0000,因为它是空字节
                // U+00000000 – U+0000007F     0xxxxxxx
                res.push(str.charAt(i));
            } else if (code >= 0x0080 && code <= 0x07FF) {
                // 双字节
                // U+00000080 – U+000007FF     110xxxxx 10xxxxxx
                // 110xxxxx
                var byte1 = 0xC0 | ((code >> 6) & 0x1F);
                // 10xxxxxx
                var byte2 = 0x80 | (code & 0x3F);
                res.push(
                    String.fromCharCode(byte1),
                    String.fromCharCode(byte2)
                );
            } else if (code >= 0x0800 && code <= 0xFFFF) {
                // 三字节
                // U+00000800 – U+0000FFFF     1110xxxx 10xxxxxx 10xxxxxx
                // 1110xxxx
                var byte1 = 0xE0 | ((code >> 12) & 0x0F);
                // 10xxxxxx
                var byte2 = 0x80 | ((code >> 6) & 0x3F);
                // 10xxxxxx
                var byte3 = 0x80 | (code & 0x3F);
                res.push(
                    String.fromCharCode(byte1),
                    String.fromCharCode(byte2),
                    String.fromCharCode(byte3)
                );
            } else if (code >= 0x00010000 && code <= 0x001FFFFF) {
                // 四字节
                // U+00010000 – U+001FFFFF     11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
            } else if (code >= 0x00200000 && code <= 0x03FFFFFF) {
                // 五字节
                // U+00200000 – U+03FFFFFF     111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
            } else /** if (code >= 0x04000000 && code <= 0x7FFFFFFF)*/ {
                // 六字节
                // U+04000000 – U+7FFFFFFF     1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
            }
        }

        return res.join("");
    },
    UTF8ToUTF16 : function(str) {
        var res = [], len = str.length;
        var i = 0;
        for (var i = 0; i < len; i++) {
            var code = str.charCodeAt(i);
            // 对第一个字节进行判断
            if (((code >> 7) & 0xFF) == 0x0) {
                // 单字节
                // 0xxxxxxx
                res.push(str.charAt(i));
            } else if (((code >> 5) & 0xFF) == 0x6) {
                // 双字节
                // 110xxxxx 10xxxxxx
                var code2 = str.charCodeAt(++i);
                var byte1 = (code & 0x1F) << 6;
                var byte2 = code2 & 0x3F;
                var utf16 = byte1 | byte2;
                res.push(Sting.fromCharCode(utf16));
            } else if (((code >> 4) & 0xFF) == 0xE) {
                // 三字节
                // 1110xxxx 10xxxxxx 10xxxxxx
                var code2 = str.charCodeAt(++i);
                var code3 = str.charCodeAt(++i);
                var byte1 = (code << 4) | ((code2 >> 2) & 0x0F);
                var byte2 = ((code2 & 0x03) << 6) | (code3 & 0x3F);
                var utf16 = ((byte1 & 0x00FF) << 8) | byte2
                res.push(String.fromCharCode(utf16));
            } else if (((code >> 3) & 0xFF) == 0x1E) {
                // 四字节
                // 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx
            } else if (((code >> 2) & 0xFF) == 0x3E) {
                // 五字节
                // 111110xx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
            } else /** if (((code >> 1) & 0xFF) == 0x7E)*/ {
                // 六字节
                // 1111110x 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx 10xxxxxx
            }
        }

        return res.join("");
    },
    encode : function(str) {
        if (!str) {
            return "";
        }
        var utf8    = this.UTF16ToUTF8(str); // 转成UTF8
        var i = 0; // 遍历索引
        var len = utf8.length;
        var res = [];
        while (i < len) {
            var c1 = utf8.charCodeAt(i++) & 0xFF;
            res.push(this.table[c1 >> 2]);
            // 需要补2个=
            if (i == len) {
                res.push(this.table[(c1 & 0x3) << 4]);
                res.push("==");
                break;
            }
            var c2 = utf8.charCodeAt(i++);
            // 需要补1个=
            if (i == len) {
                res.push(this.table[((c1 & 0x3) << 4) | ((c2 >> 4) & 0x0F)]);
                res.push(this.table[(c2 & 0x0F) << 2]);
                res.push("=");
                break;
            }
            var c3 = utf8.charCodeAt(i++);
            res.push(this.table[((c1 & 0x3) << 4) | ((c2 >> 4) & 0x0F)]);
            res.push(this.table[((c2 & 0x0F) << 2) | ((c3 & 0xC0) >> 6)]);
            res.push(this.table[c3 & 0x3F]);
        }

        return res.join("");
    },
    decode : function(str) {
        if (!str) {
            return "";
        }

        var len = str.length;
        var i   = 0;
        var res = [];

        while (i < len) {
            code1 = this.table.indexOf(str.charAt(i++));
            code2 = this.table.indexOf(str.charAt(i++));
            code3 = this.table.indexOf(str.charAt(i++));
            code4 = this.table.indexOf(str.charAt(i++));

            c1 = (code1 << 2) | (code2 >> 4);
            res.push(String.fromCharCode(c1));

            if (code3 != -1) {
                c2 = ((code2 & 0xF) << 4) | (code3 >> 2);
                res.push(String.fromCharCode(c2));
            }
            if (code4 != -1) {
                c3 = ((code3 & 0x3) << 6) | code4;
                res.push(String.fromCharCode(c3));
            }

        }

        return this.UTF8ToUTF16(res.join(""));
    }
};
使用:

先引入JS:

直接使用其中的方法:

Base64.decode(content);
关于图片的base64:

在图片中直接将src设置为你的base64就可以实现解码显示了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99381.html

相关文章

  • js手札--图片的Base64编码

    摘要:一编码在聊图片编码之前,先来说说编码,其实这一块已经有很多例子了。一次连接又是域名解析,开启连接,发送请求,等待网络延迟和服务器处理时间,下载资源较小是几个意思 一、Base64编码 在聊图片编码之前,先来说说Base64编码,其实这一块已经有很多例子了。 Base64编码么,其实就是一个招待好6爷,伺候好8爷的过程 Base64是把字符串转为二进制,然后末尾补零,使总长度能除尽24...

    junfeng777 评论0 收藏0
  • 前端开发中的字符编码

    摘要:当然,也可自己写一个转换函数,按照一定规则便行为编码的字节,如下例中国结果中国结果结果通过简单的函数,就可以完成编码到编码的转换,进而完成宽字节字符到编码的转换。 前端开发过程中会接触各种各样的编码,比较常见的主要是 UTF-8 和 HTML 实体编码,但是 web 前端的世界却不止这两种编码,而且编码的选择也会造成一定的问题,如前后端开发过程中不同编码的兼容、多字节编码可能会造成的 ...

    Rindia 评论0 收藏0
  • BASE64编码乱码问题的浅层分析与解释

    摘要:当后端将数据取出再传给前端时,发生了编码混乱的问题。这样的编码错误问题导致数据上的,会造成不良的用户体验。但是,不幸的是,各方对该编码的规则是不同的,这也造成乱码的隐患。 本文由作者朱臻授权网易云社区发布。 1问题案例 曾在开发过程中,我们遇到了BASE64编码乱码的问题,该问题的场景如下: 当web前端,将带有中文字符的字符串base64编码后,传到后端。当后端将数据取出再传给we...

    yacheng 评论0 收藏0
  • Base64 JS编码/解码

    摘要:注意点如果所示,上面说到的编码解码方法并不支持中文,因为它们只支持编码。转换编码中文进行转码之后在编码。最优方案在某些情况下,用了上面的方法也会出现中文乱码的情况,如获取到的音乐歌词解析出来的歌词等。 为什么要编码 简单粗暴的解释就是为了数据的安全性。 编码/解码常用方法(仅针对Base64) 编码 我们一般使用 window.btoa() 对原始数据进行编码。 解码 我们一般使用 w...

    why_rookie 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<