JS dekodiert Bild Basis64 codierte Zeichenfolge und gibt Bildbeispiel aus

Autor：Eve Cole Aktualisierungszeit：2025-02-11 18:12:01

Die Codekopie lautet wie folgt:

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

<kopf>

Körper {padding-links: 75px; Hintergrundfarbe: Beige}

</style>

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

// Base64 codiertes GIF -Bilddecodieren

// von Mozart0

// 2005/10/29

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

// Erstellen Sie ein Objekt der GIF -Klasse

// Die Klasse GIF ist in dieser Funktion intern definiert

// str64: Base64 codierte Zeichenfolge der GIF -Datei

// gab das erstellte GIF -Objekt erfolgreich zurück

// Null zurückgeben, wenn es fehlgeschlagen ist

Funktion getgif (str64) {

var bytes = decodeBase64 (str64);

if (! bytes) {

alert ("Fehler: Ungültiges Basis64 -Codierung");

null zurückkehren;

}

var gif = new GIF ();

für (var i = 0; i <6; i ++)

gif.version+= string.fromCharCode (Bytes [i]);

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

Alert ("Fehler: Nicht-GIF-Bildformat");

null zurückkehren;

}

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 & 0x7) +1;

gif.sorted = (f & 0x8)? Richtig: false;

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;

für (var j = i; j <bytes.length; j ++)

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

brechen;

if (j == bytes.length) {

für (; i <bytes.length; i ++)

if (bytes [i] == 0x2c)

brechen;

if (i == bytes.length) {

alert ("Fehler: Bilddaten nicht gefunden");

null zurückkehren;

}

var f = new gif_frame ();

if (! Getsingleframe (i, f))

null zurückkehren;

anders

gif.frames.push (f);

}

anders{

i = j;

Tun{

var f = new gif_frame ();

var t = GetSingleFrame (i, f);

if (! t)

null zurückkehren;

gif.frames.push (f);

für (i+= t; i <bytes.length; i ++)

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

brechen;

}

während (i <bytes.length);

}

gif zurückgeben;

// interner Prozess, Farbtabelle erzeugen

Funktion getPalette (pos, s, d, len) {

len*= 3;

für (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));

Rückkehr Len;

}

// interner Prozess, Integration von Datensegmenten

Funktion getBlock (pos, s, d) {

var p = pos;

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

für (var i = 0; i <len; i ++)

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

p+= len;

}

P-Pos zurückgeben;

}

// interner Prozess erhalten Sie einen Datenrahmen

Funktion GetSingleFrame (POS, Frame) {

var i = pos;

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

i+= 3;

if (Bytes [i] & 1)

Frame.TransparentIndex = Bytes [i+3];

Frame.Delay = Bytes [i+1] | (Bytes [i+2] << 8);

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

if (i == bytes.length) {

alert ("Fehler: Bildbezeichner nicht gefunden");

Rückkehr 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);

}

anders{

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 frame.data?i-pos:0;

}

// Definieren Sie die Datenstruktur zum Speichern von GIF -Dateien

// Methode ShowInfo bereitstellen, Bildinformationen zurückgeben

