Einführung
Base64 ist eine Repräsentationsmethode, die binäre Daten basierend auf 64 druckbaren Zeichen darstellt. Da 2 gleich 64 bis zur Leistung von 6 entspricht, ist alle 6 Bit eine Einheit, die einem bestimmten druckbaren Zeichen entspricht. Drei Bytes haben 24 Bit, die 4 Base64 -Einheiten entsprechen, dh 3 Bytes müssen durch 4 druckbare Zeichen dargestellt werden. Es kann als Übertragungscodierung von E -Mails verwendet werden. Die druckbaren Zeichen in Base64 enthalten die Buchstaben AZ, AZ und die Nummern 0-9, sodass insgesamt 62 Zeichen. Die beiden anderen druckbaren Symbole variieren in verschiedenen Systemen, im Allgemeinen + und /.
Konversionsprinzip
Die direkte Datenquelle von Base64 ist eine binäre Sequenz. Natürlich können Sie auch Bilder, Text, Audio und Video in binäre Sequenzen umwandeln und sie dann in Base64 -Codierung umwandeln. Wir diskutieren hier hier, wie Sie Binärdatoren in Base64 -Codierung konvertieren und sich darauf einstellen können, wie Bilder, Text, Audio und Video in binäre Sequenzen konvertiert werden.
Definieren Sie vor dem Konvertieren eine Indextabelle, in der festgelegt wird, wie man konvertiert:
Beim Konvertieren gruppieren wir zunächst die binären Sequenzen, und jede 6 Bit ist eine Gruppe. Wenn die Anzahl der codierten Bytes jedoch nicht um 3 teilbar sein kann, gibt es am Ende 1 oder zwei Bytes. Sie können die folgende Methode verwenden, um es zu verarbeiten: Verwenden Sie zuerst den 0-Byte-Wert, um am Ende so zu erstellen, dass er durch 3 teilbar sein kann, und dann die Codierung von Basis64. Fügen Sie dem codierten Base64 -Text ein oder zwei '=' Zahlen hinzu, um die Anzahl der zu füllenden Bytes darzustellen. Das heißt, wenn im letzten 6-Bit-Basis-Byte-Block ein Oktett vorhanden ist, gibt es vier Bit mit 0 Wert, und am Ende sind zwei gleiche Vorzeichen angebracht; Wenn im letzten 6-Bit-Basis-Byte-Block noch zwei Oktett sind, gibt es zwei Bits mit 0 Wert, und am Ende wird ein gleiches Vorzeichen angebracht. Siehe die folgende Tabelle:
JavaScript implementiert Base64
Sobald das Prinzip verstanden wird, wird es leicht zu implementieren.
Define (Funktion (Erforderlich, exportieren, modul) {var code = "abcdefghijklMnopqrstuvwxyzabcdefghijklMnopqrstuvwxyz0123456789+/". Base64 Codierung * @param {String} * @return {String} */ Funktion Bintobase64 (BitString) {var result = ""; - Schwanz) für (var i = 0; i <bitstringtemp1.Length; Code [ParseInt (BitStringtemp2, 2)]; Base64Tobin (str) {var bitstring = ""; {Tail ++; STR.LANGE; Bintostr (bin) {var result = ""; Funktion (str) {return bintostr (Base64Tobin (str));Base64 -Kodierung von Bilddaten
Um die Bilddaten in Base64 umzuwandeln, müssen Sie zunächst die Binärdaten des Bildes erhalten. Die Binärdaten des Bildes können über die Leinwandschnittstelle erhalten werden. Die spezifische Implementierung ist:
Funktion getCanvas (w, h) {var c = document.createelement ('canvas'); C. Width = w; C.Height = H; return c;} Funktion 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);}Nachdem die Binärdaten des Bildes erhalten wurden, besteht der nächste Schritt darin, es zu codieren. Da das Bild nicht nur Pixelinformationen, sondern auch Länge und Breiteinformationen enthält. Daher sollten bei der Codierung von Pixelinformationen die Breite und die Höheninformationen auch gemäß einer bestimmten Vereinbarung codiert werden. Ich habe es so umgegangen:
Umwandeln Sie die pixel -numerischen Daten des Bildes in eine binäre Sequenz; Kombinieren Sie die Breite und Höheninformationen in die String $$width,height$$ um sie in eine binäre Sequenz umzuwandeln. Kombinieren Sie die binäre Sequenz der Pixelinformationen des Bildes und die binäre Sequenz der Breite und Höhe des Bildes und codieren dann Base64
Die spezifische Implementierung ist:
Funktion img2base64 (img) {var imgdata = getPixel (IMG) .Data; var imgwidth = getPixel (IMG) .width; var imgHeight = getPixel (IMG) .Height; var bin = ""; für (var i = 0; i <imgdata.length; i ++) {bin+= base.numtoString (imgdata [i]); } bin = bin + base.stringtobin ("$$" + imgwidth + "," + imgheight + "$$"); return base.Bintobase64 (bin);}Dekodieren Sie die Bild Basis64 -Daten
Dekodierung ist der inverse Codierungsprozess. Der Prozess ist grob:
Dekodieren Sie die Base64 -Informationen des Bildes, um eine binäre Sequenz zu erhalten, die die Pixelinformationen des Bildes und der Breite und der Höheninformationen enthält. Dekodieren Sie dann die binäre Sequenz in eine Zeichenfolge, um die Höhe und die Breite zu erhalten. Entfernen Sie die Höhen- und Breiteninformationen in der binären Sequenz, um Pixelinformationen zu erhalten. Generieren Sie eine Pixelmatrix basierend auf den Pixelinformationen; Erstellen Sie ein Bildobjekt Imagedata basierend auf der Pixelmatrix, der Breite und der Höhe. Verwenden Sie Putimagedata, um das Bild zu zeichnen.
Die spezifische Code -Implementierung lautet:
Funktion Paint (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 imgheeight = str.match (// $/$ (/d +), (/d +)/$/$$/, ") [2] var imgdata = base.base64Tobin (Daten) .Replace (Base.stringtobin (" $$ " + imgwidTh +", " + imgheight +" $$ "),"). var imagedataarray = new Uint8Clampedarray (imgwidth * imgHeight * 4); für (var i = 0; i <imagedatArray.length; i ++) {ImagedatArray [i] = parseInt (imgdata.substr (i * 8, 8), 2); } return New Imagedata (ImagedatArray, Imgwidth, ImgHeight); }