JS Decodes image base64 인코딩 된 문자열 및 출력 이미지 예제

저자：Eve Cole 업데이트 시간：2025-02-11 18:12:01

코드 사본은 다음과 같습니다.

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

<헤드>

<스타일>

바디 {Padding-left : 75px; 배경색 : Beige}

</스타일>

<cript>

//////////////////////////////////////////////////////////////////////////////////4 //////////////////

// base64 인코딩 된 GIF 이미지 디코딩

// mozart0에 의해

// 2005/10/29

/////////////////////////////////////////////////////////4

// GIF 클래스의 객체를 만듭니다

// 클래스 gif는이 함수에서 내부적으로 정의됩니다

// str64 : base64 인코딩 된 gif 파일

// 생성 된 GIF 객체를 성공적으로 반환했습니다

// 실패한 경우 NULL을 반환합니다

함수 getGif (str64) {

var bytes = decodebase64 (str64);

if (! bytes) {

ALERT ( "오류 : 잘못된 Base64 인코딩");

널 리턴;

}

var gif = 새로운 gif ();

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

gif.version+= string.fromcharCode (바이트 [i]);

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

Alert ( "오류 : GIF 이미지 형식");

널 리턴;

}

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

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

var f = 바이트 [i+4];

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

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

gif.backgroundindex = 바이트 [i+5];

gif.pixelaspectradio = 바이트 [i+6];

if (f & 0x80) {

gif.globalpalette = [];

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

}

I+= 7;

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

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

부서지다;

if (j == bytes.length) {

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

if (bytes [i] == 0x2c)

부서지다;

if (i == bytes.length) {

ALERT ( "오류 : 이미지 데이터를 찾을 수 없음");

널 리턴;

}

var f = 새로운 gif_frame ();

if (! getsingleframe (i, f))

널 리턴;

또 다른

gif.frames.push (f);

}

또 다른{

i = j;

하다{

var f = 새로운 gif_frame ();

var t = getsingleframe (i, f);

if (! t)

널 리턴;

gif.frames.push (f);

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

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

부서지다;

}

while (i <bytes.length);

}

리턴 GIF;

// 내부 프로세스, 컬러 테이블을 생성합니다

함수 getPalette (pos, s, d, len) {

Len*= 3;

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

반환 렌;

}

// 데이터 세그먼트 통합 내부 프로세스

함수 getBlock (pos, s, d) {

var p = pos;

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

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

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

P+= LEN;

}

반환 p-pos;

}

// 내부 프로세스, 데이터 프레임을 얻습니다

기능 getsingleframe (pos, frame) {

var i = pos;

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

I+= 3;

if (bytes [i] & 1)

frame.transparentIndex = 바이트 [i+3];

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

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

if (i == bytes.length) {

ALERT ( "오류 : 이미지 식별자를 찾을 수 없음");

반환 0;

}

frame.offsetx = bytes [i+1] | (바이트 [i+2] << 8);

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

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

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

var f = 바이트 [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, 바이트, 프레임.localpalette, 1 << frame.colorresolution);

}

또 다른{

frame.colorresolution = gif.colorresolution;

frame.localpalette = gif.globalpalette;

}

var lzwlen = 바이트 [i ++]+1;

i+= getBlock (i, 바이트, frame.data);

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

return frame.data?i-pos:0;

}

// GIF 파일 저장을위한 데이터 구조를 정의합니다

// 메소드 showInfo, 그림 정보를 반환합니다