Funktion Gif () {

this.version = "";

this.width = 0;

this.height = 0;

this.colorresolution = 0;

this.sorted = false;

this.globalpalette = null;

this.backgroundIndex = -1;

this.pixelaspectradio = 0;

this.frames = [];

this.showInfo = function (sep) {// Bildinformationen anzeigen, SEP ist der Zeilenabscheider

if (! sep)

sep = "/n";

var s = "GIF-Informationen:"+sep+"----------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -----------------------

s+= subinfo (this)+sep;

für (var i = 0; i <this.frames.length; i ++)

s+= sep+"Frames"+i+"----------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------

Rückkehr s;

Funktion Subinfo (o) {

var s = "";

für (var i in o) {

if (i == "showInfo" || i == "zeichnen")

weitermachen;

s+= sep+i+":";

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

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

anders

s+= o [i];

}

Rückkehr s;

}

// Definieren Sie die Datenstruktur, die einen Bilderrahmen speichert

// Methode Zeichnung, Zeichnen bereitstellen

Funktion gif_frame () {

this.offsetx = 0;

this.offsety = 0;

this.width = 0;

this.height = 0;

this.localpalette = null;

this.colorresolution = 0;

this.interlace = false;

this.sorted = false;

this.data = [];

this.transparentIndex = -1;

this.delay = 0;

this.draw = function (übergeordnet, zoom) {

if (! this.data.length)

zurückkehren;

if (! Elternteil)

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)

Parent löschen.removechild (IMG);

img = document.createelement ("div");

img.id = id;

Parent.AppendChild (IMG);

img.style.position = "absolut";

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

T.Style.Overflow = "Hidden";

T.Style.position = "Absolute";

Deflayout (this.data, this.localpalette, this.width, this.height, iMg, t, Zoom);

t löschen;

}

// Base64 Decodierung

// Strin, geben Sie die Zeichenfolge ein

// Eine erfolgreiche Rückgabe eines Arrays enthält jedes Element ein Informationsbyte

// Null zurückgeben, wenn es fehlgeschlagen ist

Funktion decodebase64 (strin) {

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

null zurückkehren;

var str64 =

"AbcdefghijklMnopqrstuvwxyzabcdefghijklMnopqrstuvwxyz0123456789+/=";

var index64 = [];

für (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;

var result = [];

für (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;

result.push (b0 & 0xff);

result.push (b1 & 0xff);

result.push (b2 & 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);

result.push (b0 & 0xff);

if (c2! = '=') {

C2 = Index64 [C2];

B1 = (C1 << 4) | (C2 >> 2);

result.push (b1 & 0xff);

}

Rückgabeergebnis;

}

// LZW -Dekodierungsfunktion für GIF

// arrbytes sind die Quelldaten, Nbits ist die anfängliche Anzahl codierter Bits

// gab das Array erfolgreich zurück. Jedes Element enthält einen Farbindex

// Null zurückgeben, wenn es fehlgeschlagen ist

Funktion decodelzw (arrbytes, nbits) {

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

var eoi = cc+1;

var table = [], mask = [], result = [];

für (var i = 0; i <cc; i ++)

Tabelle [i] = (i >> 8 & 0xf) .ToString (16)

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

für (i = 2, Maske [1] = 1; i <13; i ++)

Maske [i] = Maske [i-1] << 1 | 1;

var bc = nbits;

var pos = 0, temp = 0, tleft = 0, code = 0, alt = 0;

while (wahr) {

while (tleft <bc) {

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

tleft+= 8;

}

code = temp & mask [bc];

tleft- = bc;

temp >> = bc;

if (code == eoi)

brechen;

if (code == cc) {

Tabelle.Length = CC+2;

BC = NBits;

alter = Code;

weitermachen;

}

var t = "";

if (code <table.length) {

t = Tabelle [Code];

if (alt! = cc)

table.push (Tabelle [alt]+t.slice (0,3));

}

sonst if (alt <table.length) {

T = Tabelle [alt]+Tabelle [alt] .Slice (0,3);

table.push (t);

}

anders{

alert ("Fehler: Ungültige Bilddaten");

null zurückkehren;

}

alter = Code;

für (var i = 0; i <t.Length; i+= 3)

result.push (Parseint (T.Substr (i, 3), 16))

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

BC ++;

}

Rückgabeergebnis;

}

// Zeichnen Sie mit minimalem DIV gemäß dem Byte -Array -Datenlayout

Funktion Deflayout (Daten, Palette, Breite, Höhe, Bild, Block, Zoom) {

var map = new Array (Höhe);

für (var i = 0; i <Höhe; i ++) {

Karte [i] = Neuarray (Breite);

für (var j = 0; j <width; j ++)

Karte [i] [j] = Daten [i*width+j];

}

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

für (i = 0; i <Höhe; i ++)

für (j = 0; j <width;) {

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

J ++;

weitermachen;

}

c = map [i] [j];

für (i1 = i+1; i1 <Höhe && map [i1] [j] == c; i1 ++);

für (j1 = j+1; j1 <width; j1 ++) {

für (i2 = i; i2 <i1 && map [i2] [j1] == c; i2 ++);

if (i2 <i1)

brechen;

}

für (i2 = i; i2 <i1; i2 ++)

für (j2 = j; j2 <j1; j2 ++)

Karte [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>

Funktion main () {

var t = new Date (). GetTime ();

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

var gif=getGif("R0lGODlhDwAPAKECAAAAzMzM//////wAAACwAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltXp lZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==");

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

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

t = neues Datum (). GetTime ();

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

info.innernhtml+= "<br> Zeichenzeit"+(neuer Datum (). GetTime ()-T)+"MS";

}

</Script>

<hr>

<div id = "info"> Die Seite wird geladen, bitte warte ... </div>

</body>

</html>

PS: Hier sind ein paar Online -Bilderwerkzeuge für Ihre Referenz

Bildkonvertierung in Base64 Codierung Online -Tool:

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

Online -E -Mail -Symbol -Erstellungstool: Tool:

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

Online -PS -Bildverarbeitungstool:

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

Online -Bildformatkonvertierung (JPG/BMP/GIF/PNG) Tool:

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

ICO -Symbol Online -Generation -Tool:

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

Anhang: Zusätzlich wird ein Basis64 -Codierungs -Konvertierungswerkzeug empfohlen

Base64 Codierungs- und Dekodierungswerkzeug:

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