JS Decodes Image Base64 ENCODED String dan output Contoh Gambar

Penulis：Eve Cole Waktu Pembaruan：2025-02-11 18:12:01

Salinan kode adalah sebagai berikut:

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

<head>

<tyle>

body {padding-left: 75px; latar belakang-warna: beige}

</tyle>

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

// base64 decoding gambar gif yang dikodekan

// oleh mozart0

// 2005/10/29

Pemberitaan////////////////////////////////////////////////////////////////////////////////////////////////////////////

// Buat objek kelas gif

// GIF kelas didefinisikan secara internal dalam fungsi ini

// STR64: Base64 String yang dikodekan dari file GIF

// berhasil mengembalikan objek gif yang dibuat

// kembalikan nol jika gagal

fungsi getgif (str64) {

var bytes = decodebase64 (str64);

if (! bytes) {

alert ("Kesalahan: encoding base64 tidak valid");

kembali nol;

}

var gif = gif baru ();

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

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

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

peringatan ("Kesalahan: format gambar non-GIF");

kembali nol;

}

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

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

var f = byte [i+4];

gif.colorresolution = (f >> 4 & 0x7) +1;

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

gif.backgroundIndex = byte [i+5];

gif.pixelaspectradio = byte [i+6];

if (f & 0x80) {

gif.globalpalette = [];

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

}

i+= 7;

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

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

merusak;

if (j == bytes.length) {

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

if (bytes [i] == 0x2c)

merusak;

if (i == bytes.length) {

peringatan ("Kesalahan: Data Gambar Tidak Ditemukan");

kembali nol;

}

var f = gif_frame baru ();

if (! getingLeframe (i, f))

kembali nol;

kalau tidak

gif.frames.push (f);

}

kalau tidak{

i = j;

Mengerjakan{

var f = gif_frame baru ();

var t = getSingLeframe (i, f);

if (! t)

kembali nol;

gif.frames.push (f);

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

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

merusak;

}

sementara (i <bytes.length);

}

mengembalikan gif;

// proses internal, menghasilkan tabel warna

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

len*= 3;

untuk (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));

Return Len;

}

// proses internal, mengintegrasikan segmen data

fungsi getBlock (pos, s, d) {

var p = pos;

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

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

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

p+= len;

}

mengembalikan p-pos;

}

// proses internal, dapatkan bingkai data

