คุณสามารถเข้ารหัส/ถอดรหัสสตริงเป็น Base64 ใน JavaScript ได้อย่างไร?

ฉันมีสคริปต์ PHP ที่สามารถเข้ารหัสภาพ PNG เป็นสตริง Base64 ได้

ฉันอยากทำสิ่งเดียวกันโดยใช้ JavaScript ฉันรู้วิธีเปิดไฟล์ แต่ฉันไม่แน่ใจว่าจะทำการเข้ารหัสอย่างไร ฉันไม่ค่อยคุ้นเคยกับการทำงานกับข้อมูลแบบไบนารี

คำตอบ #1

คุณสามารถใช้ btoa() และ atob() เพื่อแปลงไปและกลับจากการเข้ารหัส base64 ได้

ดูเหมือนว่าจะมีความสับสนบางอย่างในความคิดเห็นเกี่ยวกับสิ่งที่ฟังก์ชันเหล่านี้รับเข้า/ส่งกลับ ดังนั้น…

• btoa() รับค่า "สตริง" ซึ่งแต่ละตัวอักษรแทนไบต์ 8 บิต - ถ้าคุณส่งสตริงที่มีตัวอักษรที่ไม่สามารถแทนค่าด้วย 8 บิตได้ มันอาจจะเกิดข้อผิดพลาด นี่ไม่ใช่ปัญหา ถ้า คุณกำลังใช้สตริงนั้นเป็นอาร์เรย์ของไบต์จริง ๆ แต่ถ้าคุณพยายามทำอย่างอื่น คุณจะต้องเข้ารหัสมันก่อน

• atob() คืนค่าเป็น “สตริง” ซึ่งแต่ละอักขระแทนไบต์ 8 บิต - นั่นหมายความว่าค่าของมันจะอยู่ระหว่าง 0 ถึง 0xff นี่ ไม่ได้ หมายความว่ามันเป็น ASCII - สมมติว่าถ้าคุณใช้ฟังก์ชันนี้ คุณคาดหวังที่จะทำงานกับข้อมูลไบนารี ไม่ใช่ข้อความ

ดูเพิ่มเติม:

• ฉันจะโหลดข้อมูลภาพไบนารีโดยใช้ Javascript และ XMLHttpRequest ได้อย่างไร?

ความคิดเห็นส่วนใหญ่ที่นี่ล้าสมัยแล้ว คุณน่าจะสามารถใช้ทั้ง btoa() และ atob() ได้ เว้นแต่คุณจะสนับสนุนเบราว์เซอร์ที่ล้าสมัยจริงๆ

ตรวจสอบที่นี่:

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

คำตอบ #2

จากที่นี่:

