diff options
Diffstat (limited to 'files/fr/web/api/windowbase64')
| -rw-r--r-- | files/fr/web/api/windowbase64/atob/index.html | 132 | ||||
| -rw-r--r-- | files/fr/web/api/windowbase64/btoa/index.html | 174 | ||||
| -rw-r--r-- | files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html | 343 |
3 files changed, 649 insertions, 0 deletions
diff --git a/files/fr/web/api/windowbase64/atob/index.html b/files/fr/web/api/windowbase64/atob/index.html new file mode 100644 index 0000000000..b04c255040 --- /dev/null +++ b/files/fr/web/api/windowbase64/atob/index.html @@ -0,0 +1,132 @@ +--- +title: window.atob +slug: Web/API/WindowBase64/atob +tags: + - API + - DOM + - Reference + - WindowOrWorkerGlobalScope + - atob +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +<p>{{APIRef ("HTML DOM")}}<br> + La fonction <code>WindowOrWorkerGlobalScope.atob()</code> décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31.</p> + +<p>Pour une utilisation avec des chaînes Unicode ou UTF-8, voir <a href="/fr/docs/D%C3%A9coder_encoder_en_base64">cette note sur l'encodage et le décodage Base64</a> et <a href="/fr-FR/docs/Web/API/window.btoa#Unicode_Strings">cette note sur btoa()</a>.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval">var donneesDecodees = scope.atob(<em>donneesEncodees</em>); +</pre> + +<h3 id="Déclenche">Déclenche</h3> + +<p>Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée en entrée n'est pas un multiple de 4.</p> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="eval"><em>donneesEncodees</em> = window.btoa('Salut, monde'); // encode une chaîne +<em>donneesDecodees</em> = window.atob(<em>donneesEncodees</em>); // décode la chaîne +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1)}}<sup>[1]</sup><br> + {{CompatGeckoDesktop(27)}}<sup>[2]</sup><br> + {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1)}}<br> + {{CompatGeckoDesktop(52)}}<sup>[3]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<p>[1] <code>atob()</code> est aussi disponible pour les composants XPCOM implémentés en JavaScript, même si <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a></code> n'est pas l'objet global dans les composants.</p> + +<p>[2] A partir de <a href="https://developer.mozilla.org/en-US/Firefox/Releases/27/Site_Compatibility">Firefox 27</a>, <code>atob()</code> ignore tous les caractères espace dans l'argument pour se conformer à la spéc HTML5 la plus récente (voir {{bug(711180)}}).</p> + +<p>[3] <code>atob()</code> maintenant définie dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li> + <li>{{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}}</li> + <li><a href="https://developer.mozilla.org/fr-FR/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/fr/web/api/windowbase64/btoa/index.html b/files/fr/web/api/windowbase64/btoa/index.html new file mode 100644 index 0000000000..7d993f35fa --- /dev/null +++ b/files/fr/web/api/windowbase64/btoa/index.html @@ -0,0 +1,174 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - DOM + - Méthode + - Reference + - Web + - WindowOrWorkerGlobalScope + - btoa + - chaînes + - données +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p>La méthode <code>WindowOrWorkerGlobalScope.btoa()</code> crée une chaîne ASCII codée en base 64 à partir d'un objet {{jsxref ("String")}} dans lequel chaque caractère de la chaîne est traité comme un octet de données binaires.</p> + +<div class="note"> +<p><strong>Note :</strong> étant donné que cette fonction traite chaque caractère comme un octet de données binaires, quel que soit le nombre d'octets composant le caractère, une exception <code>InvalidCharacterError</code> est déclenchée si le {{Glossary("code point")}} d'un caractère quelconque est en dehors de la plage 0x00 à 0xFF. Voir {{anch("Chaînes Unicode")}} pour un exemple montrant comment encoder des chaînes avec des caractères en dehors de la plage 0x00 à 0xFF.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre>var donneesEncodees = scope.btoa(<em>chaineAEncoder</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>chaineAEncoder</code></dt> + <dd>Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Une chaîne contenant la représentation Base64 de la <code>chaineAEncoder</code>.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<h2 id="Exemple">Exemple</h2> + +<pre class="eval">var donneesEncodees = window.btoa('Salut, monde'); // encode une chaîne<em> +</em>var donneesDecodees = window.atob(donneesEncodees); // décode la chaîne +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31.</p> + +<p><code>btoa()</code> est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants.</p> + +<h2 id="Chaînes_Unicode">Chaînes Unicode</h2> + +<p>Dans la plupart des navigateurs, l'appel de <code>btoa()</code> sur une chaîne Unicode engendrera une exception <code>InvalidCharacterError</code>.</p> + +<p>Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html" title="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a> :</p> + +<pre id="txt"><code>// Chaîne ucs-2 en ascii encodé en base64 +function uena(chn) { + return window.btoa(unescape(encodeURIComponent(chn))); +} +// Ascii encodé en base64 en chaîne ucs-2 +function aenu(chn) { + return decodeURIComponent(escape(window.atob(chn))); +} +// Usage : +uena('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU= +aenu('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode" + +uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE= +aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"</code></pre> + +<p>Une solution meilleure, plus fiable et moins coûteuse consiste à <a href="https://developer.mozilla.org/fr/docs/D%C3%A9coder_encoder_en_base64">utiliser des tableaux typés pour faire la conversion</a>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Méthode déplacée dans le mixin <code>WindowOrWorkerGlobalScope</code> dans la spéc la plus récente.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Instantané de {{SpecName("HTML WHATWG")}}. Création de <code>WindowBase64</code> (les propriétés se trouvaient sur la cible avant cela).</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1)}}<sup>[1]</sup><br> + {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td> + <td>10</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(1)}}<br> + {{CompatGeckoMobile(52)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> + +<p>[1] <code>btoa()</code> est aussi pour les composants XPCOM implémentés en JavaScript, même si <code><a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a></code> n'est pas l'objet global dans les composants.</p> + +<p>[2] <code>btoa()</code> maintenant défini dans le mixin {{domxref("WindowOrWorkerGlobalScope")}}.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li><a href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Les URL de <code>données</code></a></li> + <li>{{domxref("WindowOrWorkerGlobalScope.atob","atob()")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Components.utils.importGlobalProperties">Components.utils.importGlobalProperties</a></li> +</ul> diff --git a/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html b/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html new file mode 100644 index 0000000000..ae762bf333 --- /dev/null +++ b/files/fr/web/api/windowbase64/décoder_encoder_en_base64/index.html @@ -0,0 +1,343 @@ +--- +title: Décoder et encoder en base64 +slug: Web/API/WindowBase64/Décoder_encoder_en_base64 +tags: + - Advanced + - Base64 + - JavaScript + - Reference + - Typed Arrays + - URI + - URL + - Unicode Problem + - atob() + - btoa() +translation_of: Glossary/Base64 +--- +<p><strong>Base64</strong> est un groupe de schéma pour encoder des données binaires sous forme d'un texte au format ASCII grâce à la représentation de ces données en base 64. Le terme base64 vient à l'origine de l'encodage utilisé pour transférer certains <a href="https://fr.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions#Content-Transfer-Encoding">contenus MIME</a>.</p> + +<p>Les schémas d'encodage en base64 sont principalement utilisés lorsqu'il s'agit d'enregistrer ou d'envoyer des données binaires via un media qui a été conçu pour gérer du texte. Cette transformation permet de conserver l'intégrité et la véracité des données envoyées lors du transport. Base64 est utilisé par plusieurs applications, notamment celles qui gèrent les courriels avec <a href="https://fr.wikipedia.org/wiki/MIME">MIME</a>, et le stockage de données complexes en <a href="/fr/docs/XML">XML</a>.</p> + +<p>Pour JavaScript, il existe deux fonctions utilisées pour encoder et décoder des chaînes en base64 :</p> + +<ul> + <li>{{domxref("window.atob","atob()")}}</li> + <li>{{domxref("window.btoa","btoa()")}}</li> +</ul> + +<p>La fonction <code>atob()</code> permet de décoder des données encodées en une chaîne de caractères en base 64. La fonction <code>btoa()</code>, quant à elle, permet de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</p> + +<p>Les deux méthodes, <code>atob()</code> et <code>btoa()</code>, fonctionnent sur des chaînes de caractères. Si vous voulez utiliser des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffers</code></a>, lisez <a href="#Solution_.232_.E2.80.93_rewriting_atob%28%29_and_btoa%28%29_using_TypedArrays_and_UTF-8">ce paragraphe</a>.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + + <dl> + <dt><a href="/fr/docs/Web/HTTP/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs">URIs de données</a></dt> + <dd><small>Les URIs de données, définies par la <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, permettent aux créateurs de contenus d'intégrer des fichiers en ligne dans des documents.</small></dd> + <dt><a href="https://fr.wikipedia.org/wiki/Base_64" title="https://fr.wikipedia.org/wiki/Base_64">Base64</a></dt> + <dd><small>Article Wikipédia sur l'encodage en base64.</small></dd> + <dt>{{domxref("window.atob","atob()")}}</dt> + <dd><small>Méthode permettant de décoder une chaîne de donnée qui a été encodée en base64.</small></dd> + <dt>{{domxref("window.btoa","btoa()")}}</dt> + <dd><small>Méthode permettant de créer une chaîne ASCII en base64 à partir d'une « chaîne » de données binaires.</small></dd> + <dt><a href="#The_.22Unicode_Problem.22">Le « problème Unicode »</a></dt> + <dd><small>Pour la plupart des navigateurs, l'utilisation de <code>btoa()</code> sur une chaîne de caractères Unicode entraînera une exception <code>Character Out Of Range</code>. Ce paragraphe indique quelques solutions.</small></dd> + <dt><a href="/fr/docs/URIScheme" title="/fr/docs/URIScheme">URIScheme</a></dt> + <dd><small>Une liste de schémas URI supportés par Mozilla</small>.</dd> + <dt><a href="/fr/Add-ons/Code_snippets/StringView" title="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code></a></dt> + <dd>Dans cet article, nous publions une bibliothèque dont les buts sont : + <ul> + <li>de créer une interface pour les chaînes de caractères à la façon du langage <a class="external" href="https://fr.wikipedia.org/wiki/C_%28langage%29" title="https://fr.wikipedia.org/wiki/C_%28langage%29">C</a> (i.e. un tableau de code de caractères —<a href="/fr/docs/Web/API/ArrayBufferView" title="/fr/docs/Web/API/ArrayBufferView"> <code>ArrayBufferView</code></a> en JavaScript) basée sur l'interface JavaScript <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer"><code>ArrayBuffer</code></a>,</li> + <li>de créer un ensemble de méthodes pour ces objets qui fonctionnent <strong>sur des tableaux de nombres</strong> plutôt que sur chaînes de caractères JavaScript immuables,</li> + <li>de travailler avec d'autres encodages Unicode, y compris ceux différent d'UTF-16 qui est l'encodage par défaut de JavaScript pour les <a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a>.</li> + </ul> + </dd> + </dl> + + <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p> + </td> + <td> + <h2 class="Tools" id="Tools" name="Tools">Outils</h2> + + <ul> + <li><a href="#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">Réécrire <code>atob()</code>et <code>btoa()</code> en utilisant des <code>TypedArray</code>s et l'UTF-8</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés.</a></li> + </ul> + + <p><span class="alllinks"><a href="/fr/docs/tag/Base64">Voir toutes les pages sur base64...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets connexes</h2> + + <ul> + <li><a href="/fr/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li> + <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés</a></li> + <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li> + <li><a href="/fr/docs/Web/API/Uint8Array"><code>Uint8Array</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></li> + <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString"><code>DOMString</code></a></li> + <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="Le_«_problème_Unicode_»">Le « problème Unicode »</h2> + +<p>Les objets <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> sont des chaînes de caractères encodées sur 16 bits. Pour la plupart des navigateurs, lorsqu'on appelle <code>window.btoa</code> sur une chaîne Unicode, cela entraîne une exception <code>Character Out Of Range</code> si la représentation du caractère dépasse les 8 bits ASCII. Deux méthodes existent pour résoudre le problème :</p> + +<ul> + <li>échapper la chaîne dans son intégralité puis l'encoder,</li> + <li>convertir la chaîne UTF-16 <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> en un tableau UTF-8 de caractères puis l'encoder.</li> +</ul> + +<p>Voici ces deux méthodes :</p> + +<h3 id="Première_solution_–_échapper_la_chaîne_avant_de_lencoder">Première solution – échapper la chaîne avant de l'encoder</h3> + +<pre class="brush:js notranslate">function utf8_to_b64( str ) { + return window.btoa(unescape(encodeURIComponent( str ))); +} + +function b64_to_utf8( str ) { + return decodeURIComponent(escape(window.atob( str ))); +} + +// Usage: +utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU=" +b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"</pre> + +<p>Cette solution a été proposée dans un article de <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>.</p> + +<h3 id="Seconde_solution_–_réécrire_atob_et_btoa_en_utilisant_des_TypedArray_avec_de_lUTF-8">Seconde solution – réécrire <code>atob()</code> et <code>btoa()</code> en utilisant des <code>TypedArray</code> avec de l'UTF-8</h3> + +<div class="note"><strong>Note :</strong> Le code suivant peut également être utilisé pour obtenir un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a> depuis une chaîne en base 64 (et vice-versa, voir ci-après). <strong>Pour un article concernant une bibliothèque complète sur les tableaux typés, voir <a href="/fr/Add-ons/Code_snippets/StringView" title="/fr/Add-ons/Code_snippets/StringView">cet article</a></strong>.</div> + +<pre class="brush: js notranslate">"use strict"; + +/*\ +|*| +|*| utilitairezs de manipulations de chaînes base 64 / binaires / UTF-8 +|*| +|*| https://developer.mozilla.org/fr/docs/Décoder_encoder_en_base64 +|*| +\*/ + +/* Décoder un tableau d'octets depuis une chaîne en base64 */ + +function b64ToUint6 (nChr) { + + return nChr > 64 && nChr < 91 ? + nChr - 65 + : nChr > 96 && nChr < 123 ? + nChr - 71 + : nChr > 47 && nChr < 58 ? + nChr + 4 + : nChr === 43 ? + 62 + : nChr === 47 ? + 63 + : + 0; + +} + +function base64DecToArr (sBase64, nBlocksSize) { + + var + sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, + nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen); + + for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { + nMod4 = nInIdx & 3; + nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; + if (nMod4 === 3 || nInLen - nInIdx === 1) { + for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { + taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; + } + nUint24 = 0; + + } + } + + return taBytes; +} + +/* encodage d'un tableau en une chaîne en base64 */ + +function uint6ToB64 (nUint6) { + + return nUint6 < 26 ? + nUint6 + 65 + : nUint6 < 52 ? + nUint6 + 71 + : nUint6 < 62 ? + nUint6 - 4 + : nUint6 === 62 ? + 43 + : nUint6 === 63 ? + 47 + : + 65; + +} + +function base64EncArr (aBytes) { + + var nMod3 = 2, sB64Enc = ""; + + for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { + nMod3 = nIdx % 3; + if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } + nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); + if (nMod3 === 2 || aBytes.length - nIdx === 1) { + sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); + nUint24 = 0; + } + } + + return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '=='); + +} + +/* Tableau UTF-8 en DOMString et vice versa */ + +function UTF8ArrToStr (aBytes) { + + var sView = ""; + + for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) { + nPart = aBytes[nIdx]; + sView += String.fromCharCode( + nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */ + /* (nPart - 252 << 32) n'est pas possible pour ECMAScript donc, on utilise un contournement... : */ + (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 + : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */ + (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 + : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */ + (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 + : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */ + (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 + : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */ + (nPart - 192 << 6) + aBytes[++nIdx] - 128 + : /* nPart < 127 ? */ /* one byte */ + nPart + ); + } + + return sView; + +} + +function strToUTF8Arr (sDOMStr) { + + var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0; + + /* mapping... */ + + for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { + nChr = sDOMStr.charCodeAt(nMapIdx); + nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6; + } + + aBytes = new Uint8Array(nArrLen); + + /* transcription... */ + + for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) { + nChr = sDOMStr.charCodeAt(nChrIdx); + if (nChr < 128) { + /* one byte */ + aBytes[nIdx++] = nChr; + } else if (nChr < 0x800) { + /* two bytes */ + aBytes[nIdx++] = 192 + (nChr >>> 6); + aBytes[nIdx++] = 128 + (nChr & 63); + } else if (nChr < 0x10000) { + /* three bytes */ + aBytes[nIdx++] = 224 + (nChr >>> 12); + aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + (nChr & 63); + } else if (nChr < 0x200000) { + /* four bytes */ + aBytes[nIdx++] = 240 + (nChr >>> 18); + aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + (nChr & 63); + } else if (nChr < 0x4000000) { + /* five bytes */ + aBytes[nIdx++] = 248 + (nChr >>> 24); + aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + (nChr & 63); + } else /* if (nChr <= 0x7fffffff) */ { + /* six bytes */ + aBytes[nIdx++] = 252 + /* (nChr >>> 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824); + aBytes[nIdx++] = 128 + (nChr >>> 24 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + (nChr & 63); + } + } + + return aBytes; + +} +</pre> + +<h4 id="Tests">Tests</h4> + +<pre class="brush: js notranslate">/* Tests */ + +var entréeChaîne = "base64 \u2014 Mozilla Developer Network"; + +var entréeUTF8 = strToUTF8Arr(entréeChaîne); + +var base64 = base64EncArr(entréeUTF8); + +alert(base64); + +var sortieUT8 = base64DecToArr(base64); + +var sortieChaîne = UTF8ArrToStr(sortieUT8); + +alert(sortieChaîne);</pre> + +<h4 id="Annexe_Décoder_une_chaîne_en_base64_en_un_objet_Uint8Array_ou_ArrayBuffer">Annexe : Décoder une chaîne en base64 en un objet <a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></h4> + +<p>Ces fonctions permettent de créer des objets <a href="/fr/docs/Web/API/Uint8Array">uint8Arrays</a> ou <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">arrayBuffers</a> à partir de chaînes en base64 :</p> + +<pre class="brush: js notranslate">var monTableau = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network" + +var monBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network" + +alert(monBuffer.byteLength);</pre> + +<div class="note"><strong>Note :</strong> La fonction <code>base64DecToArr(sBase64[, <em>nTailleBloc</em>])</code> renvoie un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>uint8Array</code></a> d'octets. Si vous souhaitez utiliser un tampon mémoire de 16 bits, 32 bits, 64 bits pour les données brutes, utilisez l'argument <code>nTailleBloc</code>, qui représente le nombre d'octets dont la propriété <code>uint8Array.buffer.bytesLength</code> doit être un multiple (<code>1</code> ou pas de paramètre pour l'ASCII, <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMString/Binary">les chaînes binaires</a> ou les chaînes encodées UTF-8, <code>2</code> pour les chaînes UTF-16, <code>4</code> pour les chaînes UTF-32).</div> + +<p>Pour une bibliothèque plus complète, voir <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes de caractères semblable à celle du langage C, basée sur les tableaux typés</a></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("window.atob","atob()")}}</li> + <li>{{domxref("window.btoa","btoa()")}}</li> + <li><a href="/fr/docs/Web/HTTP/data_URIs" title="/fr/docs/Web/HTTP/data_URIs">URIs de données </a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer">ArrayBuffer</a></li> + <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Tableaux typés</a></li> + <li><a href="/fr/docs/Web/API/ArrayBufferView">ArrayBufferView</a></li> + <li><a href="/fr/docs/Web/API/Uint8Array">Uint8Array</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – une représentation des chaînes, basée sur les tableaux typés</a></li> + <li><a href="/fr/docs/Web/API/DOMString" title="/fr/docs/Web/API/DOMString">DOMString</a></li> + <li><a href="/fr/docs/Glossary/URI" title="/fr/docs/Glossary/URI"><code>URI</code></a></li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/encodeURI"><code>encodeURI()</code></a></li> + <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup" title="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIURIFixup"><code>nsIURIFixup()</code></a></li> + <li><a href="https://fr.wikipedia.org/wiki/Base64" title="https://fr.wikipedia.org/wiki/Base64">Article sur la base64 sur Wikipédia</a></li> +</ul> |