Introduction
Base64 est une méthode de représentation qui représente des données binaires basées sur 64 caractères imprimables. Puisque 2 est égal à 64 à la puissance de 6, tous les 6 bits est une unité, correspondant à un certain caractère imprimable. Trois octets ont 24 bits, correspondant à 4 unités de base64, c'est-à-dire que 3 octets doivent être représentés par 4 caractères imprimables. Il peut être utilisé comme codage de transmission des e-mails. Les caractères imprimables de Base64 incluent les lettres AZ, AZ et les numéros 0-9, il y a donc 62 caractères au total. Les deux autres symboles imprimables varient en différents systèmes, généralement + et /.
Principe de conversion
La source de données directe de Base64 est une séquence binaire. Bien sûr, vous pouvez également convertir des images, du texte et de l'audio et de la vidéo en séquences binaires, puis les convertir en codage de base64. Ce dont nous discutons ici, c'est comment convertir le codage binaire en base64 et rester à l'écoute pour convertir des images, du texte, du son et de la vidéo en séquences binaires.
Avant de convertir, définissez un tableau d'index, qui spécifie comment convertir:
Lors de la conversion, nous regroupons d'abord les séquences binaires et chaque 6 bits sont un groupe. Cependant, si le nombre d'octets codés ne peut pas être divisible par 3, il y aura 1 ou deux octets à la fin. Vous pouvez utiliser la méthode suivante pour le traiter: utilisez d'abord la valeur de 0 octet pour se rattraper à la fin afin qu'elle puisse être divisible par 3, puis en codage de base64. Ajoutez un ou deux nombres '=' au texte Base64 codé pour représenter le nombre d'octets à remplir. C'est-à-dire que lorsqu'il reste un octet dans le dernier bloc d'octets Base64 dernier, il y a quatre bits de 0 valeur et deux signes égaux sont attachés à la fin; S'il reste deux octets dans le dernier bloc d'octets de base 6 bits, il y a deux bits de 0 valeur et un signe égal est attaché à la fin. Reportez-vous au tableau suivant:
JavaScript implémente Base64
Une fois le principe compris, il sera facile à mettre en œuvre.
Définir (fonction (exiger, exportations, module) {var code = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789 + /". Split (""); // index table / ** * @Autor [email protected] * @destrassement convertir binary femence64. Encodage * @param {String} * @return {String} * / fonction bintoBase64 (BitString) {var result = ""; Pour (var i = 0; i < CODE [PARSEINT (BITSTRINGTEMP2, 2)]; {var bitstring = ""; var tail = 0; return bitstring.substr (0, bitstring.length - tail * 2);} / ** * @author [email protected] * @description des caractères en séquence binaire * @param {string} str * @return {string} * / function stringtobin (str) {varvel charcode = str.charcodeat (i) .toString (2); ""; pour (var i = 0; i <bin.length; i + = 8) {Result + = String.FromCharcode (RETOURS RETURN (BIN.SUBSTR (I, FONCTION (STR) {return BintoBase64 (Stronge BintoStr (Base64Tobin (STR));Base64 Encodage des données d'image
Pour convertir les données d'image en base64, vous devez d'abord obtenir les données binaires de l'image. Les données binaires de l'image peuvent être obtenues via l'interface Canvas. L'implémentation spécifique est:
fonction getCanvas (w, h) {var c = document.CreateElement ('Canvas'); C.Width = W; c.Height = h; return c;} fonction getPixels (img) {var c = getCanvas (img.width, img.height); var ctx = c.getContext ('2d'); ctx.DrawImage (IMG, 0, 0); return ctx.getImagedata (0, 0, c.width, c.height);}Après avoir obtenu les données binaires de l'image, l'étape suivante consiste à encoder. Parce que l'image contient non seulement des informations sur les pixels, mais aussi des informations de longueur et de largeur. Par conséquent, tout en codant pour les informations sur les pixels, les informations sur la largeur et la hauteur doivent également être codées selon un certain accord. Je l'ai géré comme ceci:
Convertir les données numériques de pixels de l'image en séquence binaire; Combinez la largeur et la hauteur des informations dans la $$width,height$$ pour la convertir en séquence binaire; Combinez la séquence binaire des informations sur les pixels de l'image et de la séquence binaire de la largeur et de la hauteur de l'image, puis coder Base64
L'implémentation spécifique est:
fonction img2base64 (img) {var imgData = getPixels (img) .data; var imgwidth = getPixels (img) .width; var imgheight = getPixels (img) .Height; var bin = ""; pour (var i = 0; i <imgdata.length; i ++) {bin + = base.numToString (imgdata [i]); } bin = bin + base.stringtobin ("$$" + imgwidth + "," + imgheight + "$$"); return base.bintoBase64 (bin);}Décoder les données de la base64 de l'image
Le décodage est le processus inverse de l'encodage. Le processus est à peu près:
Décoder les informations de base64 de l'image pour obtenir une séquence binaire contenant les informations sur les pixels de l'image et de la largeur et de la hauteur des informations; Décode ensuite la séquence binaire en une chaîne pour obtenir des informations de hauteur et de largeur; supprimer les informations de hauteur et de largeur dans la séquence binaire pour obtenir des informations sur les pixels; générer une matrice de pixels basée sur les informations sur les pixels; Créez un objet d'image imagedata basé sur la matrice de pixels, la largeur et la hauteur; Utilisez Putimagedata pour dessiner l'image.
L'implémentation de code spécifique est:
fonction peinture (imgdata) {var canvas = document.getElementById ("myCanvas"); var ctx = canvas.getContext ("2d"); ctx.fillrect (0, 0, imgdata.width, imgdata.height); ctx.putImagedata (imgdata, 0, 0); } function base642img (data) {var str = base.bintoStr (base.base64tobin (data)); var imgwidth = str.match (// $ / $ (/ d +), (/ d +) / $ / $$ /, "") [1]; var imgheight = str.match (// $ / $ (/ d +), (/ d +) / $ / $$ /, "") [2] var imgdata = base.base64tobin (data). var imagedataArray = new uint8clampedArray (imgwidth * imgheight * 4); for (var i = 0; i <iMagedataArray.length; i ++) {imagedataArray [i] = paSeInt (imgData.substr (i * 8, 8), 2); } retourne new imagedata (imagedataArray, imgwidth, imgheight); }