Introducción
Base64 es un método de representación que representa datos binarios basados en 64 caracteres imprimibles. Como 2 es igual a 64 a la potencia de 6, cada 6 bits es una unidad, correspondiente a un cierto carácter imprimible. Tres bytes tienen 24 bits, correspondientes a 4 unidades Base64, es decir, 3 bytes deben estar representados por 4 caracteres imprimibles. Se puede usar como la codificación de transmisión de correos electrónicos. Los caracteres imprimibles en Base64 incluyen las letras AZ, AZ y los números 0-9, por lo que hay 62 caracteres en total. Los otros dos símbolos imprimibles varían en diferentes sistemas, generalmente + y /.
Principio de conversión
La fuente de datos directas de Base64 es una secuencia binaria. Por supuesto, también puede convertir imágenes, texto y audio y video en secuencias binarias y luego convertirlas en codificación Base64. Lo que estamos discutiendo aquí es cómo convertir la codificación binaria a Base64, y estén atentos sobre cómo convertir imágenes, texto y audio y video a secuencias binarias.
Antes de convertir, defina una tabla de índice, que especifica cómo convertir:
Al convertirnos, primero agrupamos las secuencias binarias, y cada 6 bits es un grupo. Sin embargo, si el número de bytes codificados no puede ser divisible por 3, entonces habrá 1 o dos bytes al final. Puede usar el siguiente método para procesarlo: primero use el valor de 0 bytes para compensar al final para que pueda ser divisible por 3, y luego la codificación base64. Agregue uno o dos números '=' al texto Base64 codificado para representar el número de bytes a llenar. Es decir, cuando queda un octeto en el último bloque de bytes base64 de 6 bits, hay cuatro bits de valor de 0 y se conectan dos signos iguales al final; Si quedan dos octetos en el último bloque de byte base de 6 bits, hay dos bits de valor 0 y se adjunta un signo igual al final. Consulte la siguiente tabla:
JavaScript implementa base64
Una vez que se entiende el principio, será fácil de implementar.
Define (función (requerir, exportar, módulo) {var code = "abcdefghiJklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789+/". Split (""); // table de índice/** * @author [email protected] * @Description Contence Codificación * @param {string} * @return {string} */ function binTobase64 (bitstring) {var result = ""; cola); Código [ParseInt (BitStringTemp2, 2)]; {var bitstring = ""; return bitstring.substr (0, bitstring.length - tail * 2); charcode = str.charcodeat (i) .ToString (2); ""; Bintostr (base64tobin (str));Base64 Codificación de datos de imagen
Para convertir los datos de la imagen en Base64, primero debe obtener los datos binarios de la imagen. Los datos binarios de la imagen se pueden obtener a través de la interfaz de lienzo. La implementación específica es:
función getCanvas (W, H) {var c = document.createElement ('Canvas'); C. ancho = w; C.Height = H; return c;} function 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);}Después de obtener los datos binarios de la imagen, el siguiente paso es codificarlo. Porque la imagen no solo contiene información de píxeles, sino también información de longitud y ancho. Por lo tanto, mientras codifica la información del píxel, la información de ancho y altura también debe codificarse de acuerdo con un cierto acuerdo. Lo manejé así:
Convertir los datos numéricos de píxel de la imagen en una secuencia binaria; Combine la información de ancho y altura en la cadena $$width,height$$ para convertirla en una secuencia binaria; Combine la secuencia binaria de la información de píxeles de la imagen y la secuencia binaria del ancho y la altura de la imagen, y luego codifica Base64
La implementación específica es:
función img2base64 (img) {var imgData = getPixels (img) .data; var imgwidth = getPixels (img) .Width; var imgheight = getPixels (img) .Height; var bin = ""; for (var i = 0; i <imgData.length; i ++) {bin+= base.numToString (imgData [i]); } bin = bin + base.stringTobin ("$$" + imgwidth + "," + imgheight + "$$"); return base.bintobase64 (bin);}Decodificar los datos de la imagen base64
La decodificación es el proceso inverso de codificación. El proceso es más o menos:
Decodifique la información base64 de la imagen para obtener una secuencia binaria que contiene la información de píxeles de la imagen y la información de ancho y altura; Luego decodifique la secuencia binaria en una cadena para obtener información de altura y ancho; Elimine la información de altura y ancho en la secuencia binaria para obtener información de píxeles; Genere una matriz de píxeles basada en la información de píxeles; Cree un objeto de imagen imagedata basado en la matriz de píxeles, ancho y altura; Use Putimagedata para dibujar la imagen.
La implementación del código específico es:
function pintar (imgData) {var canvas = document.getElementById ("mycanvas"); var ctx = canvas.getContext ("2d"); ctx.fillrect (0, 0, imgdata.width, imgdata.height); ctx.putimagedata (imgData, 0, 0); } función 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) .replace (base.stringTobin ("$$" + imgwidth + "," + imgheight + "$$"), ");"););); var imagedataArray = new Uint8ClampedArray (imgwidth * imgHeight * 4); for (var i = 0; i <imagedataArray.length; i ++) {imagedataArray [i] = parseInt (imgdata.substr (i * 8, 8), 2); } return new iMagedata (iMagedataArray, imgwidth, imgheight); }