fungsi getsleframe (pos, frame) {

var i = pos;

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

i+= 3;

if (bytes [i] & 1)

frame.transparentIndex = byte [i+3];

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

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

if (i == bytes.length) {

peringatan ("Kesalahan: Pengidentifikasi Gambar Tidak Ditemukan");

kembali 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 = byte [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);

}

kalau tidak{

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;

}

// Tentukan struktur data untuk menyimpan file GIF

// Berikan metode showinfo, kembalikan informasi gambar

function gif () {

this.version = "";

this.width = 0; // Lebar layar logis

this.height = 0; // Tinggi layar logistik

this.colorresolution = 0; // Kedalaman warna

this.sorted = false; // bendera klasifikasi tabel warna global

this.globalpalette = null; // tabel warna global

this.backgroundIndex = -1; // indeks warna latar belakang

this.pixelaspectradio = 0; // rasio aspek piksel

this.frames = []; // lihat gif_frame untuk setiap bingkai gambar

this.showinfo = function (sep) {// Tampilkan informasi gambar, SEP adalah pemisah garis

if (! sep)

sep = "/n";

var s = "informasi gif:"+sep+"----------------------------------- -------------------------------------------------- -----------------------

S+= SubInfo (ini)+Sep;

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

S+= Sep+"frame"+i+"----------------------------------------- -------------------------------------------------- ---------------------

kembali S;

fungsi subinfo (o) {

var s = "";

untuk (var i di o) {

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

melanjutkan;

S+= Sep+i+":";

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

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

kalau tidak

s+= o [i];

}

kembali S;

}

// Tentukan struktur data yang menyimpan bingkai gambar

// Berikan metode menggambar, menggambar

fungsi gif_frame () {

this.offsetx = 0; // x Offset arah

This.Offsety = 0; // Y Offset

this.width = 0; // Lebar gambar

this.height = 0; // tinggi gambar

this.localpalette = null; // tabel warna lokal

this.colorresolution = 0; // Kedalaman warna

this.interlace = false; // bendera interleaved

this.sorted = false; // logo klasifikasi warna lokal

this.data = []; // data gambar, menyimpan indeks integer dari setiap warna piksel

this.transparentIndex = -1; // transparentIndex

this.delay = 0; // frame Delay

this.draw = function (induk, zoom) {

if (! this.data.length)

kembali;

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)

Hapus 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 = "tersembunyi";

t.style.position = "absolute";

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

hapus t;

}

// base64 decoding

// strin, masukkan string

// Pengembalian array yang berhasil, setiap elemen berisi satu byte informasi

// kembalikan nol jika gagal

function decodebase64 (strin) {

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

kembali nol;

var str64 =

"ABCDEFGHIJKLMNOPQRSUVWXYZABCDEFGHIJKLMNOPQRSUVWXYZ0123456789+/=";

var index64 = [];

untuk (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 = [];

untuk (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);

}

hasil pengembalian;

}

// LZW Decoding Fungsi untuk GIF

// arrbytes adalah data sumber, nbits adalah jumlah awal bit kode

// berhasil mengembalikan array, setiap elemen menyertakan indeks warna

// kembalikan nol jika gagal

fungsi decodelzw (arrbytes, nbits) {

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

var eoi = cc+1;

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

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

Tabel [i] = (i >> 8 & 0xf) .toString (16)

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

untuk (i = 2, topeng [1] = 1; i <13; i ++)

Topeng [i] = topeng [i-1] << 1 | 1;

var bc = nbits;

var pos = 0, temp = 0, TLEFT = 0, kode = 0, lama = 0;

while (true) {

while (tleft <bc) {

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

TLEFT+= 8;

}

kode = temp & mask [bc];

TLEFT- = BC;

temp >> = bc;

if (kode == EOI)

merusak;

if (code == cc) {

Table.length = CC+2;

bc = nbits;

tua = kode;

melanjutkan;

}

var t = "";

if (code <table.length) {

t = tabel [kode];

if (old! = cc)

Table.push (tabel [lama]+t.slice (0,3));

}

lain jika (lama <table.length) {

t = tabel [lama]+tabel [lama] .slice (0,3);

Table.push (t);

}

kalau tidak{

peringatan ("Kesalahan: data gambar tidak valid");

kembali nol;

}

tua = kode;

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

hasil.push (parseInt (t.substr (i, 3), 16))

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

BC ++;

}

hasil pengembalian;

}

// Gambar dengan minimal div sesuai dengan tata letak data array byte

fungsi deflayout (data, palet, lebar, tinggi, gambar, blok, zoom) {

var peta = array baru (tinggi);

untuk (var i = 0; i <height; i ++) {

peta [i] = array baru (lebar);

untuk (var j = 0; j <lebar; j ++)

peta [i] [j] = data [i*lebar+j];

}

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

untuk (i = 0; i <tinggi; i ++)

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

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

j ++;

melanjutkan;

}

c = peta [i] [j];

untuk (i1 = i+1; i1 <height && map [i1] [j] == C; i1 ++);

untuk (j1 = j+1; j1 <lebar; j1 ++) {

untuk (i2 = i; i2 <i1 && peta [i2] [j1] == C; i2 ++);

if (i2 <i1)

merusak;

}

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

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

peta [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 = palet [C];

Image.AppendChild (x);

j = j1;

}

</script>

fungsi main () {

var t = tanggal baru (). getTime ();

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

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

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

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

t = Tanggal baru (). GetTime ();

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

info.innerHtml+= "<br> waktu menggambar"+(tanggal baru (). getTime ()-t)+"ms";

}

</script>

<Hr>

<div id = "info"> Halaman ini memuat, tunggu ... </div>

</body>

</html>

PS: Berikut adalah beberapa alat gambar online untuk referensi Anda

Konversi gambar ke Base64 Encode Online Tool:

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

Alat Pembuatan Ikon Email Email Online:

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

Alat Pemrosesan Gambar PS Online:

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

Konversi Format Gambar Online (JPG/BMP/GIF/PNG) Alat:

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

ICO ICON Alat Pembuatan Online:

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

Lampiran: Selain itu, alat konversi pengkodean base64 disarankan

Alat Pengkodean dan Pengodean Basis64:

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