/**
*
*  Base64 encode / decode
*  http://www.webtoolkit.info/
*
**/
var Base64 = {

    // private property
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

    // public method for encoding
    encode : function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;

        input = Base64._utf8_encode(input);

        while (i < input.length) {

            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(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 +
            this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) +
            this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
        }
        return output;
    },

    // public method for decoding
    decode : function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

        while (i < input.length) {

            enc1 = this._keyStr.indexOf(input.charAt(i++));
            enc2 = this._keyStr.indexOf(input.charAt(i++));
            enc3 = this._keyStr.indexOf(input.charAt(i++));
            enc4 = this._keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            output = output + String.fromCharCode(chr1);

            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
        }

        output = Base64._utf8_decode(output);

        return output;
    },

    // private method for UTF-8 encoding
    _utf8_encode : function (string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    },

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

        while ( i < utftext.length ) {

            c = utftext.charCodeAt(i);

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

นอกจากนี้ การค้นหา "การเข้ารหัส base64 ของ JavaScript" จะพบตัวเลือกอื่นๆ มากมาย และตัวเลือกข้างต้นเป็นตัวเลือกแรก

คำตอบ #3

อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 10+

// Define the string
var string = 'Hello World!';

// Encode the String
var encodedString = btoa(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"

// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

Cross-Browser

// Create Base64 Object
var Base64={_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/[^A-Za-z0-9\+\/\=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/\r\n/g,"\n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}

// Define the string
var string = 'Hello World!';

// Encode the String
var encodedString = Base64.encode(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"

// Decode the String
var decodedString = Base64.decode(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

jsFiddle

ด้วย Node.js

ใน Node.js คุณสามารถเข้ารหัสข้อความปกติเป็น base64 ด้วย Buffer.fromString

/* 
  Buffer() requires a number, array or string as the first parameter, 
  and an optional encoding type as the second parameter.
  The default is "utf8". Possible encoding types are 
  "ascii", "utf8", "ucs2", "base64", "binary", and "hex"
*/
var b = Buffer.from('JavaScript');
/*
  If we don't use toString(), JavaScript assumes we want to convert the 
  object to utf8.
  We can make it convert to other formats by passing the encoding 
  type to toString().
*/

var s = b.toString('base64');

และนี่คือวิธีที่คุณถอดรหัสสตริงที่เข้ารหัสด้วย base64:

var b = Buffer.from('SmF2YVNjcmlwdA==', 'base64')
var s = b.toString();

ด้วย Dojo.js

เพื่อเข้ารหัสอาร์เรย์ของไบต์โดยใช้ dojox.encoding.base64:

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

ในการถอดรหัสสตริงที่เข้ารหัสแบบ Base64:

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

ติดตั้ง angular-base64 ด้วย Bower

<script src="bower_components/angular-base64/angular-base64.js"></script>

angular
    .module('myApp', ['base64'])
    .controller('myController', [

    '$base64', '$scope',
    function($base64, $scope) {

        $scope.encoded = $base64.encode('a string');
        $scope.decoded = $base64.decode('YSBzdHJpbmc=');
}]);

คำตอบ #4

โค้ดของ Sunny ยอดเยี่ยม ยกเว้นมันเกิดข้อผิดพลาดบน Internet Explorer 7 เนื่องจากการอ้างอิงถึง "this" ปัญหานี้ได้รับการแก้ไขโดยการแทนที่การอ้างอิงดังกล่าวด้วย "Base64":

var Base64 = {
    // private property
    _keyStr : "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",

    // public method for encoding
    encode : function (input) {
        var output = "";
        var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
        var i = 0;

        input = Base64._utf8_encode(input);

        while (i < input.length) {

            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(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 +
            Base64._keyStr.charAt(enc1) + Base64._keyStr.charAt(enc2) +
            Base64._keyStr.charAt(enc3) + Base64._keyStr.charAt(enc4);
        }

        return output;
    },

    // public method for decoding
    decode : function (input) {
        var output = "";
        var chr1, chr2, chr3;
        var enc1, enc2, enc3, enc4;
        var i = 0;

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

        while (i < input.length) {

            enc1 = Base64._keyStr.indexOf(input.charAt(i++));
            enc2 = Base64._keyStr.indexOf(input.charAt(i++));
            enc3 = Base64._keyStr.indexOf(input.charAt(i++));
            enc4 = Base64._keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            output = output + String.fromCharCode(chr1);

            if (enc3 != 64) {
                output = output + String.fromCharCode(chr2);
            }
            if (enc4 != 64) {
                output = output + String.fromCharCode(chr3);
            }
        }

        output = Base64._utf8_decode(output);

        return output;
    },

    // private method for UTF-8 encoding
    _utf8_encode : function (string) {
        string = string.replace(/\r\n/g,"\n");
        var utftext = "";

        for (var n = 0; n < string.length; n++) {

            var c = string.charCodeAt(n);

            if (c < 128) {
                utftext += String.fromCharCode(c);
            }
            else if((c > 127) && (c < 2048)) {
                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            }
            else {
                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    },

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

        while ( i < utftext.length ) {

            c = utftext.charCodeAt(i);

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

คำตอบ #5

จากความคิดเห็น (โดย SET และ Stefan Steiger) ด้านล่างคำตอบที่ถูกยอมรับ นี่คือสรุปอย่างรวดเร็วเกี่ยวกับวิธีการเข้ารหัส/ถอดรหัสสตริงเป็น/จาก Base64 โดยไม่จำเป็นต้องใช้ไลบรารี

str = "The quick brown fox jumps over the lazy dog";
b64 = btoa(unescape(encodeURIComponent(str)));
str = decodeURIComponent(escape(window.atob(b64)));

ตัวอย่าง JavaScript ล้วน

const input = document.getElementsByTagName('input')[0];
const btnConv = document.getElementById('btnConv');
const btnDeConv = document.getElementById('btnDeConv');

input.value = "The quick brown fox jumps over the lazy dog";

btnConv.addEventListener('click', () => {
  const txt = input.value;
  const b64 = btoa(unescape(encodeURIComponent(txt)));
  input.value = b64;
  btnDeConv.style.display = 'block';
  btnConv.style.display = 'none';
});

btnDeConv.addEventListener('click', () => {
  var b64 = input.value;
  var txt = decodeURIComponent(escape(window.atob(b64)));
  input.value = txt;
  btnConv.style.display = 'block';
  btnDeConv.style.display = 'none';
});

input{width:500px;}
#btnDeConv{display:none;}

<div><input type="text" /></div>
<button id="btnConv">Convert</button>
<button id="btnDeConv">DeConvert</button>

.

สาธิต jQuery (ใช้ไลบรารี jQuery สำหรับการแสดงผล แต่ไม่ใช้สำหรับการเข้ารหัส/ถอดรหัส)

str = "The quick brown fox jumps over the lazy dog";

$('input').val(str);

$('#btnConv').click(function(){
  var txt = $('input').val();
  var b64 = btoa(unescape(encodeURIComponent(txt)));
  $('input').val(b64);
  $('#btnDeConv').show();
});
$('#btnDeConv').click(function(){
  var b64 = $('input').val();
  var txt = decodeURIComponent(escape(window.atob(b64)));
  $('input').val(txt);
});

#btnDeConv{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" />
<button id="btnConv">Convert</button>
<button id="btnDeConv">DeConvert</button>

ดูเพิ่มเติม:

Base64 - เอกสารเว็บ MDN
ตรวจสอบว่าสตริงเป็น Base64 ใน JavaScript

คำตอบ #6

คุณสามารถใช้ btoa (เพื่อเป็น Base64) และ atob (จาก Base64) ได้

สำหรับ Internet Explorer 9 และต่ำกว่า ลองใช้ปลั๊กอิน jquery-base64:

$.base64.encode("this is a test");
$.base64.decode("dGhpcyBpcyBhIHRlc3Q=");

คำตอบ #7

ถ้าคุณใช้ Node.js คุณสามารถทำแบบนี้ได้:

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

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

คำตอบ #8

มีข้อบกพร่องสองข้อในทั้งสองการใช้งานของ _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;
}

คำตอบ #9

สำหรับเบราว์เซอร์รุ่นใหม่ คุณสามารถใช้สิ่งต่อไปนี้ได้

const base64 = {
    decode: s => Uint8Array.from(atob(s), c => c.charCodeAt(0)),
    encode: b => btoa(String.fromCharCode(...new Uint8Array(b))),
    decodeToString: s => new TextDecoder().decode(base64.decode(s)),
    encodeString: s => base64.encode(new TextEncoder().encode(s)),
};

สำหรับ Node.js คุณสามารถใช้สิ่งต่อไปนี้เพื่อเข้ารหัสสตริง, Buffer, หรือ Uint8Array เป็นสตริง และถอดรหัสจากสตริง, Buffer, หรือ Uint8Array เป็น Buffer

const base64 = {
    decode: s => Buffer.from(s, 'base64'),
    encode: b => Buffer.from(b).toString('base64')
};

คำตอบ #10

คำถามนี้และคำตอบของมันชี้แนวทางที่ถูกต้องให้ฉัน โดยเฉพาะเกี่ยวกับ 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"

ฟังก์ชันเหล่านี้จะทำงานได้เร็วมากเมื่อเปรียบเทียบกับการถอดรหัส Base64 แบบดิบโดยใช้ฟังก์ชัน JavaScript ที่กำหนดเอง เนื่องจาก btoa และ atob ถูกดำเนินการนอกตัวแปลภาษา

ถ้าคุณสามารถละเลย Internet Explorer รุ่นเก่าและโทรศัพท์มือถือเก่าๆ (เช่น iPhone 3?) นี่ควรจะเป็นวิธีแก้ปัญหาที่ดี

คำตอบ #11

โดยพื้นฐานแล้วฉันเพิ่งทำความสะอาดโค้ดต้นฉบับเล็กน้อยเพื่อให้ JSLint ไม่ร้องเรียนมากนัก และฉันได้ทำให้เมธอดที่ถูกทำเครื่องหมายว่าเป็นส่วนตัวในคอมเมนต์เป็นส่วนตัวจริง ๆ นอกจากนี้ฉันยังได้เพิ่มเมธอดสองอย่างที่ฉันต้องการในโปรเจ็กต์ของตัวเอง ได้แก่ decodeToHex และ encodeFromHex

โค้ด:

var Base64 = (function() {
    "use strict";

    var _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";

    var _utf8_encode = function (string) {

        var utftext = "", c, n;

        string = string.replace(/\r\n/g,"\n");

        for (n = 0; n < string.length; n++) {

            c = string.charCodeAt(n);

            if (c < 128) {

                utftext += String.fromCharCode(c);

            } else if((c > 127) && (c < 2048)) {

                utftext += String.fromCharCode((c >> 6) | 192);
                utftext += String.fromCharCode((c & 63) | 128);
            } else {

                utftext += String.fromCharCode((c >> 12) | 224);
                utftext += String.fromCharCode(((c >> 6) & 63) | 128);
                utftext += String.fromCharCode((c & 63) | 128);
            }
        }
        return utftext;
    };

    var _utf8_decode = function (utftext) {
        var string = "", i = 0, 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;
    };

    var _hexEncode = function(input) {
        var output = '', i;

        for(i = 0; i < input.length; i++) {
            output += input.charCodeAt(i).toString(16);
        }

        return output;
    };

    var _hexDecode = function(input) {
        var output = '', i;

        if(input.length % 2 > 0) {
            input = '0' + input;
        }

        for(i = 0; i < input.length; i = i + 2) {
            output += String.fromCharCode(parseInt(input.charAt(i) + input.charAt(i + 1), 16));
        }
        return output;
    };

    var encode = function (input) {
        var output = "", chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;

        input = _utf8_encode(input);

        while (i < input.length) {

            chr1 = input.charCodeAt(i++);
            chr2 = input.charCodeAt(i++);
            chr3 = input.charCodeAt(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 += _keyStr.charAt(enc1);
            output += _keyStr.charAt(enc2);
            output += _keyStr.charAt(enc3);
            output += _keyStr.charAt(enc4);
        }
        return output;
    };

    var decode = function (input) {
        var output = "", chr1, chr2, chr3, enc1, enc2, enc3, enc4, i = 0;

        input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");

        while (i < input.length) {

            enc1 = _keyStr.indexOf(input.charAt(i++));
            enc2 = _keyStr.indexOf(input.charAt(i++));
            enc3 = _keyStr.indexOf(input.charAt(i++));
            enc4 = _keyStr.indexOf(input.charAt(i++));

            chr1 = (enc1 << 2) | (enc2 >> 4);
            chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
            chr3 = ((enc3 & 3) << 6) | enc4;

            output += String.fromCharCode(chr1);

            if (enc3 !== 64) {
                output += String.fromCharCode(chr2);
            }
            if (enc4 !== 64) {
                output += String.fromCharCode(chr3);
            }

        }

        return _utf8_decode(output);
    };

    var decodeToHex = function(input) {
        return _hexEncode(decode(input));
    };

    var encodeFromHex = function(input) {
        return encode(_hexDecode(input));
    };

    return {
        'encode': encode,
        'decode': decode,
        'decodeToHex': decodeToHex,
        'encodeFromHex': encodeFromHex
    };
}());

คำตอบ #12

โปรดทราบว่าสิ่งนี้ไม่เหมาะสำหรับสตริง Unicode แบบดิบ! ดูส่วน Unicode ที่นี่

ไวยากรณ์สำหรับการเข้ารหัส

var encodedData = window.btoa(stringToEncode);

ไวยากรณ์สำหรับการถอดรหัส

var decodedData = window.atob(encodedData);

คำตอบ #13

ฉันได้เขียนใหม่วิธีการเข้ารหัสและถอดรหัสเหล่านี้ด้วยมือ ยกเว้นวิธีเลขฐานสิบหก ให้เป็นรูปแบบโมดูลาร์เพื่อให้เข้ากันได้กับหลายแพลตฟอร์ม/เบราว์เซอร์ และยังมีการกำหนดขอบเขตส่วนตัวจริงๆ และใช้ btoa และ atob หากมีอยู่เนื่องจากความเร็ว แทนที่จะใช้การเข้ารหัสของตัวเอง:

https://gist.github.com/Nijikokun/5192472

การใช้งาน :

base64.encode(/* String */);
base64.decode(/* String */);

utf8.encode(/* String */);
utf8.decode(/* String */);

คำตอบ #14

เพื่อทำให้สตริงที่เข้ารหัสแบบ 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, '/');

ดูตัวอย่าง Fiddle นี้ด้วย: http://jsfiddle.net/magikMaker/7bjaT/

คำตอบ #15

การอัปเดตคำเตือนการเลิกใช้ปี 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

ดังนั้นวิธีแก้ปัญหาสำหรับคำเตือนการเลิกใช้งานในเว็บ JS คือใช้ window.btoa และคำเตือนจะหายไป

คำตอบ #16

ถ้าคุณต้องการเข้ารหัสออบเจ็กต์รูปภาพ 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
}

เพื่อรับการเข้ารหัส Base64 ของรูปภาพโดยใช้รหัสไอดี:

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

มีมากกว่านี้อยู่ที่นี่