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

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


当前回答

您可以使用btoa()和atob()来转换base64编码。

关于这些函数接受/返回什么,评论中似乎有一些混淆,所以…

btoa() accepts a “string” where each character represents an 8-bit byte – if you pass a string containing characters that can’t be represented in 8 bits, it will probably break. This isn’t a problem if you’re actually treating the string as a byte array, but if you’re trying to do something else then you’ll have to encode it first. atob() returns a “string” where each character represents an 8-bit byte – that is, its value will be between 0 and 0xff. This does not mean it’s ASCII – presumably if you’re using this function at all, you expect to be working with binary data and not text.

参见:

如何使用Javascript和XMLHttpRequest加载二进制图像数据?


这里的大多数评论都过时了。您可能同时使用btoa()和atob(),除非您支持非常过时的浏览器。

检查:

https://caniuse.com/?search=atob https://caniuse.com/?search=btoa

其他回答

如果您正在使用Dojo。它为我们提供了编码或解码为Base64的直接方法。

试试这个:

使用dojox.encoding.base64对字节数组进行编码:

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

解码一个base64编码的字符串:

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

2022年弃用警告更新

我在我的vscode上看到了弃用警告

This function is only provided for compatibility with legacy web platform APIs and should never be used in new code, 
because they use strings to represent binary data and predate the introduction of typed arrays in JavaScript. 
For code running using Node.js APIs, 
converting between base64-encoded strings and binary data should be performed using Buffer.from(str, 'base64') andbuf.toString('base64').

在搜索了一些之后,我发现这个问题说它没有被弃用

https://github.com/microsoft/TypeScript/issues/45566

所以解决web JS弃用警告的方法是使用window.btoa 警告就会消失。

如果你需要编码一个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));
}

还有更多。

如果你使用Node.js,你可以这样做:

let a = Buffer.from('JavaScript').toString('base64');
console.log(a);

let b = Buffer.from(a, 'base64').toString();
console.log(b);

这里的所有解决方案在某些情况下似乎都失败了,而且理解起来相当复杂。 特别是对于非拉丁语言,如阿拉伯语

这里有一个解码UTF-16的简短解决方案

//decodes utf-16 characters such as ARABIC, URDU,PASHTO text
function decodeBase64(s) {
    var percentEncodedStr = atob(s).split('').map(function (c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join('');
    return decodeURIComponent(percentEncodedStr);
}