ไม่สามารถดำเนินการ 'btoa' บน 'Window': สตริงที่จะเข้ารหัสมีอักขระที่อยู่นอกช่วง Latin1


133

ข้อผิดพลาดในชื่อปรากฏเฉพาะใน Google Chrome ตามการทดสอบของฉัน ฉันกำลังเข้ารหัสไฟล์ XML ขนาดใหญ่ base64 เพื่อให้สามารถดาวน์โหลดได้:

this.loader.src = "data:application/x-forcedownload;base64,"+
                  btoa("<?xml version=\"1.0\" encoding=\"utf-8\"?>"
                  +"<"+this.gamesave.tagName+">"
                  +this.xml.firstChild.innerHTML
                  +"</"+this.gamesave.tagName+">");

this.loader ซ่อน iframe

ข้อผิดพลาดนี้ค่อนข้างเปลี่ยนแปลงเพราะโดยปกติแล้ว Google Chrome จะขัดข้องเมื่อมีการbtoaโทร Mozilla Firefox ไม่มีปัญหาที่นี่ปัญหาจึงเกี่ยวข้องกับเบราว์เซอร์ ฉันไม่ทราบว่ามีอักขระแปลก ๆ ในไฟล์ อันที่จริงฉันเชื่อว่าไม่มีอักขระที่ไม่ใช่ ascii

ถาม: ฉันจะค้นหาอักขระที่มีปัญหาและแทนที่เพื่อให้ Chrome หยุดบ่นได้อย่างไร

ฉันได้พยายามใช้ Downloadify เพื่อเริ่มการดาวน์โหลด แต่ไม่ได้ผล ไม่น่าเชื่อถือและไม่มีข้อผิดพลาดใด ๆ เพื่อให้สามารถแก้ไขข้อบกพร่องได้

คำตอบ:


213

หากคุณมี UTF8 ให้ใช้สิ่งนี้ (ใช้ได้กับแหล่ง SVG) เช่น:

btoa(unescape(encodeURIComponent(str)))

ตัวอย่าง:

 var imgsrc = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(markup)));
 var img = new Image(1, 1); // width, height values are optional params 
 img.src = imgsrc;

หากคุณต้องการถอดรหัส base64 นั้นให้ใช้สิ่งนี้:

var str2 = decodeURIComponent(escape(window.atob(b64)));
console.log(str2);

ตัวอย่าง:

var str = "äöüÄÖÜçéèñ";
var b64 = window.btoa(unescape(encodeURIComponent(str)))
console.log(b64);

var str2 = decodeURIComponent(escape(window.atob(b64)));
console.log(str2);

หมายเหตุ:หากคุณต้องการให้สิ่งนี้ทำงานใน mobile-safari คุณอาจต้องตัดช่องว่างทั้งหมดออกจากข้อมูล base64 ...

function b64_to_utf8( str ) {
    str = str.replace(/\s/g, '');    
    return decodeURIComponent(escape(window.atob( str )));
}

อัปเดต 2017

ปัญหานี้รบกวนฉันอีกแล้ว
ความจริงง่ายๆก็คือ atob ไม่ได้จัดการกับ UTF8-strings แต่เป็น ASCII เท่านั้น
นอกจากนี้ฉันจะไม่ใช้ bloatware เช่น js-base64
แต่webtoolkitมีการใช้งานที่เล็กดีและบำรุงรักษาได้มาก:

