Introdução
Base64 é um método de representação que representa dados binários com base em 64 caracteres imprimíveis. Como 2 é igual a 64 à potência de 6, a cada 6 bits é uma unidade, correspondente a um determinado caractere imprimível. Três bytes têm 24 bits, correspondentes a 4 unidades BASE64, ou seja, 3 bytes precisam ser representados por 4 caracteres imprimíveis. Pode ser usado como a codificação de transmissão de emails. Os caracteres imprimíveis na base64 incluem as letras AZ, AZ e os números 0-9, para que existam 62 caracteres no total. Os outros dois símbolos imprimíveis variam em diferentes sistemas, geralmente + e /.
Princípio de conversão
A fonte de dados direta do base64 é uma sequência binária. Obviamente, você também pode converter imagens, texto e áudio e vídeo em seqüências binárias e depois convertê -las para a codificação Base64. O que estamos discutindo aqui é como converter a codificação binária para base64 e ficar atento a como converter fotos, texto e áudio e vídeo em sequências binárias.
Antes de converter, defina uma tabela de índice, que especifica como converter:
Ao converter, primeiro agrupamos as seqüências binárias e cada 6 bits é um grupo. No entanto, se o número de bytes codificados não puder ser divisível por 3, haverá 1 ou dois bytes no final. Você pode usar o seguinte método para processá-lo: primeiro use o valor de 0 bytes para compensar no final, para que ele possa ser divisível por 3 e depois a codificação BASE64. Adicione um ou dois números '=' ao texto base64 codificado para representar o número de bytes a serem preenchidos. Ou seja, quando resta um octeto no último bloco Base64 Byte de 6 bits, existem quatro bits de valor 0 e dois sinais iguais são anexados no final; Se restarem dois octeto no último bloco de bytes de base de 6 bits, haverá dois bits de valor 0 e um sinal igual será anexado no final. Consulte a tabela a seguir:
JavaScript implementa base64
Depois que o princípio for entendido, será fácil de implementar.
define (function (requer, exporta, módulo) {var code = "abcdefghijklmnopqrStuvwxyzabcdefghijklmnopqrstuvwxyz01234456789+/". Codificação * @param {string} * @return {string} */ função bintobase64 (bitstring) {var result = ""; cauda); Código [Parseint (BitStringTemp2, 2)]; {var bitstring = "; Retornar BitString.substr (0, BitString.Length - Tail * 2); Charcode = str.charcodeat (i) .ToString (2); "" Bintostr (base64tobin (str));Base64 codificação de dados de imagem
Para converter os dados da imagem em base64, você deve primeiro obter os dados binários da imagem. Os dados binários da figura podem ser obtidos através da interface Canvas. A implementação específica é:
função getCanvas (w, h) {var c = document.createElement ('canvas'); c.width = w; C.Height = H; retornar C;} função getPixels (img) {var c = getCanvas (img.width, img.Height); var ctx = c.getContext ('2d'); ctx.drawimage (img, 0, 0); Retorne ctx.getImagedata (0, 0, C.Width, C.Height);}Depois de obter os dados binários da imagem, a próxima etapa é codificá -la. Porque a imagem não contém apenas informações de pixels, mas também informações de comprimento e largura. Portanto, ao codificar informações de pixels, as informações de largura e altura também devem ser codificadas de acordo com um determinado acordo. Eu lidei assim:
Converter os dados numéricos de pixel da imagem em uma sequência binária; Combine as informações de largura e altura na string $$width,height$$ para convertê -las em uma sequência binária; Combine a sequência binária das informações de pixel da imagem e a sequência binária da largura e altura da imagem e depois codifique base64
A implementação específica é:
função 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 + "," + imghight + "$$"); retornar base.bintobase64 (bin);}Decodificar os dados da imagem base64
A decodificação é o processo inverso da codificação. O processo é aproximadamente:
Decodificar as informações base64 da figura para obter uma sequência binária contendo as informações de pixel da imagem e informações de largura e altura; Em seguida, decodifique a sequência binária em uma string para obter informações de altura e largura; Remova as informações de altura e largura na sequência binária para obter informações sobre pixels; gerar uma matriz de pixels com base nas informações do pixel; Crie um objeto de imagem visualizada baseada na matriz pixel, largura e altura; Use PutImagedata para desenhar a imagem.
A implementação específica de código é:
função tinta (imgdata) {var canvas = document.getElementById ("mycanvas"); var ctx = Canvas.getContext ("2D"); ctx.fillRect (0, 0, imgdata.width, imgdata.Height); ctx.putImagedata (imgdata, 0, 0); } função base642Img (dados) {var str = base.bintostr (base.base64tobin (dados)); var imgwidth = str.match (// $/$ (/d+), (/d+)/$/$$/, "") [1]; var imgheight = str.match (// $/$ (/d +), (/d +)/$/$$/, "") [2] var imgdata = base.base64tobin (dados) .replace (base.stringtobin ("$$" + imgwidth + "," + imgheight + " Var IMAGEDATAARRAY = novo UINT8ClampedArray (imgwidth * imgheight * 4); para (var i = 0; i <imagedataarray.length; i ++) {imagedataArray [i] = parseint (imgdata.substr (i * 8, 8), 2); } retornar nova imagedata (imageatataarray, imgwidth, imghight); }