L'auteur de cet article est l'ingénieur de développement front-end de 360 Qiwu Troupe
1. Introduction
Base64 est largement utilisé dans le développement front-end. Cet article explorera les principes du codage Base64 et son application pratique dans les projets front-end.
2. Qu'est-ce que Base64 ?
2.1 Origine de Base64
L'émergence du codage Base64 est liée aux besoins de transmission et de traitement des données, elle résout principalement certains problèmes rencontrés lors de la transmission de données binaires. Au début de la communication réseau, de nombreux protocoles de transport (tels que le courrier électronique) ne prenaient en charge que la transmission de données textuelles. Les données binaires (telles que les images, l'audio, la vidéo, etc.) ne peuvent pas être transmises directement dans les protocoles texte.
À cette époque, Base64 est né. Le but du codage Base64 est de convertir des données binaires en un ensemble de caractères ASCII imprimables. pour transmission ou stockage dans des protocoles texte.
2.2 Conception du codage Base64
Base64 est une méthode de représentation binaire basée sur 64 caractères imprimables, et tous les 6 bits sont une unité correspondant à un caractère imprimable. Il utilise principalement des caractères 6 bits pour exprimer les caractères 8 bits d'origine. Les caractères imprimables en Base64 sont les suivants :
A,B,C,D ....Z 26Gros caractères a,b,c,d .... z 26Petite police 0,1,2,3 ....9 10< a i= 6>个阿拉框数外加2个Caractères spéciaux + / < /span>
comporte un total de 64 caractères, en plus du signe égal = en complément.
3. Principe de l'encodage Base64
De ce qui précède, nous avons appris ce qu'est l'encodage Base64. Voyons comment le convertir. Comme indiqué ci-dessous, le schéma d'encodage de la chaîne Man.
Nous pouvons en déduire que le résultat de la conversion d'encodage de 3 caractèresHomme est de 4 caractères< a i=3 >TWFu, évidemment les caractères après encodage Base64 seront 1/3 de plus que les caractères d'origine.
Ce que l'on voit ci-dessus, c'est que le nombre d'octets divisible par 3 est converti en caractères 4. Si le nombre d'octets n'est pas divisible par 3, quel est le résultat ? Analysons-le ci-dessous.
Le nombre d'octets codés par ne peut pas être divisible uniformément par 3. La méthode de traitement est la suivante : utilisez d'abord la valeur 0 octet pour compléter la fin afin qu'elle puisse être divisée uniformément par 3, puis effectuez un codage Base64. Les 6 premiers bits du caractère A peuvent être utilisés comme caractère Base64. Les 2 octets restants doivent être complétés par 4 0 pour constituer les 6 bits. En tant que deuxième caractère Base64, les troisième et quatrième caractères Base64 n'ont aucun contenu et doit être Nous complétons avec =.
CaractèreA的编码为QQ==, BC对应的编码为QKM=.
3. Scénarios d'application courants de Base64 en front-end
La plupart des applications frontales de Base64 sont destinées au traitement d'images et sont généralement utilisées sur la base de DataURL.
L'URL de données se compose de data:前缀, MIME类型（表明数据类型）, base64标志位 (facultatif si texte) et Les données elles-mêmes sont une chaîne Base64. . La quatrième partie ici 数据本身 Composé de quatre parties. Format spécifique : data:[<mime type>][;base64],<data><data>
3.1 Traitement des images
function readAsDataURL() {
const fileElement = document.getElementById("imageInput");
return new Promise((resolve, reject) => {
const fd = new FileReader();
fd.readAsDataURL(fileElement.files[0]);
fd.onload = function () {
resolve(fd.result); // data:image/png;base64,QkNxd2VydHl1aW9hc....
}
fd.onerror = reject;
});
}3.2 Fichiers de polices
@font-face {
font-family: 'CustomFont';
src: url(data:application/font-woff;base64,QkNxd2VydHl1aW9hc...) format('woff');
}
.custom-font-example {
font-family: 'CustomFont', sans-serif;
}3.3 Petite image de fond
.icon {
background-image: url('data:image/png;base64,QkNxd2VydHl1aW9hc...');
width: 16px;
height: 16px;
display: inline-block;
}3.4 optimisation des icônes
<link rel="icon" href="data:image/x-icon;base64,QkNxd2VydHl1aW9hc..." />En plus du traitement de l'affichage des images, les chaînes codées en Base64 seront également visibles dans la transmission de données spéciales, le codage et le cryptage simples, l'obscurcissement du code et certains certificats.
4. Avantages et inconvénients de Base64
4.1 Avantages
Représentation textuelle : le codage Base64 convertit les données binaires en un jeu de caractères imprimable
ASCII, ce qui est pratique pour la transmission et le stockage dans des environnements texte car presque tous les systèmes peuvent gérer des données textuelles.Réduire les demandes : si l'image est traitée en
htmloucss, vous pouvez réduirehttpDemande.Intégrité des données : le codage Base64 ne modifie pas le contenu des données, mais les encode uniquement, de sorte que les données originales peuvent être complètement restaurées après le décodage sans perdre d'informations.
Sécurité de l'URL : le codage Base64 est généralement utilisé pour la transmission des paramètres d'URL, car il peut éviter l'impact de certains caractères spéciaux sur l'URL.
4.2 Inconvénients
Augmenter la taille des données : le contenu devient plus grand après l'encodage, d'au moins 1/3, car tous les 3 octets< les données binaires d'un i=3> sont codées dans une chaîne Base64 de 4 caractères , alors qu'il n'y a que 1 octet , il deviendra au moins 3 octets. Provoquant une expansion des données.
Mauvaise lisibilité : la chaîne codée en base64 contient un grand nombre de caractères, ce qui réduit la lisibilité et les capacités de reconnaissance humaine.
Ne convient pas aux données binaires volumineuses : pour les données binaires volumineuses (telles que des images ou des fichiers vidéo volumineux), la longueur de la chaîne codée en base64 sera très grande, ce qui augmentera les données. charge de transmission et de traitement.
5. Conclusion
À partir de ce qui précède, nous avons discuté des principes du codage Base64 et de son application pratique sur le Web. Grâce à l'introduction de l'article, nous espérons avoir une compréhension plus approfondie de Base64.
- FIN -
À propos de la troupe Qiwu
Le groupe Qiwu est la plus grande équipe front-end du groupe 360 et représente le groupe dans le cadre des travaux d'adhésion au W3C et à l'ECMA (TC39). La Troupe Qiwu attache une grande importance à la formation des talents. Il existe plusieurs directions de développement parmi lesquelles les employés peuvent choisir, telles que des ingénieurs, des conférenciers, des traducteurs, des interfaces commerciales et des chefs d'équipe, et sont complétées par la fourniture de formations techniques, professionnelles, générales, de leadership et autres correspondantes. . cours. La Troupe Qiwu accueille toutes sortes de talents exceptionnels auxquels prêter attention et rejoindre la Troupe Qiwu avec une attitude ouverte et de recherche de talents.
