我有一个PHP脚本,可以将PNG图像编码为Base64字符串。
我想用JavaScript做同样的事情。我知道如何打开文件,但我不知道如何进行编码。我不习惯使用二进制数据。
我有一个PHP脚本,可以将PNG图像编码为Base64字符串。
我想用JavaScript做同样的事情。我知道如何打开文件,但我不知道如何进行编码。我不习惯使用二进制数据。
当前回答
你可以用window。Btoa和window.atob…
const encoded = window.btoa('Alireza Dezfoolian'); // encode a string
const decoded = window.atob(encoded); // decode the string
也许使用MDN的方式可以最好地完成你的工作…也接受Unicode…使用这两个简单的函数:
// UCS-2 string to Base64 encoded ASCII
function utoa(str) {
return window.btoa(unescape(encodeURIComponent(str)));
}
// Base64 encoded ASCII to UCS-2 string
function atou(str) {
return decodeURIComponent(escape(window.atob(str)));
}
// Usage:
utoa('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
atou('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
utoa('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
atou('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"
其他回答
你可以用window。Btoa和window.atob…
const encoded = window.btoa('Alireza Dezfoolian'); // encode a string
const decoded = window.atob(encoded); // decode the string
也许使用MDN的方式可以最好地完成你的工作…也接受Unicode…使用这两个简单的函数:
// UCS-2 string to Base64 encoded ASCII
function utoa(str) {
return window.btoa(unescape(encodeURIComponent(str)));
}
// Base64 encoded ASCII to UCS-2 string
function atou(str) {
return decodeURIComponent(escape(window.atob(str)));
}
// Usage:
utoa('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
atou('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
utoa('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
atou('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"
您可以使用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
您可以在浏览器中使用btoa()/atob(),但需要一些改进,如https://base64tool.com/uncaught-domexception-btoa-on-window/和https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/btoa所述的UTF字符串支持!
如果你需要编码一个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));
}
还有更多。
这个问题和它的答案为我指明了正确的方向。 特别是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?),这应该是一个很好的解决方案。