함수 gif () {

version = ""; // 버전 번호

this.width = 0; // 논리적 인 화면 너비

this.height = 0; // 로지스틱 화면 높이

colorresolution = 0;

this.sorted = false; // 글로벌 컬러 테이블 분류 플래그

this.globalpalette = null;

this.backgroundIndex = -1;

this.pixelaspectradio = 0;

this.frames = []; // 이미지의 각 프레임에 대해 gif_frame을 참조하십시오

this.showinfo = function (sep) {// 이미지 정보 표시, SEP는 라인 분리기입니다

if (! sep)

sep = "/n";

var s = "gif 정보 :"+sep+"------------------------------------- --------------------------------------------------------- -------------------------

s+= subinfo (this)+sep;

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

S+= SEP+"프레임"+I+"---------------------------------------- --------------------------------------------------------- --------------------

반환 s;

함수 subinfo (o) {

var s = "";

for (var i in o) {

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

계속하다;

s+= sep+i+":";

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

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

또 다른

s+= o [i];

}

반환 s;

}

// 이미지 프레임을 저장하는 데이터 구조 정의

// 메소드 드로우, 드로잉을 제공합니다

함수 gif_frame () {

this.offsetx = 0; // x 방향 오프셋

this.offsety = 0; // y 방향 오프셋

this.width = 0; // 이미지 너비

this.height = 0;

this.localpalette = null; // 로컬 컬러 테이블

colorresolution = 0;

this.interlace = false; // 인터리브 플래그

this.sorted = false; // 로컬 컬러 테이블 분류 로고

this.data = []; // 이미지 데이터, 각 픽셀 색상의 정수 인덱스

this.transparentIndex = -1;

this.delay = 0; // 프레임 지연

this.draw = function (부모, 줌) {

if (! the.data.length)

반품;

if (! 부모)

부모 = 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.removechild (IMG);

img = document.createelement ( "div");

img.id = id;

부모. AppendChild (IMG);

img.style.position = "절대";

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

t.style.overflow = "숨겨진";

t.style.position = "절대";

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

t 삭제 t;

}

// Base64 디코딩

// strin, 문자열을 입력하십시오

// 배열을 성공적으로 반환하면 각 요소에는 하나의 바이트 정보가 포함됩니다.

// 실패한 경우 NULL을 반환합니다

함수 decodebase64 (strin) {

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

널 리턴;

var str64 =

"abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789+/=";

var index64 = [];

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

인덱스 64 [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 = [];

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

}

반환 결과;

}

// GIF의 LZW 디코딩 기능

// arrbytes는 소스 데이터이고 NBITS는 코드화 된 비트의 초기 수입니다.

// 배열을 성공적으로 반환하고 각 요소에는 색 인덱스가 포함되어 있습니다.

// 실패한 경우 NULL을 반환합니다

함수 decodelzw (arrbytes, nbits) {

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

var eoi = cc+1;

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

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

표 [i] = (i >> 8 & 0xf) .tostring (16)

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

for (i = 2, 마스크 [1] = 1; i <13; i ++)

마스크 [i] = 마스크 [i-1] << 1 | 1;

var bc = nbits;

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

while (true) {

while (tleft <bc) {

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

tleft+= 8;

}

코드 = 온도 및 마스크 [BC];

tleft- = BC;

온도 >> = BC;

if (code == eoi)

부서지다;

if (code == cc) {

테이블 .length = CC+2;

BC = NBITS;

구 = 코드;

계속하다;

}

var t = "";

if (code <table.length) {

t = 표 [코드];

if (old! = cc)

table.push (표 [old]+t.slice (0,3));

}

else if if (old <table.length) {

t = 테이블 [old]+테이블 [old] .slice (0,3);

테이블 .push (t);

}

또 다른{

Alert ( "오류 : 잘못된 이미지 데이터");

널 리턴;

}

구 = 코드;

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

result.push (parseint (t.substr (i, 3), 16))

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

BC ++;

}

반환 결과;

}

// 바이트 배열 데이터 레이아웃에 따라 최소한의 div로 그려

함수 deflayout (데이터, 팔레트, 너비, 높이, 이미지, 블록, 줌) {

var 맵 = 새 배열 (높이);

for (var i = 0; i <높이; i ++) {

지도 [i] = 새로운 배열 (너비);

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

맵 [i] [j] = 데이터 [i*width+j];

}

var I, J, I1, I2, J1, J2, C;

for (i = 0; i <높이; i ++)

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

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

J ++;

계속하다;

}

C =지도 [i] [J];

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

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

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

if (i2 <i1)

부서지다;

}

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

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

맵 [i2] [j2] = 0x100;

var x = block.clonenode (true);

x.style.left = j*줌;

x.style.top = i*줌;

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

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

x.style.backgroundcolor = 팔레트 [C];

image.appendChild (x);

J = J1;

}

</스크립트>

<cript>

함수 main () {

var t = 새 날짜 (). gettime ();

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

var gif = getgif ( "r0lgodlhdwapakecaaaazmzm ///////aacwaaaadwapaaaciispeqhsrz5modrlln48cxf8m2iq3ymmkqvlrtw4mlwwach+h09wdgltxp lzcbwcbwcbwcbwcbcbwcbwcdcbtcbtcbtcbtcbtcbtx iqaaow == ");

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

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

t = new date (). gettime ();

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

info.innerhtml+= "<br> Drawing Time"+(new Date (). gettime () -t)+"MS";

}

</스크립트>

<HR>

<div id = "info"> 페이지가로드 중입니다. 기다려주세요 ... </div>

</body>

</html>

추신 : 참조를위한 몇 가지 온라인 사진 도구가 있습니다.

Base64 인코딩 온라인 도구로 이미지 변환 :

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

온라인 이메일 이메일 아이콘 생성 도구 :

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

온라인 PS 이미지 처리 도구 :

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

온라인 사진 형식 전환 (JPG/BMP/GIF/PNG) 도구 :

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

ICO 아이콘 온라인 생성 도구 :

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

첨부 파일 : 또한 Base64 인코딩 변환 도구가 권장됩니다.

Base64 인코딩 및 디코딩 도구 :

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