Échec de l'exécution de 'btoa" sur "Fenêtre": La chaîne contient des caractères codés à l'extérieur de la Latin1 gamme.

Si vous avez UTF8, l'utiliser (en fait, il fonctionne avec des sources SVG), comme:

btoa(unescape(encodeURIComponent(str)))

exemple:

 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;

Si vous avez besoin de le décoder en base64, utilisez ceci:

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

Exemple:

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

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

Remarque: si vous avez besoin d'obtenir que cela fonctionne à mobile, safari, vous pourriez avoir besoin de dépouiller tous les espaces blancs de la base64 données...

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

---

2017 mise à Jour

Ce problème a été m'énerve de nouveau.

La simple vérité est, atob n'est pas vraiment gérer UTF8-cordes - c'est de l'ASCII.

Aussi, je ne voudrais pas utiliser inutilités comme js-base64.

Mais webtoolkit n'a pas une petite, agréable et très facile à entretenir mise en œuvre:

/**
*
*  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

• Pour n'importe quel caractère égal ou inférieur à 127 (hex 0x7F), l'UTF-8
  la représentation est un octet. C'est juste le plus bas de 7 bits de la pleine
  valeur unicode. C'est également la même que la valeur ASCII.

• De caractères égal ou inférieur à 2047 (hex 0x07FF), l'UTF-8
  la représentation est réparti sur deux octets. Le premier octet aura
  les deux bits élevés ensemble et le troisième peu clairs (0xC2 à 0xDF). L'
  deuxième octet d'avoir le top ensemble de bits et le second peu clair (c'est à dire
  0x80 à 0xBF).

• Pour tous les caractères égale ou supérieure à 2048 mais moins que 65535
  (0xFFFF), l'UTF-8 représentation est réparti sur trois octets.

J'ai juste pensé que je devais partager ce que j'ai effectivement résolu le problème et pourquoi je pense que c'est le droit solution (à condition de ne pas optimiser pour les vieux navigateur).

La conversion des données à 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);

Permettant à l'utilisateur d'enregistrer les données

En dehors de la solution la plus évidente - l'ouverture d'une nouvelle fenêtre avec votre dataURL URL que vous pouvez faire deux choses.

1. Utilisation fileSaver.js

Fichier saver pouvez créer des fileSave dialogue avec prédéfinie nom du fichier. Il peut également de secours à la normale dataURL approche.

2. Utilisation (expérimental) URL.createObjectURL

Ce qui est excellent pour la réutilisation des données encodées en base64. Il crée une URL courte pour votre dataURL:

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

N'oubliez pas d'utiliser l'URL, y compris le premier blob préfixe. J'ai utilisé document.body de nouveau:

Vous pouvez utiliser cette URL courte que l'AJAX cible, <script> source ou <a> href emplacement. Vous êtes responsable de la destruction de l'URL si:

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

Comme un complément à Stefan Steiger réponse: (comme il n'a pas l'air gentil comme commentaire)

L'extension de la Chaîne de prototype:

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

Utilisation:

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

REMARQUE:

Comme indiqué dans les commentaires, à l'aide de unescape n'est pas recommandé car il peut être supprimé dans le futur:

Avertissement: Bien que ne pas encoder() n'est pas strictement déconseillé (comme dans "loin des standards du Web"), il est défini à l'Annexe B de la norme ECMA-262, dont l'introduction unis:
... Toutes les fonctionnalités de langage et de comportements spécifiés dans la présente annexe ont un ou plusieurs caractéristiques indésirables et en l'absence de l'héritage d'utilisation serait supprimé à partir de cette spécification.

Remarque: Ne pas utiliser ne pas encoder pour décoder les Uri, utilisez decodeURI ou decodeURIComponent à la place.