/**
*
*  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);
        } // Whend 

        return output;
    } // End Function encode 


    // 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);
            }

        } // Whend 

        output = Base64._utf8_decode(output);

        return output;
    } // End Function decode 


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

        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);
            }

        } // Next n 

        return utftext;
    } // End Function _utf8_encode 

    // private method for UTF-8 decoding
    ,_utf8_decode: function (utftext)
    {
        var string = "";
        var i = 0;
        var c, c1, c2, c3;
        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;
            }

        } // Whend 

        return string;
    } // End Function _utf8_decode 

}

https://www.fileformat.info/info/unicode/utf8.htm

  • สำหรับอักขระใด ๆ ที่มีค่าเท่ากับหรือต่ำกว่า 127 (hex 0x7F) การแทนค่า UTF-8 จะเป็นหนึ่งไบต์ มันเป็นเพียง 7 บิตต่ำสุดของค่ายูนิโคดเต็ม นี่ก็เหมือนกับค่า ASCII

  • สำหรับอักขระที่มีค่าเท่ากับหรือต่ำกว่า 2047 (ฐานสิบหก 0x07FF) การแทนค่า UTF-8 จะกระจายไปทั่วสองไบต์ ไบต์แรกจะมีบิตสูงสองชุดและบิตที่สามชัดเจน (เช่น 0xC2 ถึง 0xDF) ไบต์ที่สองจะมีชุดบิตบนสุดและบิตที่สองชัดเจน (เช่น 0x80 ถึง 0xBF)

  • สำหรับอักขระทั้งหมดที่มีค่าเท่ากับหรือมากกว่า 2048 แต่น้อยกว่า 65535 (0xFFFF) การแสดง UTF-8 จะกระจายไปทั่วสามไบต์


6
คุณช่วยอธิบายเพิ่มเติมอีกหน่อยได้ไหม ... ฉันหลงทางโดยสิ้นเชิง
มูฮัมหมัดอูเมอร์

ฉันจะเรียกใช้รหัสถ้าฉันเป็นคุณ escapeแปลงสตริงในสตริงที่มีเฉพาะอักขระที่ถูกต้องของ URL ที่ป้องกันข้อผิดพลาด
Tomáš Zato - คืนสถานะ Monica

6
escapeและunescapeเลิกใช้งานใน JavaScript 1.5 และควรใช้encodeURIComponentหรือdecodeURIComponentตามลำดับแทน คุณกำลังใช้ฟังก์ชันใหม่ที่เลิกใช้แล้วและใหม่ร่วมกัน ทำไม? ดู: w3schools.com/jsref/jsref_escape.asp
Leif

2
@ Leif: สิ่งนี้ใช้งานได้อย่างแม่นยำเท่านั้นเพราะการหลบหนีและ unescape เป็นรถ (ในทางเดียวกัน);)
Stefan Steiger

8
มีใครอีกบ้างที่ได้รับผลกระทบจากการใช้ webpack?
Avindra Goolcharan

18

ใช้btoaกับunescapeและencodeURIComponentไม่ได้ผลสำหรับฉัน การแทนที่อักขระพิเศษทั้งหมดด้วยเอนทิตี XML / HTML จากนั้นการแปลงเป็นการแสดง base64 เป็นวิธีเดียวที่จะแก้ปัญหานี้ให้ฉัน รหัสบางส่วน:

base64 = btoa(str.replace(/[\u00A0-\u2666]/g, function(c) {
    return '&#' + c.charCodeAt(0) + ';';
}));

1
เนื่องจากฉันโพสต์คำถามนี้ฉันได้เรียนรู้เล็กน้อยเกี่ยวกับ API ที่มีไว้สำหรับสิ่งที่ฉันกำลังทำโดยเฉพาะ หากสตริงที่คุณกำลังแปลงมีความยาวให้ใช้Blobออบเจ็กต์เพื่อจัดการการแปลง Blobสามารถจัดการกับข้อมูลไบนารีใด ๆ
Tomáš Zato - คืนสถานะ Monica

1
ไม่แน่ใจเกี่ยวกับ IE9 แต่ความคิดของฉันก็คือถ้าคุณกำลังทำสิ่งต่างๆเช่นฝั่งไคลเอ็นต์การแปลง base64 คุณอาจกำลังสร้างเว็บแอปที่ทันสมัยซึ่งไม่ช้าก็เร็วต้องมีคุณสมบัติที่ทันสมัยอยู่ดี นอกจากนี้ยังมีโพลีฟิลล์หยด
Tomáš Zato - คืนสถานะ Monica

1
@ItaloBorssatto คุณคือตำนาน!
codeepic

1
@ItaloBorssatto มันเป็นทางออกเดียวที่ได้ผลสำหรับฉัน ฉันต้องการมันเพื่อคว้าแผนภูมิ d3 svg ทำให้เป็นอนุกรมโดยใช้ XMLSerializer ส่งผ่านไปยัง btoa () (นี่คือที่ที่ฉันใช้โซลูชันของคุณ) เพื่อสร้างสตริง ASCII ที่เข้ารหัสฐาน -64 จากนั้นส่งไปยังองค์ประกอบภาพซึ่งเป็น จากนั้นวาดลงในแคนวาสแล้วส่งออกเพื่อให้คุณสามารถดาวน์โหลดรูปภาพที่ส่วนหน้าได้ วิธีแก้ปัญหาที่ค่อนข้างซับซ้อนและแฮ็ก แต่วิธีที่ไม่ต้องการแผนภูมิการแสดงผลฝั่งเซิร์ฟเวอร์เมื่อผู้ใช้ต้องการดาวน์โหลดกราฟิกบางส่วน หากคุณสนใจฉันสามารถส่งตัวอย่างโค้ดให้คุณได้ ความคิดเห็นสั้นเกินไปสำหรับพวกเขา
codeepic

1
@ItaloBorssatto <svg xmlns = " w3.org/2000/svg " viewBox = "0 0 1060 105" width = "1060" height = "105"> <path class = "domain" stroke = "none" d = "M -6,0.5H0.5V35.5H-6 "> <line stroke =" none "x2 =" - 6 "y1 =" 0.5 "y2 =" 0.5 "fill =" none "stroke-width =" 1px "font- family = "sans-serif" font-size = "10px" /> <text fill = "rgb (196, 196, 196)" x = "- 9" y = "0.5" dy = "0.32em"> VogueEspana - Vogue España </text> <rect class = "first bar" fill = "rgb (25, 244, 71)" x = "0" y = "8" width = "790" height = "18" /> </ g> </svg> ฉันตัดชิ้นส่วนที่ไม่เกี่ยวข้องออก ผู้ร้ายคือ Vogue España -> ป้องกันไม่ให้โหลดรูปภาพในเบราว์เซอร์
codeepic

15

ใช้ห้องสมุดแทน

เราไม่จำเป็นต้องสร้างล้อใหม่ เพียงแค่ใช้ห้องสมุดเพื่อประหยัดเวลาและปวดหัว

JS-base64

https://github.com/dankogai/js-base64นั้นดีและฉันยืนยันว่ามันรองรับ Unicode ได้เป็นอย่างดี

Base64.encode('dankogai');  // ZGFua29nYWk=
Base64.encode('小飼弾');    // 5bCP6aO85by+
Base64.encodeURI('小飼弾'); // 5bCP6aO85by-

Base64.decode('ZGFua29nYWk=');  // dankogai
Base64.decode('5bCP6aO85by+');  // 小飼弾
// note .decodeURI() is unnecessary since it accepts both flavors
Base64.decode('5bCP6aO85by-');  // 小飼弾

นี่เป็นทางออกที่ดีแม้ว่าการกำกับดูแล btoa จะ จำกัด อยู่ที่ ASCII (แม้ว่าการถอดรหัส atob ดูเหมือนจะทำงานได้ดี) สิ่งนี้ใช้ได้ผลสำหรับฉันหลังจากคำตอบอื่น ๆ หลายคำตอบไม่ได้ ขอบคุณ!
สำหรับชื่อ

9

ฉันแค่คิดว่าฉันควรแบ่งปันวิธีที่ฉันแก้ไขปัญหาได้จริงและทำไมฉันถึงคิดว่านี่เป็นวิธีแก้ปัญหาที่ถูกต้อง (หากคุณไม่ได้ปรับให้เหมาะสมกับเบราว์เซอร์เก่า)

การแปลงข้อมูลเป็น dataURL ( data: ...)

var blob = new Blob(
              // I'm using page innerHTML as data
              // note that you can use the array
              // to concatenate many long strings EFFICIENTLY
              [document.body.innerHTML],
              // Mime type is important for data url
              {type : 'text/html'}
); 
// This FileReader works asynchronously, so it doesn't lag
// the web application
var a = new FileReader();
a.onload = function(e) {
     // Capture result here
     console.log(e.target.result);
};
a.readAsDataURL(blob);

อนุญาตให้ผู้ใช้บันทึกข้อมูล

นอกเหนือจากโซลูชันที่ชัดเจน - การเปิดหน้าต่างใหม่ด้วย dataURL ของคุณเป็น URL คุณสามารถทำสิ่งอื่น ๆ ได้อีกสองอย่าง

1. ใช้fileSaver.js

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

2. ใช้ (ทดลอง) URL.createObjectURL

เหมาะอย่างยิ่งสำหรับการนำข้อมูลที่เข้ารหัส base64 กลับมาใช้ใหม่ สร้าง URL แบบสั้นสำหรับ dataURL ของคุณ:

console.log(URL.createObjectURL(blob));
//Prints: blob:http://stackoverflow.com/7c18953f-f5f8-41d2-abf5-e9cbced9bc42

อย่าลืมใช้ URL รวมทั้งblobคำนำหน้า ฉันใช้document.bodyอีกครั้ง:

คำอธิบายภาพ

คุณสามารถใช้ URL แบบสั้นนี้เป็นเป้าหมาย AJAX <script>แหล่งที่มาหรือ<a>ตำแหน่ง href คุณต้องรับผิดชอบในการทำลาย URL แม้ว่า:

URL.revokeObjectURL('blob:http://stackoverflow.com/7c18953f-f5f8-41d2-abf5-e9cbced9bc42')

ขอบคุณเพื่อนคุณช่วยวันของฉัน :)
Sandeep Kumar

3

เพื่อเป็นส่วนเติมเต็มให้กับคำตอบของ Stefan Steiger: (เนื่องจากมันดูไม่ดีเท่าความคิดเห็น)

การขยายต้นแบบสตริง:

String.prototype.b64encode = function() { 
    return btoa(unescape(encodeURIComponent(this))); 
};
String.prototype.b64decode = function() { 
    return decodeURIComponent(escape(atob(this))); 
};

การใช้งาน:

var str = "äöüÄÖÜçéèñ";
var encoded = str.b64encode();
console.log( encoded.b64decode() );

บันทึก:

ตามที่ระบุไว้ในความคิดเห็นunescapeไม่แนะนำให้ใช้เนื่องจากอาจถูกลบออกในอนาคต:

คำเตือน : แม้ว่า unescape () จะไม่ได้เลิกใช้งานอย่างเคร่งครัด (เช่นเดียวกับใน "ลบออกจากมาตรฐานเว็บ") แต่ก็มีการกำหนดไว้ในภาคผนวก B ของมาตรฐาน ECMA-262 ซึ่งมีสถานะการแนะนำ: ...คุณลักษณะและพฤติกรรมทางภาษาทั้งหมดที่ระบุไว้ในนี้ ภาคผนวกมีลักษณะที่ไม่พึงประสงค์อย่างน้อยหนึ่งอย่างและหากไม่มีการใช้งานแบบเดิมจะถูกลบออกจากข้อกำหนดนี้

หมายเหตุ: อย่าใช้ unescape เพื่อถอดรหัส URI ให้ใช้decodeURIหรือdecodeURIComponentแทน


6
ฟังก์ชั่นดูดี แต่การขยายฐานต้นแบบเป็นการปฏิบัติที่ไม่ดี
timemachine3030

4
Javascript เป็นวิธีปฏิบัติที่ไม่ดี มีอะไรอีกหนึ่งแฮ็คขอบคุณ
rob5408

1
@ rob5408: แม้ว่าฉันจะเห็นด้วยกับคำพูดของคุณในหลักการ แต่คุณควรระมัดระวังมากกว่านี้: การขยายต้นแบบจะทำลาย jQuery (ไลบรารีอื่นที่ใช้หลักการ "แฮ็กอีกเพียงหนึ่งเดียว")
Stefan Steiger

@StefanSteiger ดีที่ทราบขอบคุณสำหรับข้อมูลเชิงลึก
rob5408

unescapeจะเลิกใช้งานเร็ว ๆ นี้ตาม MDN developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Akansh

2

btoa () รองรับเฉพาะอักขระจาก String.fromCodePoint (0) จนถึง String.fromCodePoint (255) สำหรับอักขระ Base64 ที่มีจุดรหัส 256 ขึ้นไปคุณต้องเข้ารหัส / ถอดรหัสสิ่งเหล่านี้ก่อนและหลัง

และในจุดนี้มันจะกลายเป็นเรื่องยุ่งยาก ...

ทุกสัญญาณที่เป็นไปได้จะถูกจัดเรียงไว้ใน Unicode-Table Unicode-Table แบ่งออกเป็นระนาบต่างๆ (ภาษาสัญลักษณ์ทางคณิตศาสตร์และอื่น ๆ ... ) ทุกป้ายในเครื่องบินจะมีหมายเลขรหัสเฉพาะ ในทางทฤษฎีจำนวนอาจมีขนาดใหญ่โดยพลการ

คอมพิวเตอร์เก็บข้อมูลในหน่วยไบต์ (8 บิตเลขฐานสิบหก 0x00 - 0xff ไบนารี 00000000 - 11111111 ทศนิยม 0-255) โดยปกติช่วงนี้จะใช้เพื่อบันทึกอักขระพื้นฐาน (ช่วง Latin1)

สำหรับอักขระที่มีจุดรหัสสูงกว่า 255 จะมีการเข้ารหัสที่แตกต่างกัน JavaScript ใช้ 16 บิตต่อสัญญาณ (UTF-16) สตริงที่เรียกว่า DOMString Unicode สามารถจัดการจุดรหัสได้ถึง 0x10fffff นั่นหมายความว่าต้องมีเมธอดเก็บหลายบิตในเซลล์หลายเซลล์

String.fromCodePoint(0x10000).length == 2

UTF-16 ใช้คู่ตัวแทนเพื่อจัดเก็บ 20 บิตในเซลล์ 16 บิตสองเซลล์ ตัวแทนแรกที่สูงขึ้นเริ่มต้นด้วย110110xxxxxxxxxxหนึ่งที่สองที่ต่ำกว่าด้วย110111xxxxxxxxxx Unicode สงวนเครื่องบินของตัวเองไว้สำหรับสิ่งนี้: https://unicode-table.com/de/#high-surrogates

ในการจัดเก็บในตัวละครในไบต์ (ช่วง Latin1) ขั้นตอนมาตรฐานใช้UTF-8

ขออภัยที่ต้องพูดแบบนั้น แต่ฉันคิดว่าไม่มีวิธีอื่นในการใช้ฟังก์ชันนี้ด้วยตนเอง

function stringToUTF8(str)
{
    let bytes = [];

    for(let character of str)
    {
        let code = character.codePointAt(0);

        if(code <= 127)
        {
            let byte1 = code;

            bytes.push(byte1);
        }
        else if(code <= 2047)
        {
            let byte1 = 0xC0 | (code >> 6);
            let byte2 = 0x80 | (code & 0x3F);

            bytes.push(byte1, byte2);
        }
        else if(code <= 65535)
        {
            let byte1 = 0xE0 | (code >> 12);
            let byte2 = 0x80 | ((code >> 6) & 0x3F);
            let byte3 = 0x80 | (code & 0x3F);

            bytes.push(byte1, byte2, byte3);
        }
        else if(code <= 2097151)
        {
            let byte1 = 0xF0 | (code >> 18);
            let byte2 = 0x80 | ((code >> 12) & 0x3F);
            let byte3 = 0x80 | ((code >> 6) & 0x3F);
            let byte4 = 0x80 | (code & 0x3F);

            bytes.push(byte1, byte2, byte3, byte4);
        }
    }

    return bytes;
}

function utf8ToString(bytes, fallback)
{
    let valid = undefined;
    let codePoint = undefined;
    let codeBlocks = [0, 0, 0, 0];

    let result = "";

    for(let offset = 0; offset < bytes.length; offset++)
    {
        let byte = bytes[offset];

        if((byte & 0x80) == 0x00)
        {
            codeBlocks[0] = byte & 0x7F;

            codePoint = codeBlocks[0];
        }
        else if((byte & 0xE0) == 0xC0)
        {
            codeBlocks[0] = byte & 0x1F;

            byte = bytes[++offset];
            if(offset >= bytes.length || (byte & 0xC0) != 0x80) { valid = false; break; }

            codeBlocks[1] = byte & 0x3F;

            codePoint = (codeBlocks[0] << 6) + codeBlocks[1];
        }
        else if((byte & 0xF0) == 0xE0)
        {
            codeBlocks[0] = byte & 0xF;

            for(let blockIndex = 1; blockIndex <= 2; blockIndex++)
            {
                byte = bytes[++offset];
                if(offset >= bytes.length || (byte & 0xC0) != 0x80) { valid = false; break; }

                codeBlocks[blockIndex] = byte & 0x3F;
            }
            if(valid === false) { break; }

            codePoint = (codeBlocks[0] << 12) + (codeBlocks[1] << 6) + codeBlocks[2];
        }
        else if((byte & 0xF8) == 0xF0)
        {
            codeBlocks[0] = byte & 0x7;

            for(let blockIndex = 1; blockIndex <= 3; blockIndex++)
            {
                byte = bytes[++offset];
                if(offset >= bytes.length || (byte & 0xC0) != 0x80) { valid = false; break; }

                codeBlocks[blockIndex] = byte & 0x3F;
            }
            if(valid === false) { break; }

            codePoint = (codeBlocks[0] << 18) + (codeBlocks[1] << 12) + (codeBlocks[2] << 6) + (codeBlocks[3]);
        }
        else
        {
            valid = false; break;
        }

        result += String.fromCodePoint(codePoint);
    }

    if(valid === false)
    {
        if(!fallback)
        {
            throw new TypeError("Malformed utf-8 encoding.");
        }

        result = "";

        for(let offset = 0; offset != bytes.length; offset++)
        {
            result += String.fromCharCode(bytes[offset] & 0xFF);
        }
    }

    return result;
}

function decodeBase64(text, binary)
{
    if(/[^0-9a-zA-Z\+\/\=]/.test(text)) { throw new TypeError("The string to be decoded contains characters outside of the valid base64 range."); }

    let codePointA = 'A'.codePointAt(0);
    let codePointZ = 'Z'.codePointAt(0);
    let codePointa = 'a'.codePointAt(0);
    let codePointz = 'z'.codePointAt(0);
    let codePointZero = '0'.codePointAt(0);
    let codePointNine = '9'.codePointAt(0);
    let codePointPlus = '+'.codePointAt(0);
    let codePointSlash = '/'.codePointAt(0);

    function getCodeFromKey(key)
    {
        let keyCode = key.codePointAt(0);

        if(keyCode >= codePointA && keyCode <= codePointZ)
        {
            return keyCode - codePointA;
        }
        else if(keyCode >= codePointa && keyCode <= codePointz)
        {
            return keyCode + 26 - codePointa;
        }
        else if(keyCode >= codePointZero && keyCode <= codePointNine)
        {
            return keyCode + 52 - codePointZero;
        }
        else if(keyCode == codePointPlus)
        {
            return 62;
        }
        else if(keyCode == codePointSlash)
        {
            return 63;
        }

        return undefined;
    }

    let codes = Array.from(text).map(character => getCodeFromKey(character));

    let bytesLength = Math.ceil(codes.length / 4) * 3;

    if(codes[codes.length - 2] == undefined) { bytesLength = bytesLength - 2; } else if(codes[codes.length - 1] == undefined) { bytesLength--; }

    let bytes = new Uint8Array(bytesLength);

    for(let offset = 0, index = 0; offset < bytes.length;)
    {
        let code1 = codes[index++];
        let code2 = codes[index++];
        let code3 = codes[index++];
        let code4 = codes[index++];

        let byte1 = (code1 << 2) | (code2 >> 4);
        let byte2 = ((code2 & 0xf) << 4) | (code3 >> 2);
        let byte3 = ((code3 & 0x3) << 6) | code4;

        bytes[offset++] = byte1;
        bytes[offset++] = byte2;
        bytes[offset++] = byte3;
    }

    if(binary) { return bytes; }

    return utf8ToString(bytes, true);
}

function encodeBase64(bytes) {
    if (bytes === undefined || bytes === null) {
        return '';
    }
    if (bytes instanceof Array) {
        bytes = bytes.filter(item => {
            return Number.isFinite(item) && item >= 0 && item <= 255;
        });
    }

    if (
        !(
            bytes instanceof Uint8Array ||
            bytes instanceof Uint8ClampedArray ||
            bytes instanceof Array
        )
    ) {
        if (typeof bytes === 'string') {
            const str = bytes;
            bytes = Array.from(unescape(encodeURIComponent(str))).map(ch =>
                ch.codePointAt(0)
            );
        } else {
            throw new TypeError('bytes must be of type Uint8Array or String.');
        }
    }

    const keys = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'j',
        'k',
        'l',
        'm',
        'n',
        'o',
        'p',
        'q',
        'r',
        's',
        't',
        'u',
        'v',
        'w',
        'x',
        'y',
        'z',
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '+',
        '/'
    ];
    const fillKey = '=';

    let byte1;
    let byte2;
    let byte3;
    let sign1 = ' ';
    let sign2 = ' ';
    let sign3 = ' ';
    let sign4 = ' ';

    let result = '';

    for (let index = 0; index < bytes.length; ) {
        let fillUpAt = 0;

        // tslint:disable:no-increment-decrement
        byte1 = bytes[index++];
        byte2 = bytes[index++];
        byte3 = bytes[index++];

        if (byte2 === undefined) {
            byte2 = 0;
            fillUpAt = 2;
        }

        if (byte3 === undefined) {
            byte3 = 0;
            if (!fillUpAt) {
                fillUpAt = 3;
            }
        }

        // tslint:disable:no-bitwise
        sign1 = keys[byte1 >> 2];
        sign2 = keys[((byte1 & 0x3) << 4) + (byte2 >> 4)];
        sign3 = keys[((byte2 & 0xf) << 2) + (byte3 >> 6)];
        sign4 = keys[byte3 & 0x3f];

        if (fillUpAt > 0) {
            if (fillUpAt <= 2) {
                sign3 = fillKey;
            }
            if (fillUpAt <= 3) {
                sign4 = fillKey;
            }
        }

        result += sign1 + sign2 + sign3 + sign4;

        if (fillUpAt) {
            break;
        }
    }

    return result;
}

let base64 = encodeBase64("\u{1F604}"); // unicode code point escapes for smiley
let str = decodeBase64(base64);

console.log("base64", base64);
console.log("str", str);

document.body.innerText = str;

วิธีใช้: decodeBase64(encodeBase64("\u{1F604}"))

การสาธิต: https://jsfiddle.net/qrLadeb8/


ใช้งานได้ดี! 🎉ฉันไม่เห็นว่าคุณต้องการอะไรstringToUTF8และutf8ToStringแม้ว่า
Benjamin Toueg

1

ฉันเพิ่งประสบปัญหานี้ด้วยตัวเอง

ขั้นแรกแก้ไขโค้ดของคุณเล็กน้อย:

var download = "<?xml version=\"1.0\" encoding=\"utf-8\"?>"
                  +"<"+this.gamesave.tagName+">"
                  +this.xml.firstChild.innerHTML
                  +"</"+this.gamesave.tagName+">";

this.loader.src = "data:application/x-forcedownload;base64,"+
                  btoa(download);

จากนั้นใช้ตัวตรวจสอบเว็บที่คุณชื่นชอบวางเบรกพอยต์บนบรรทัดของโค้ดที่กำหนด this.loader.src จากนั้นรันโค้ดนี้:

for (var i = 0; i < download.length; i++) {
  if (download[i].charCodeAt(0) > 255) {
    console.warn('found character ' + download[i].charCodeAt(0) + ' "' + download[i] + '" at position ' + i);
  }
}

ขึ้นอยู่กับแอปพลิเคชันของคุณการแทนที่อักขระที่อยู่นอกช่วงอาจได้ผลหรือไม่ได้ผลเนื่องจากคุณกำลังแก้ไขข้อมูล ดูหมายเหตุบน MDN เกี่ยวกับอักขระ Unicode ด้วยวิธี btoa:

https://developer.mozilla.org/en-US/docs/Web/API/window.btoa

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.