如何在JavaScript中将字符串编码为Base64 ?

我有一个PHP脚本，可以将PNG图像编码为Base64字符串。

我想用JavaScript做同样的事情。我知道如何打开文件，但我不知道如何进行编码。我不习惯使用二进制数据。

当前回答

JavaScript没有btoa中间步骤(没有库)

在问题标题中你写的是字符串转换，但在问题中你谈论的是二进制数据(图片)，所以这里有一个函数，从PNG图片二进制数据开始进行适当的转换(详细信息和反转转换在这里)。

2020-07-27 11:43:48

其他回答

为了使Base64编码的字符串URL友好，在JavaScript中你可以这样做:

// if this is your Base64 encoded string
var str = 'VGhpcyBpcyBhbiBhd2Vzb21lIHNjcmlwdA=='; 

// make URL friendly:
str = str.replace(/\+/g, '-').replace(/\//g, '_').replace(/\=+$/, '');

// reverse to original encoding
str = (str + '===').slice(0, str.length + (str.length % 4));
str = str.replace(/-/g, '+').replace(/_/g, '/');

参见这个小提琴:http://jsfiddle.net/magikMaker/7bjaT/

2011-08-21 15:07:38

在_utf8_decode的两个实现中都有一些错误。C1和c2由于var语句的错误使用被赋值为全局变量，c3根本没有初始化或声明。

它可以工作，但这些变量将覆盖该函数之外的任何具有相同名称的现有变量。

这里有一个版本不会这样做:

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

    while ( i < utftext.length ) {

        c = utftext.charCodeAt(i);

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

2011-07-26 21:14:36

您可以在浏览器中使用btoa()/atob()，但需要一些改进，如https://base64tool.com/uncaught-domexception-btoa-on-window/和https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa所述的UTF字符串支持!

2020-06-21 18:34:28

这个问题和它的答案为我指明了正确的方向。特别是Unicode, atob和btoa不能“香草”使用，这些天所有的东西都是Unicode…

直接来自Mozilla的两个很好的函数。使用Unicode和HTML标签进行测试:

function b64EncodeUnicode(str) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
        return String.fromCharCode('0x' + p1);
    }));
}

b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
b64EncodeUnicode('\n'); // "Cg=="


function b64DecodeUnicode(str) {
    return decodeURIComponent(Array.prototype.map.call(atob(str), function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

b64DecodeUnicode('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
b64DecodeUnicode('Cg=='); // "\n"

与使用自定义JavaScript函数的原始Base64解码相比，这些函数将以闪电般的速度执行，因为btoa和atob在解释器外部执行。

如果你可以忽略旧的ie浏览器和旧的手机(比如iPhone 3?)，这应该是一个很好的解决方案。

2016-11-03 02:24:41

如果你需要编码一个HTML图像对象，你可以写一个简单的函数，像这样:

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  // escape data:image prefix
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  // or just return dataURL
  // return dataURL
}

通过id获取图像的Base64编码:

function getBase64ImageById(id){
  return getBase64Image(document.getElementById(id));
}

还有更多。

2013-01-12 22:28:45

如何在JavaScript中将字符串编码为Base64 ?

推荐文章

最新文章

标签