JavaScript BASE64算法实现(完美解决中文乱码)

下面详细讲解一下JavaScript BASE64算法实现的攻略。

什么是BASE64算法

BASE64是一种将二进制数据编码成 ASCII 字符串的算法。它主要用于在字符集不兼容的情况下，将文本数据通过电子邮件传输，或者在需要保留文本格式的情况下，将二进制数据嵌入到文本文件中。

JavaScript实现BASE64算法

下面是一个JavaScript BASE64算法的实现，它完美解决中文乱码问题:

function utf8Encode(str) {
    var utf8 = unescape(encodeURIComponent(str));
    var arr = [];
    for (var i = 0; i < utf8.length; i++) {
        arr.push(utf8.charCodeAt(i));
    }
    return arr;
}

function base64Encode(str) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var utf8 = utf8Encode(str);
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
    while (i < utf8.length) {
        chr1 = utf8[i++];
        chr2 = utf8[i++];
        chr3 = utf8[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 +
            keyStr.charAt(enc1) +
            keyStr.charAt(enc2) +
            keyStr.charAt(enc3) +
            keyStr.charAt(enc4);
    }
    return output;
}

这里给出了两个函数utf8Encode和base64Encode实现了BASE64算法。utf8Encode函数将传入的字符串转换成UTF-8编码后的数组，base64Encode使用该数组进行BASE64编码并返回结果。

下面是一个使用base64Encode函数的示例：

var originalString = 'Hello BASE64! 你好 Base64！';
var encodedString = base64Encode(originalString);
console.log(encodedString);
// 输出结果： "SGVsbG8gQkFTRTY0ISDljJfku4tCe2Jhc2U2NCEC"

这里将一个包含中文的字符串编码成BASE64字符串，并输出结果。

更多示例

下面是另一个使用base64Encode函数的示例，它将一个包含图片的Blob对象转换成BASE64编码的字符串：

var img = new Image();
img.onload = function() {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
    canvas.toBlob(function(blob) {
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function() {
            var dataUrl = reader.result;
            var index = dataUrl.indexOf(';base64,');
            var base64 = dataUrl.substring(index + ';base64,'.length);
            console.log(base64);
        }
    });
};
img.src = 'example.png';

这里使用了HTML5的Canvas API将一个图片绘制到一个新的Canvas上，并获取该Canvas的Blob对象。然后使用FileReader读取Blob对象中的数据，并转换成BASE64编码的字符串。

总结

以上就是JavaScript实现BASE64算法的完整攻略，使用该算法可以方便地将二进制数据转换成可传输的字符串。