JS decodes imagen base64 cadena codificada y salidas Ejemplo de imagen

Autor：Eve Cole Fecha de actualización：2025-02-11 18:12:01

La copia del código es la siguiente:

<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">

Cuerpo {Padding-izquierda: 75px; Color de fondo: beige}

</style>

/////////////////////////////////////////////// ///////////////

// Decodificación de imágenes GIF codificada Base64

// por mozart0

// 2005/10/29

/////////////////////////////////////////

// crear un objeto de clase GIF

// La clase GIF se define internamente en esta función

// STR64: cadena codificada de Base64 de archivo GIF

// devolvió con éxito el objeto GIF creado

// devolver nulo si falló

función getGif (str64) {

var bytes = DecodeBase64 (str64);

if (! bytes) {

alerta ("Error: Codificación de Base64 no válida");

regresar nulo;

}

var gif = new Gif ();

para (var i = 0; i <6; i ++)

gif.version+= string.FromCharCode (bytes [i]);

if (gif.version.slice (0,3)! = "gif") {

alerta ("Error: formato de imagen no GIF");

regresar nulo;

}

gif.width = bytes [i] | (bytes [i+1] << 8);

gif.height = bytes [i+2] | (bytes [i+3] << 8);

var f = bytes [i+4];

gif.colorResolution = (f >> 4 y 0x7) +1;

gif.sorted = (f & 0x8)? Verdadero: falso;

gif.backgroundindex = bytes [i+5];

gif.pixelaspectradio = bytes [i+6];

if (f & 0x80) {

gif.globalpalette = [];

i+= getPalette (i+7, bytes, gif.globalpalette, 2 << (f & 0x7));

}

i+= 7;

para (var j = i; j <bytes.length; j ++)

if (bytes [j] == 0x21 && bytes [j+1] == 0xf9)

romper;

if (j == bytes.length) {

para (; i <bytes.length; i ++)

if (bytes [i] == 0x2c)

romper;

if (i == bytes.length) {

alerta ("Error: datos de imagen no encontrados");

regresar nulo;

}

var f = nuevo gif_frame ();

if (! getSingleLeFrame (i, f))

regresar nulo;

demás

gif.frames.push (f);

}

demás{

i = j;

hacer{

var f = nuevo gif_frame ();

var t = getSingleFrame (i, f);

if (! t)

regresar nulo;

gif.frames.push (f);

para (i+= t; i <bytes.length; i ++)

if (bytes [i] == 0x21 && bytes [i+1] == 0xf9)

romper;

}

while (i <bytes.length);

}

devolver gif;

// proceso interno, generar tabla de color

función getPalette (pos, s, d, len) {

len*= 3;

para (var i = pos; i <pos+len; i+= 3)

d.push ('#'+(s [i] <= 0xf? "0": "")+S [i] .ToString (16)

+(s [i+1] <= 0xf? "0": "")+S [i+1] .ToString (16)

+(s [i+2] <= 0xf? "0": "")+S [i+2] .ToString (16));

devolver len;

}

// proceso interno, integrando segmentos de datos

función getBlock (pos, s, d) {

var p = pos;

while (len = s [p ++]) {

para (var i = 0; i <len; i ++)

d.push (s [p+i]);

p+= len;

}

regresar P-Pos;

}

// Proceso interno, obtenga un marco de datos

función getSingleFrame (pos, marco) {

var i = pos;

if (bytes [i] == 0x21) {

i+= 3;

if (bytes [i] y 1)

frame.transparentIndex = bytes [i+3];

frame.delay = bytes [i+1] | (bytes [i+2] << 8);

para (i+= 5; i <bytes.length && bytes [i]! = 0x2c; i ++);

if (i == bytes.length) {

alerta ("Error: identificador de imagen no encontrado");

regresar 0;

}

Frame.OffSetX = bytes [i+1] | (bytes [i+2] << 8);

frame.offsety = bytes [i+3] | (bytes [i+4] << 8);

frame.width = bytes [i+5] | (bytes [i+6] << 8);

frame.height = bytes [i+7] | (bytes [i+8] << 8);

var f = bytes [i+9];

i+= 10;

if (f & 0x40)

Frame.interlace = True;

if (f & 0x20)

Frame.sorted = True;

if (f & 0x80) {

frame.colorResolution = (f & 0x7) +1;

Frame.localPalette = [];

i+= getPalette (i, bytes, frame.localpalette, 1 << frame.colorResolution);

}

demás{

Frame.ColorResolution = gif.colorResolution;

Frame.localpalette = gif.globalpalette;

}

var lzwlen = bytes [i ++]+1;

i+= getBlock (i, bytes, frame.data);

frame.data = decodelzw (frame.data, lzwlen);

return marr.data?i-pos:0;

}

// Defina la estructura de datos para almacenar archivos GIF

// Proporcionar método showinfo, devolver la información de la imagen

función gif () {

this.version = "";

this.width = 0;

this.Height = 0;

this.colorResolution = 0;

this.sorted = falso;

this.GlobalPalette = NULL;

this.backgroundindex = -1;

this.pixelaspectradio = 0;

this.frames = []; // Ver gif_frame para cada cuadro de la imagen

this.showinfo = function (sep) {// Mostrar información de imagen, SEP es el separador de línea

if (! sep)

sep = "/n";

var s = "información gif:"+sep+"----------------------------------------- -------------------------------------------------- -----------------------

s+= subinfo (this)+sep;

para (var i = 0; i <this.frames.length; i ++)

s+= sep+"marcos"+i+"----------------------------------------- -------------------------------------------------- ---------------------

regreso s;

función subinfo (o) {

var s = "";

para (var i en o) {

if (i == "showinfo" || i == "dibujar")

continuar;

s+= sep+i+":";

if (typeof (o [i]) == "objeto")

s+= (o [i]? O [i] .length: "null");

demás

s+= o [i];

}

regreso s;

}

// Defina la estructura de datos que almacena un marco de imágenes

// proporcionar dibujo de método, dibujo

función gif_frame () {

this.OffSetX = 0;

this.OffSety = 0;

this.width = 0;

this.Height = 0;

this.localpalette = nulo;

this.colorResolution = 0;

this.interlace = falso;

this.sorted = falso;

this.data = []; // Datos de imagen, almacenando índices enteros de cada color de píxeles

this.transparentIndex = -1;

this.delay = 0;

this.draw = function (parent, zoom) {

if (! this.data.length)

devolver;

if (! Parent)

parent = document.body;

if (! zoom)

zoom = 1;

if (parent.clientwidth <this.width*zoom)

parent.style.width = this.width*zoom;

if (parent.clientheight <this.height*zoom)

parent.style.height = this.Height*zoom;

var id = "imgDefaultDraw";

var img = document.getElementById (id);

if (img)

eliminar parent.removechild (img);

img = document.createElement ("div");

img.id = id;

parent.appendChild (IMG);

img.Style.Position = "Absolute";

var t = document.createElement ("div");

t.style.overflow = "oculto";

T.Style.Position = "Absolute";

deflayout (this.data, this.localpalette, this.width, this.Height, img, t, zoom);

eliminar t;

}

// Base64 decodificación

// PARTE, ENTRAR LA CADRA

// Una devolución exitosa de una matriz, cada elemento contiene un byte de información

// devolver nulo si falló

función decodebase64 (strin) {

if (! strin.length || strin.length%4)

regresar nulo;

var str64 =

"ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=";

var index64 = [];

para (var i = 0; i <str64.length; i ++)

index64 [str64.charat (i)] = i;

var c0, c1, c2, c3, b0, b1, b2;

var len = strin.length;

var len1 = len;

if (strin.charat (len-1) == '=')

Len1- = 4;

resultado var = [];

para (var i = 0, j = 0; i <len1; i+= 4) {

c0 = index64 [strin.charat (i)];

c1 = index64 [strin.charat (i+1)];

c2 = index64 [strin.charat (i+2)];

C3 = index64 [strin.charat (i+3)];

b0 = (c0 << 2) | (c1 >> 4);

b1 = (c1 << 4) | (c2 >> 2);

b2 = (c2 << 6) | C3;

resultado.push (B0 y 0xff);

resultado.push (b1 y 0xff);

resultado.push (B2 y 0xff);

}

if (len1! = len) {

c0 = index64 [strin.charat (i)];

c1 = index64 [strin.charat (i+1)];

c2 = strin.charat (i+2);

b0 = (c0 << 2) | (c1 >> 4);

resultado.push (B0 y 0xff);

if (c2! = '=') {

C2 = index64 [C2];

b1 = (c1 << 4) | (c2 >> 2);

resultado.push (b1 y 0xff);

}

resultado de retorno;

}

// función de decodificación LZW para GIF

// arrbytes es los datos de origen, nbits es el número inicial de bits codificados

// devolvió con éxito la matriz, cada elemento incluye un índice de color

// devolver nulo si falló

función decodelzw (arrbytes, nbits) {

var cc = 1 << (nbits-1);

var eoi = cc+1;

var tabla = [], máscara = [], resultado = [];

para (var i = 0; i <cc; i ++)

tabla [i] = (i >> 8 y 0xf) .tostring (16)

+(i >> 4 y 0xf) .ToString (16)+(i & 0xf) .ToString (16);

para (i = 2, máscara [1] = 1; i <13; i ++)

máscara [i] = máscara [i-1] << 1 | 1;

var bc = nbits;

var pos = 0, temp = 0, tleft = 0, código = 0, viejo = 0;

while (verdadero) {

while (tleft <bc) {

temp = temp | (arrbytes [pos ++] << tleft);

tleft+= 8;

}

código = temp & Mask [BC];

tleft- = BC;

temp >> = BC;

if (código == eoi)

romper;

if (code == cc) {

table.length = cc+2;

BC = nbits;

antiguo = código;

continuar;

}

var t = "";

if (código <table.length) {

t = tabla [código];

if (viejo! = cc)

table.push (tabla [antigua]+t.slice (0,3));

}

else if (Old <table.length) {

t = tabla [antigua]+tabla [antigua] .slice (0,3);

table.push (t);

}

demás{

alerta ("Error: datos de imagen no válidos");

regresar nulo;

}

antiguo = código;

para (var i = 0; i <t.length; i+= 3)

resultado.push (parseint (T.Substr (i, 3), 16))

if (table.length == 1 << bc && bc <12)

BC ++;

}

resultado de retorno;

}

// dibujar con Div mínimo de acuerdo con el diseño de datos de la matriz de bytes

función deflayout (datos, paleta, ancho, altura, imagen, bloque, zoom) {

var map = nueva matriz (altura);

para (var i = 0; i <altura; i ++) {

mapa [i] = nueva matriz (ancho);

para (var j = 0; j <width; j ++)

map [i] [j] = data [i*ancho+j];

}

var i, j, i1, i2, j1, j2, c;

para (i = 0; i <altura; i ++)

para (j = 0; j <width;) {

if (map [i] [j] == 0x100) {

j ++;

continuar;

}

c = map [i] [j];

para (i1 = i+1; i1 <height && map [i1] [j] == c; i1 ++);

para (j1 = j+1; j1 <width; j1 ++) {

para (i2 = i; i2 <i1 && map [i2] [j1] == c; i2 ++);

if (i2 <i1)

romper;

}

para (i2 = i; i2 <i1; i2 ++)

para (j2 = j; j2 <j1; j2 ++)

mapa [i2] [j2] = 0x100;

var x = block.clonenode (true);

x.style.left = j*zoom;

x.style.top = i*zoom;

x.style.width = (j1-j)*zoom;

x.style.height = (i1-i)*zoom;

X.Style.BackgroundColor = Palette [C];

Image.appendChild (x);

j = j1;

}

</script>

función main () {

var t = nueva fecha (). gettime ();

var xmldom = document.getElementById ("imgData");

var gif = getgif ("r0lgodlhdwapakecaaaaazmzm ////// waaAcwaaaAdwapaaAciispeqhsrz5Modrlln48cxf8m2iq3ymmkqvlrtw4mlwwach+h09wdgltxp Aaow == ");

Var info = document.getElementById ("info");

info.innerhtml = gif.showinfo ("<br>");

t = nueva fecha (). GetTime ();

gif.frames [0] .draw (document.getElementById ("Canvas"), 1);

info.innerhtml+= "<br> tiempo de dibujo"+(nueva fecha (). gettime ()-t)+"ms";

}

</script>

<hr>

<div id = "info"> La página se está cargando, espere ... </div>

</body>

</html>

PD: Aquí hay algunas herramientas de imágenes en línea para su referencia

Conversión de imagen a la herramienta en línea de codificación base64:

http://tools.vevb.com/transcoding/img2base64

Herramienta de creación de icono de correo electrónico por correo electrónico en línea:

http://tools.vevb.com/email/emaillogo

Herramienta de procesamiento de imágenes de PS en línea:

http://tools.vevb.com/aideddesign/webps

Herramienta de conversión de formato de imagen en línea (JPG/BMP/GIF/PNG):

http://tools.vevb.com/aideddesign/picext

Herramienta de generación en línea de iconos de ICO:

http://tools.vevb.com/aideddesign/ico_img

Adjunto: además, se recomienda una herramienta de conversión de codificación base64

Base64 Herramienta de codificación y decodificación:

http://tools.vevb.com/transcoding/base64