ブログ

JavaScript Obfuscator Tool で難読化された JavaScript をデコードしてみた

経緯

  • 試しに、自作した JavaScript を JavaScript Obfuscator Tool にて難読化
  • 難読化前のコードをローカルにバックアップ
  • 得られた難読化コードをサーバーにアップロード
  • 動作していることに満足して、数週間放置
  • ローカルのフォルダ整理中に、誤ってバックアップを削除してしまう
  • サーバーにもバックアップは残っていない
  • あるのは難読化済コードのみ
  • ・・・。
  • デコードするかぁ・・・

結果

+ この難読化済コードを、(クリックで展開)

const _0x2a58=['createElement','data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==','start','getElementById','mEncoder','mCanvas','メイリオ','mBezelX','download.gif','style','OnloadCyber','mTextSpaceY','mIntervalDraw','mSlider','display','fillText','GIFをダウンロード(','mTextSpaceX','canvas_gif_temp','ChangeFontSize_S','image/png','mImageArray','mType','addFrame','textContent','stream','px\x20','toDataURL','click','mFadeSpeed','#0f0','length','remove','DownloadGIF','ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn','getContext','min','download','font','abs','floor','arial','height','GifNum','data:image/gif;base64,','finish','.png','mWitdh','mIsExportFrame','mHeight','#f00','ChangeCanvasSize_L','max','split','ChangeCanvasSize_M','mBezelY','CreateGif','rgba(0,\x200,\x200,\x201)','random','none','mWraparoundProbability','mIsRainbowBezel','rgba(0,\x200,\x200,\x200.08)','mTextBox','ChangeGifTime_S','encoding_gif','mGifFrameSpan','fillRect','naturalWidth','lineWidth','mFontStyle','mGifTime','rgb(0,\x20255,\x200)','anime_gif','mDrawlooper','updateGifInfo','src','mFontSize','ChangeCanvasSize','ExecuteCyber','href','width','ChangeGifTime_M','mLinewidth','fillStyle','value','strokeStyle','block','mTextAdjustY','mTextAdjustX','drawImage','ceil','frame_'];(function(_0x2ed04e,_0x2a587b){const _0x9b7da7=function(_0x540d80){while(--_0x540d80){_0x2ed04e['push'](_0x2ed04e['shift']());}};_0x9b7da7(++_0x2a587b);}(_0x2a58,0x128));const _0x9b7d=function(_0x2ed04e,_0x2a587b){_0x2ed04e=_0x2ed04e-0x0;let _0x9b7da7=_0x2a58[_0x2ed04e];return _0x9b7da7;};class Cyber{constructor(_0x4c0e2a,_0x54d509,_0x45d90f,_0x56de54,_0x10e014){this[_0x9b7d('0x51')]=document[_0x9b7d('0x4f')](_0x4c0e2a),this[_0x9b7d('0x59')]=document['getElementById'](_0x54d509),this[_0x9b7d('0x2e')]=document[_0x9b7d('0x4f')](_0x45d90f),this[_0x9b7d('0x39')]=0x0,this[_0x9b7d('0x5')]=_0x10e014,this[_0x9b7d('0x4')]=[],this['mEncoder'],this[_0x9b7d('0x58')]=0x23,this[_0x9b7d('0x3c')]=0xa,this['mFontStyle']=_0x9b7d('0x18'),this['mWitdh']=0x1e0,this['mHeight']=0x10e,this[_0x9b7d('0x42')]=0x0,this[_0x9b7d('0x53')]=this['mLinewidth']+0x0,this[_0x9b7d('0x26')]=this[_0x9b7d('0x42')]+0x0,this[_0x9b7d('0x2c')]=0x0,this[_0x9b7d('0x48')]=0x2,this[_0x9b7d('0x47')]=0x2,this[_0x9b7d('0x0')]=0x0,this[_0x9b7d('0x57')]=0x0,this['mFadeSpeed']=_0x9b7d('0x2d'),this[_0x9b7d('0x2b')]=0.975,this[_0x9b7d('0x31')]=0x1,this[_0x9b7d('0x1f')]=0x0,this[_0x9b7d('0x36')]=0x0,this[_0x9b7d('0x1a')]=0x0,this[_0x9b7d('0x41')](),this['mFontSize']=0x21,this['mFontStyle']=_0x9b7d('0x52'),this[_0x9b7d('0x1e')]=0x140,this['mHeight']=0x10e,this[_0x9b7d('0x42')]=0x3,this['mBezelX']=this[_0x9b7d('0x42')]+0x2,this[_0x9b7d('0x26')]=this[_0x9b7d('0x42')]+0x2,this['mIsRainbowBezel']=0x0,this[_0x9b7d('0x48')]=0xc,this[_0x9b7d('0x47')]=0x6,this[_0x9b7d('0x0')]=0x4,this[_0x9b7d('0x57')]=0x8,this[_0x9b7d('0xc')]='rgba(0,\x200,\x200,\x200.35)',this[_0x9b7d('0x2b')]=0.75,this[_0x9b7d('0x31')]=0x1,this[_0x9b7d('0x1f')]=0x0;}[_0x9b7d('0x56')](){const _0x571b29=this[_0x9b7d('0x51')];let _0x26069c=_0x571b29[_0x9b7d('0x12')]('2d');const _0x1bab39=_0x571b29[_0x9b7d('0x40')]=this[_0x9b7d('0x1e')],_0x1672b8=_0x571b29[_0x9b7d('0x19')]=this[_0x9b7d('0x20')],_0x41ce33=this['mBezelX'],_0x107c64=this[_0x9b7d('0x26')],_0x5055dc=this[_0x9b7d('0x2c')],_0x2c980d=this[_0x9b7d('0x48')],_0x4f6e93=this[_0x9b7d('0x47')],_0x4cd538=this[_0x9b7d('0x3c')],_0x1ccb88=this[_0x9b7d('0x35')],_0x2613d6=this['mTextSpaceX'],_0x5f58cb=this['mTextSpaceY'],_0x351abb=this['mFadeSpeed'],_0x4e37c4=this[_0x9b7d('0x2b')];_0x26069c[_0x9b7d('0x15')]=_0x4cd538+_0x9b7d('0x9')+_0x1ccb88,_0x26069c[_0x9b7d('0x43')]=_0x9b7d('0x28'),_0x26069c['fillRect'](0x0,0x0,_0x1bab39,_0x1672b8);const _0x1801d9=this[_0x9b7d('0x42')];_0x1801d9>0x1&&(_0x26069c[_0x9b7d('0x34')]=_0x1801d9,_0x26069c[_0x9b7d('0x45')]=_0x9b7d('0x37'),_0x26069c['strokeRect'](_0x1801d9,_0x1801d9,_0x1bab39-_0x1801d9*0x2,_0x1672b8-_0x1801d9*0x2));const _0x138638=_0x1bab39-_0x41ce33*0x2,_0x4506ad=_0x1672b8-_0x107c64*0x2,_0x4fd3c2=this['mType'];let _0x491f3f=_0x9b7d('0x11');const _0x80564e=this[_0x9b7d('0x2e')][_0x9b7d('0x44')];_0x80564e[_0x9b7d('0xe')]>=0x1&&(_0x491f3f=_0x80564e);_0x491f3f=_0x491f3f[_0x9b7d('0x24')]('');let _0x50875=_0x138638-_0x2c980d,_0xbcd391=_0x4cd538+_0x2613d6;_0x4fd3c2==0x1&&(_0x50875=_0x4506ad-_0x4f6e93,_0xbcd391=_0x4cd538+_0x5f58cb);const _0x330f88=Math[_0x9b7d('0x17')](_0x50875/_0xbcd391);let _0x14f705=_0x4506ad-_0x4f6e93,_0x5afd10=_0x4cd538+_0x5f58cb;_0x4fd3c2==0x1&&(_0x14f705=_0x138638-_0x2c980d,_0x5afd10=_0x4cd538+_0x2613d6);const _0x3ef56e=Math[_0x9b7d('0x17')](_0x14f705/_0x5afd10);let _0xf32bb7=[];for(let _0x2e9020=0x0;_0x2e9020<_0x330f88;_0x2e9020++){_0xf32bb7[_0x2e9020]=0x0;}let _0x612a7b=0x0;function _0x1bf3e3(){_0x26069c[_0x9b7d('0x43')]=_0x351abb,_0x26069c[_0x9b7d('0x32')](_0x41ce33,_0x107c64,_0x138638,_0x4506ad);if(_0x5055dc==0x1){const _0x337a98=(_0x612a7b+0x0)*0.8,_0x3dacba=Math[_0x9b7d('0x13')](Math[_0x9b7d('0x23')](Math[_0x9b7d('0x16')]((_0x337a98+0x5)%0x6-0x3)-0x1,0x0),0x1)*0xff,_0x4c6d33=Math[_0x9b7d('0x13')](Math[_0x9b7d('0x23')](Math[_0x9b7d('0x16')]((_0x337a98+0x3)%0x6-0x3)-0x1,0x0),0x1)*0xff,_0x5e21e3=Math[_0x9b7d('0x13')](Math[_0x9b7d('0x23')](Math[_0x9b7d('0x16')]((_0x337a98+0x1)%0x6-0x3)-0x1,0x0),0x1)*0xff;_0x26069c[_0x9b7d('0x45')]='rgb('+_0x3dacba+','+_0x4c6d33+','+_0x5e21e3+')',_0x26069c['strokeRect'](_0x1801d9,_0x1801d9,_0x138638+_0x41ce33*0x2-_0x1801d9*0x2,_0x4506ad+_0x41ce33*0x2-_0x1801d9*0x2);}for(let _0x3d4efb=0x0;_0x3d4efb<_0x330f88;_0x3d4efb++){let _0x465cb5=_0xf32bb7[_0x3d4efb]>=_0x3ef56e;_0x465cb5==0x1&&(Math['random']()>_0x4e37c4&&(_0xf32bb7[_0x3d4efb]=0x0,_0x465cb5=0x0));if(_0x465cb5==0x0){const [_0x23a6d8,_0x263805]=_0x223f01(_0x330f88,_0x491f3f,_0x3d4efb,_0xf32bb7[_0x3d4efb],_0x612a7b);_0x26069c[_0x9b7d('0x43')]=_0x263805,_0x4fd3c2==0x1?_0x26069c[_0x9b7d('0x5b')](_0x23a6d8,_0xf32bb7[_0x3d4efb]*(_0x4cd538+_0x2613d6)+_0x41ce33+_0x2c980d,_0x3d4efb*(_0x4cd538+_0x5f58cb)+_0x107c64+_0x4cd538+_0x4f6e93):_0x26069c[_0x9b7d('0x5b')](_0x23a6d8,_0x3d4efb*(_0x4cd538+_0x2613d6)+_0x41ce33+_0x2c980d,_0xf32bb7[_0x3d4efb]*(_0x4cd538+_0x5f58cb)+_0x107c64+_0x4cd538+_0x4f6e93),_0xf32bb7[_0x3d4efb]++;}}_0x612a7b++;function _0x223f01(_0x13b090,_0x281d01,_0x47c8a4,_0x47b5c9,_0x1da13c){let _0x32d666=_0x281d01[Math['floor'](Math[_0x9b7d('0x29')]()*_0x281d01['length'])],_0x477883=_0x9b7d('0x21');const _0x7710a1=Math[_0x9b7d('0x17')](_0x13b090/0x2);if(_0x281d01[_0x9b7d('0xe')]==0x2&&_0x1da13c==0x0){if(_0x47c8a4==_0x7710a1-0x1&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x0],_0x477883=_0x9b7d('0x21');else _0x47c8a4==_0x7710a1&&_0x47b5c9==0x0?(_0x32d666=_0x281d01[0x1],_0x477883=_0x9b7d('0x21')):_0x477883='#0f0';}else{if(_0x281d01[_0x9b7d('0xe')]==0x3&&_0x1da13c==0x0){if(_0x47c8a4==_0x7710a1-0x2&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x0],_0x477883=_0x9b7d('0x21');else{if(_0x47c8a4==_0x7710a1-0x1&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x1],_0x477883=_0x9b7d('0x21');else _0x47c8a4==_0x7710a1&&_0x47b5c9==0x0?(_0x32d666=_0x281d01[0x2],_0x477883=_0x9b7d('0x21')):_0x477883='#0f0';}}else{if(_0x281d01[_0x9b7d('0xe')]==0x4&&_0x1da13c==0x0){if(_0x47c8a4==_0x7710a1-0x2&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x0],_0x477883=_0x9b7d('0x21');else{if(_0x47c8a4==_0x7710a1-0x1&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x1],_0x477883=_0x9b7d('0x21');else{if(_0x47c8a4==_0x7710a1&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x2],_0x477883=_0x9b7d('0x21');else _0x47c8a4==_0x7710a1+0x1&&_0x47b5c9==0x0?(_0x32d666=_0x281d01[0x3],_0x477883=_0x9b7d('0x21')):_0x477883=_0x9b7d('0xd');}}}else{if(_0x281d01[_0x9b7d('0xe')]==0x5&&_0x1da13c==0x0){if(_0x47c8a4==_0x7710a1-0x2&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x0],_0x477883=_0x9b7d('0x21');else{if(_0x47c8a4==_0x7710a1-0x1&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x1],_0x477883=_0x9b7d('0x21');else{if(_0x47c8a4==_0x7710a1&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x2],_0x477883=_0x9b7d('0x21');else{if(_0x47c8a4==_0x7710a1+0x1&&_0x47b5c9==0x0)_0x32d666=_0x281d01[0x3],_0x477883='#f00';else _0x47c8a4==_0x7710a1+0x2&&_0x47b5c9==0x0?(_0x32d666=_0x281d01[0x4],_0x477883=_0x9b7d('0x21')):_0x477883=_0x9b7d('0xd');}}}}else _0x477883='#0f0';}}}return[_0x32d666,_0x477883];}}this[_0x9b7d('0x58')]=this[_0x9b7d('0x59')][_0x9b7d('0x23')]-this['mSlider'][_0x9b7d('0x44')]+0xf,this['mIntervalDraw']=0xc8,this[_0x9b7d('0x39')]=setInterval(_0x1bf3e3,this[_0x9b7d('0x58')]);}[_0x9b7d('0x3e')](){clearInterval(this[_0x9b7d('0x39')]),this[_0x9b7d('0x56')]();}[_0x9b7d('0x27')](){function _0x1dc076(_0x3b34d1,_0x2795b1,_0x1029b1){const _0x3bacbb=_0x3b34d1[_0x9b7d('0xa')](_0x9b7d('0x3'));var _0x9ac7c3=new Image();_0x9ac7c3[_0x9b7d('0x3b')]=_0x3bacbb,_0x2795b1[_0x1029b1]=_0x9ac7c3;}this[_0x9b7d('0x4')][_0x9b7d('0xe')]=0x0,document[_0x9b7d('0x4f')](_0x9b7d('0x38'))['src']=_0x9b7d('0x4d'),document[_0x9b7d('0x4f')]('download_gif')['style'][_0x9b7d('0x5a')]=_0x9b7d('0x2a'),document['getElementById'](_0x9b7d('0x30'))['style'][_0x9b7d('0x5a')]=_0x9b7d('0x46');const _0x28f1c7=this[_0x9b7d('0x51')];let _0x14b993=this['mImageArray'];this['mEncoder']=new GIFEncoder();let _0x15558d=this['mEncoder'],_0x15ea3f=0x0;this['updateGifInfo']();const _0x59b777=this[_0x9b7d('0x58')],_0x6a28aa=this[_0x9b7d('0x1a')],_0x3866e6=this['mGifFrameSpan'],_0x1bdbbf=setInterval(function(){_0x1dc076(_0x28f1c7,_0x14b993,_0x15ea3f),_0x15ea3f++;if(_0x15ea3f>=_0x6a28aa){var _0x4e5fca=document[_0x9b7d('0x4f')](_0x9b7d('0x1')),_0x3dfb9a=_0x4e5fca[_0x9b7d('0x12')]('2d');_0x15558d['setRepeat'](0x0),_0x15558d['setDelay'](_0x59b777),_0x15558d[_0x9b7d('0x4e')](),frames=_0x14b993,_0x4e5fca[_0x9b7d('0x40')]=frames[0x0][_0x9b7d('0x33')],_0x4e5fca[_0x9b7d('0x19')]=frames[0x0]['naturalHeight'];for(var _0x58bfda=0x0;_0x58bfda<frames[_0x9b7d('0xe')];_0x58bfda++){_0x3dfb9a[_0x9b7d('0x49')](frames[_0x58bfda],0x0,0x0),_0x15558d[_0x9b7d('0x6')](_0x3dfb9a);}_0x15558d[_0x9b7d('0x1c')](),document[_0x9b7d('0x4f')](_0x9b7d('0x38'))[_0x9b7d('0x3b')]=_0x9b7d('0x1b')+encode64(_0x15558d[_0x9b7d('0x8')]()['getData']());const _0x99ff55=document['getElementById'](_0x9b7d('0x38'))[_0x9b7d('0x3b')][_0x9b7d('0xe')],_0x41b772=Math[_0x9b7d('0x4a')](_0x99ff55/0xf4240/1.35);let _0xfdad32=document['getElementById']('download_gif');_0xfdad32['style'][_0x9b7d('0x5a')]=_0x9b7d('0x46'),_0xfdad32[_0x9b7d('0x7')]=_0x9b7d('0x5c')+_0x41b772+'MB)',document[_0x9b7d('0x4f')]('encoding_gif')[_0x9b7d('0x55')][_0x9b7d('0x5a')]=_0x9b7d('0x2a'),clearInterval(_0x1bdbbf);}},_0x59b777*_0x3866e6);if(this['mIsExportFrame']==0x1){let _0x2366e1=0x0;const _0x48ff57=setInterval(function(){var _0x325f21=document[_0x9b7d('0x4c')]('a');_0x325f21[_0x9b7d('0x14')]=_0x9b7d('0x4b')+_0x2366e1+_0x9b7d('0x1d'),_0x325f21[_0x9b7d('0x3f')]=_0x14b993[_0x2366e1]['src'],_0x325f21[_0x9b7d('0xb')](),_0x325f21[_0x9b7d('0xf')](),_0x2366e1++,_0x2366e1>=_0x6a28aa&&clearInterval(_0x48ff57);},0x64);}}[_0x9b7d('0x10')](){this[_0x9b7d('0x50')][_0x9b7d('0x14')](_0x9b7d('0x54'));}[_0x9b7d('0x2')](){this['mFontSize']=0x5;}['ChangeFontSize_M'](){this[_0x9b7d('0x3c')]=0xa;}['ChangeFontSize_L'](){this[_0x9b7d('0x3c')]=0xf;}['ChangeCanvasSize_S'](){this[_0x9b7d('0x1e')]=0x140,this[_0x9b7d('0x20')]=0xb4;}[_0x9b7d('0x25')](){this[_0x9b7d('0x1e')]=0x1e0,this[_0x9b7d('0x20')]=0x10e;}[_0x9b7d('0x22')](){this['mWitdh']=0x280,this['mHeight']=0x168;}[_0x9b7d('0x3d')](_0x36bf9d,_0x5e4b5a){this['mWitdh']=_0x36bf9d,this[_0x9b7d('0x20')]=_0x5e4b5a;}[_0x9b7d('0x2f')](){this[_0x9b7d('0x36')]=0x7d0;const _0x42817f=this[_0x9b7d('0x36')]/this['mIntervalDraw'];this[_0x9b7d('0x1a')]=Math[_0x9b7d('0x17')](_0x42817f);}[_0x9b7d('0x41')](){this['mGifTime']=0xfa0;const _0x939fec=this[_0x9b7d('0x36')]/this[_0x9b7d('0x58')];this[_0x9b7d('0x1a')]=Math[_0x9b7d('0x17')](_0x939fec);}['ChangeGifTime_L'](){this[_0x9b7d('0x36')]=0x1770;const _0x1d1805=this[_0x9b7d('0x36')]/this[_0x9b7d('0x58')];this['GifNum']=Math[_0x9b7d('0x17')](_0x1d1805);}[_0x9b7d('0x3a')](){const _0x499797=this['mGifTime']/this[_0x9b7d('0x58')];this['GifNum']=Math['floor'](_0x499797);}}

+ ほぼ元コードにまでデコードした(クリックで展開)

// マトリックス風のcanvas
// type == 1 の場合は、文字が横方向に流れる
class Cyber {
constructor(id_canvas, id_slider, id_text, type) {
this.mCanvas = document.getElementById(id_canvas);
this.mSlider = document.getElementById(id_slider);
this.mTextBox = document.getElementById(id_text);

this.mDrawlooper = 0;
this.mType = type;
this.mImageArray = [];
this.mEncoder;
this.mIntervalDraw = 35;

this.mFontSize = 10;
this.mFontStyle = 'arial';
this.mWitdh = 480;
this.mHeight = 270;
this.mLinewidth = 0;
this.mBezelX = this.mLinewidth + 0;
this.mBezelY = this.mLinewidth + 0;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 2;
this.mTextAdjustY = 2;
this.mTextSpaceX = 0;
this.mTextSpaceY = 0;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.08)';
this.mWraparoundProbability = 0.975;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
this.mGifTime = 0;
this.GifNum = 0;
this.ChangeGifTime_M();

/*
* LINEスタンプ用の設定
this.mFontSize = 33;
this.mFontStyle = 'メイリオ';
this.mWitdh = 320;
this.mHeight = 270;
this.mLinewidth = 3;
this.mBezelX = this.mLinewidth + 2;
this.mBezelY = this.mLinewidth + 2;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 12;
this.mTextAdjustY = 6;
this.mTextSpaceX = 4;
this.mTextSpaceY = 8;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.35)';
this.mWraparoundProbability = 0.75;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
*/
}

OnloadCyber()
{
const canvas = this.mCanvas;
let context = canvas.getContext('2d');
const width_original = canvas.width = this.mWitdh;
const height_original = canvas.height = this.mHeight;
const bezel_x = this.mBezelX;
const bezel_y = this.mBezelY;
const is_rainbow_bezel = this.mIsRainbowBezel;
const text_adjust_x = this.mTextAdjustX;
const text_adjust_y = this.mTextAdjustY;
const font_size = this.mFontSize;
const font_style = this.mFontStyle;
const text_space_x = this.mTextSpaceX;
const text_space_y = this.mTextSpaceY;
const fade_speed = this.mFadeSpeed;
const wraparound_probability = this.mWraparoundProbability;
const type = this.mType;

context.font = font_size + 'px ' + font_style;
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.fillRect(0, 0, width_original, height_original);

// 外枠の描画
const line_width = this.mLinewidth;
if (line_width > 1)
{
context.lineWidth = line_width;
context.strokeStyle = 'rgb(0, 255, 0)';
context.strokeRect(line_width, line_width, width_original - line_width * 2, height_original - line_width * 2);
}

// ベゼルを除いた正味の描画領域
const width_impl = width_original - bezel_x * 2;
const height_impl = height_original - bezel_y * 2;

// 表示する文字列
let text_original = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn';
const text_box = this.mTextBox.value;
if (text_box.length >= 1)
{
text_original = text_box;
}
text_original = text_original.split('');

// 行と列を算出
let column_span = width_impl - text_adjust_x;
let font_span_x = font_size + text_space_x;
if (type == 1)
{
column_span = height_impl - text_adjust_y;
font_span_x = font_size + text_space_y;
}
const column_num = Math.floor(column_span / font_span_x);
let row_span = height_impl - text_adjust_y;
let font_span_y = font_size + text_space_y;
if (type == 1)
{
row_span = width_impl - text_adjust_x;
font_span_y = font_size + text_space_x;
}
const row_num = Math.floor(row_span / font_span_y);

// 配列初期化
let drop_index = [];
for (let i = 0; i < column_num; i++) {
drop_index[i] = 0;
}

// 描画
let draw_count = 0;
function draw()
{
// 描画ごとに薄い画面でフェードさせていく
context.fillStyle = fade_speed;
context.fillRect(bezel_x, bezel_y, width_impl, height_impl);

// 外枠をレインボーにする
if (is_rainbow_bezel == 1)
{
const start = (draw_count + 0) * 0.8;
const r = Math.min(Math.max(Math.abs((start + 5) % 6 - 3) - 1, 0), 1) * 255;
const g = Math.min(Math.max(Math.abs((start + 3) % 6 - 3) - 1, 0), 1) * 255;
const b = Math.min(Math.max(Math.abs((start + 1) % 6 - 3) - 1, 0), 1) * 255;
context.strokeStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
context.strokeRect(line_width, line_width, width_impl + bezel_x * 2 - line_width * 2, height_impl + bezel_x * 2 - line_width * 2);
}

// 列ごとに1文字を描画
for (let i = 0; i < column_num; i++)
{
let is_rangeover_row = drop_index[i] >= row_num;
if (is_rangeover_row == 1)
{
// 行が範囲オーバーしている場合は、一定確率で drop_index を初期化
if (Math.random() > wraparound_probability)
{
drop_index[i] = 0;
is_rangeover_row = 0;
}
}

if (is_rangeover_row == 0)
{
// 文字と色を取得
const [text, text_color] = getTextAndColor(column_num, text_original, i, drop_index[i], draw_count);
context.fillStyle = text_color;

// 描画
if (type == 1)
{
context.fillText(text, drop_index[i] * (font_size + text_space_x) + bezel_x + text_adjust_x, i * (font_size + text_space_y) + bezel_y + font_size + text_adjust_y);
}
else
{
context.fillText(text, i * (font_size + text_space_x) + bezel_x + text_adjust_x, drop_index[i] * (font_size + text_space_y) + bezel_y + font_size + text_adjust_y);
}

drop_index[i]++;
}
}

draw_count++;
}

// 文字と色を取得
function getTextAndColor(column_num, text_original, column_index, row_index, draw_count)
{
// 初回のみ、指定した文字列を赤色にする(5文字まで)

let text = text_original[Math.floor(Math.random() * text_original.length)];
let text_color = '#f00';
const column_half = Math.floor(column_num / 2);

if (text_original.length == 2 && draw_count == 0)
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[0], text_color = '#f00';
else column_index == column_half && row_index == 0 ? (text = text_original[1], text_color = '#f00') : text_color = '#0f0';
}
else if (text_original.length == 3 && draw_count == 0)
{
if (column_index == column_half - 2 && row_index == 0) text = text_original[0], text_color = '#f00';
else
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[1], text_color = '#f00';
else column_index == column_half && row_index == 0 ? (text = text_original[2], text_color = '#f00') : text_color = '#0f0';
}
}
else if (text_original.length == 4 && draw_count == 0)
{
if (column_index == column_half - 2 && row_index == 0) text = text_original[0], text_color = '#f00';
else
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[1], text_color = '#f00';
else
{
if (column_index == column_half && row_index == 0) text = text_original[2], text_color = '#f00';
else column_index == column_half + 1 && row_index == 0 ? (text = text_original[3], text_color = '#f00') : text_color = '#0f0';
}
}
}
else if (text_original.length == 5 && draw_count == 0)
{
if (column_index == column_half - 2 && row_index == 0) text = text_original[0], text_color = '#f00';
else
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[1], text_color = '#f00';
else
{
if (column_index == column_half && row_index == 0) text = text_original[2], text_color = '#f00';
else
{
if (column_index == column_half + 1 && row_index == 0) text = text_original[3], text_color = '#f00';
else column_index == column_half + 2 && row_index == 0 ? (text = text_original[4], text_color = '#f00') : text_color = '#0f0';
}
}
}
}
else
{
text_color = '#0f0';
}

return [text, text_color];
}

// 落下速度を設定
this.mIntervalDraw = this.mSlider.max - this.mSlider.value + 15;
// LINEスタンプ用の設定
//this.mIntervalDraw = 200;
this.mDrawlooper = setInterval(draw, this.mIntervalDraw);
}

ExecuteCyber()
{
// 前回に実行した draw の繰り返し実行を停止
clearInterval(this.mDrawlooper);

// 再度実行
this.OnloadCyber();
}

CreateGif()
{
// canvas のデータを image_array にセット
function createImage(canvas, image_array, image_index)
{
const dataURL = canvas.toDataURL('image/png');
var image = new Image();
image.src = dataURL;
image_array[image_index] = image;
}

this.mImageArray.length = 0;
document.getElementById('anime_gif').src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
document.getElementById('download_gif').style.display = 'none';
document.getElementById('encoding_gif').style.display = 'block';

const canvas = this.mCanvas;
let image_array = this.mImageArray;
this.mEncoder = new GIFEncoder();
let encoder = this.mEncoder;
let image_index = 0;
this.updateGifInfo();
const interval_draw = this.mIntervalDraw;
const gif_num = this.GifNum;
const gif_frame_span = this.mGifFrameSpan;

// canvas のフレームを image_array に保存
const interval_id = setInterval(function() {
createImage(canvas, image_array, image_index);
image_index++;

// 所定のフレーム数が得られたら、gifを作成
if (image_index >= gif_num)
{
// gifを作成
var canvas_gif_temp = document.getElementById('canvas_gif_temp');
var canvas_gif_temp_context = canvas_gif_temp.getContext('2d');
encoder.setRepeat(0);
encoder.setDelay(interval_draw);
encoder.start();
frames = image_array;
canvas_gif_temp.width = frames[0].naturalWidth;
canvas_gif_temp.height = frames[0].naturalHeight;
for (var i = 0; i < frames.length; i++)
{
canvas_gif_temp_context.drawImage(frames[i], 0, 0), encoder.addFrame(canvas_gif_temp_context);
}
encoder.finish();

// ダウンロードボタンを設定
document.getElementById('anime_gif').src = 'data:image/gif;base64,' + encode64(encoder.stream().getData());
const gif_data_size_impl = document.getElementById('anime_gif').src.length;
const gif_data_size = Math.ceil(gif_data_size_impl / 1000000 / 1.35);
let id_download_gif = document.getElementById('download_gif');
id_download_gif.style.display = 'block';
id_download_gif.textContent = 'GIFをダウンロード(' + gif_data_size + 'MB)';
document.getElementById('encoding_gif').style.display = 'none';

clearInterval(interval_id);
}
}, interval_draw * gif_frame_span);

// gifの各フレームを画像出力するデバッグ機能
if (this.mIsExportFrame == 1)
{
let frame_index = 0;
const interval_id_frame_download = setInterval(function() {
var element = document.createElement('a');
element.download = 'frame_' + frame_index + '.png';
element.href = image_array[frame_index].src;
element.click();
element.remove();
frame_index++;
frame_index >= gif_num && clearInterval(interval_id_frame_download);
}, 100);
}
}

DownloadGIF()
{
this.mEncoder.download('download.gif');
}

ChangeFontSize_S()
{
this.mFontSize = 5;
}

ChangeFontSize_M()
{
this.mFontSize = 10;
}

ChangeFontSize_L()
{
this.mFontSize = 15;
}

ChangeCanvasSize_S()
{
this.mWitdh = 320;
this.mHeight = 180;
}

ChangeCanvasSize_M()
{
this.mWitdh = 480;
this.mHeight = 270;
}

ChangeCanvasSize_L()
{
this.mWitdh = 640;
this.mHeight = 360;
}

ChangeCanvasSize(width, height)
{
this.mWitdh = width;
this.mHeight = height;
}

ChangeGifTime_S()
{
this.mGifTime = 2000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_M()
{
this.mGifTime = 4000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_L()
{
this.mGifTime = 6000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

updateGifInfo()
{
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}
}

デコード手順

1. Online JavaScript Beautifier でまずは整形

+ (クリックで展開)

const _0x2a58 = ['createElement', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'start', 'getElementById', 'mEncoder', 'mCanvas', 'メイリオ', 'mBezelX', 'download.gif', 'style', 'OnloadCyber', 'mTextSpaceY', 'mIntervalDraw', 'mSlider', 'display', 'fillText', 'GIFをダウンロード(', 'mTextSpaceX', 'canvas_gif_temp', 'ChangeFontSize_S', 'image/png', 'mImageArray', 'mType', 'addFrame', 'textContent', 'stream', 'px\x20', 'toDataURL', 'click', 'mFadeSpeed', '#0f0', 'length', 'remove', 'DownloadGIF', 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn', 'getContext', 'min', 'download', 'font', 'abs', 'floor', 'arial', 'height', 'GifNum', 'data:image/gif;base64,', 'finish', '.png', 'mWitdh', 'mIsExportFrame', 'mHeight', '#f00', 'ChangeCanvasSize_L', 'max', 'split', 'ChangeCanvasSize_M', 'mBezelY', 'CreateGif', 'rgba(0,\x200,\x200,\x201)', 'random', 'none', 'mWraparoundProbability', 'mIsRainbowBezel', 'rgba(0,\x200,\x200,\x200.08)', 'mTextBox', 'ChangeGifTime_S', 'encoding_gif', 'mGifFrameSpan', 'fillRect', 'naturalWidth', 'lineWidth', 'mFontStyle', 'mGifTime', 'rgb(0,\x20255,\x200)', 'anime_gif', 'mDrawlooper', 'updateGifInfo', 'src', 'mFontSize', 'ChangeCanvasSize', 'ExecuteCyber', 'href', 'width', 'ChangeGifTime_M', 'mLinewidth', 'fillStyle', 'value', 'strokeStyle', 'block', 'mTextAdjustY', 'mTextAdjustX', 'drawImage', 'ceil', 'frame_'];
(function(_0x2ed04e, _0x2a587b) {
const _0x9b7da7 = function(_0x540d80) {
while (--_0x540d80) {
_0x2ed04e['push'](_0x2ed04e['shift']());
}
};
_0x9b7da7(++_0x2a587b);
}(_0x2a58, 0x128));
const _0x9b7d = function(_0x2ed04e, _0x2a587b) {
_0x2ed04e = _0x2ed04e - 0x0;
let _0x9b7da7 = _0x2a58[_0x2ed04e];
return _0x9b7da7;
};
class Cyber {
constructor(_0x4c0e2a, _0x54d509, _0x45d90f, _0x56de54, _0x10e014) {
this[_0x9b7d('0x51')] = document[_0x9b7d('0x4f')](_0x4c0e2a), this[_0x9b7d('0x59')] = document['getElementById'](_0x54d509), this[_0x9b7d('0x2e')] = document[_0x9b7d('0x4f')](_0x45d90f), this[_0x9b7d('0x39')] = 0x0, this[_0x9b7d('0x5')] = _0x10e014, this[_0x9b7d('0x4')] = [], this['mEncoder'], this[_0x9b7d('0x58')] = 0x23, this[_0x9b7d('0x3c')] = 0xa, this['mFontStyle'] = _0x9b7d('0x18'), this['mWitdh'] = 0x1e0, this['mHeight'] = 0x10e, this[_0x9b7d('0x42')] = 0x0, this[_0x9b7d('0x53')] = this['mLinewidth'] + 0x0, this[_0x9b7d('0x26')] = this[_0x9b7d('0x42')] + 0x0, this[_0x9b7d('0x2c')] = 0x0, this[_0x9b7d('0x48')] = 0x2, this[_0x9b7d('0x47')] = 0x2, this[_0x9b7d('0x0')] = 0x0, this[_0x9b7d('0x57')] = 0x0, this['mFadeSpeed'] = _0x9b7d('0x2d'), this[_0x9b7d('0x2b')] = 0.975, this[_0x9b7d('0x31')] = 0x1, this[_0x9b7d('0x1f')] = 0x0, this[_0x9b7d('0x36')] = 0x0, this[_0x9b7d('0x1a')] = 0x0, this[_0x9b7d('0x41')](), this['mFontSize'] = 0x21, this['mFontStyle'] = _0x9b7d('0x52'), this[_0x9b7d('0x1e')] = 0x140, this['mHeight'] = 0x10e, this[_0x9b7d('0x42')] = 0x3, this['mBezelX'] = this[_0x9b7d('0x42')] + 0x2, this[_0x9b7d('0x26')] = this[_0x9b7d('0x42')] + 0x2, this['mIsRainbowBezel'] = 0x0, this[_0x9b7d('0x48')] = 0xc, this[_0x9b7d('0x47')] = 0x6, this[_0x9b7d('0x0')] = 0x4, this[_0x9b7d('0x57')] = 0x8, this[_0x9b7d('0xc')] = 'rgba(0,\x200,\x200,\x200.35)', this[_0x9b7d('0x2b')] = 0.75, this[_0x9b7d('0x31')] = 0x1, this[_0x9b7d('0x1f')] = 0x0;
} [_0x9b7d('0x56')]() {
const _0x571b29 = this[_0x9b7d('0x51')];
let _0x26069c = _0x571b29[_0x9b7d('0x12')]('2d');
const _0x1bab39 = _0x571b29[_0x9b7d('0x40')] = this[_0x9b7d('0x1e')],
_0x1672b8 = _0x571b29[_0x9b7d('0x19')] = this[_0x9b7d('0x20')],
_0x41ce33 = this['mBezelX'],
_0x107c64 = this[_0x9b7d('0x26')],
_0x5055dc = this[_0x9b7d('0x2c')],
_0x2c980d = this[_0x9b7d('0x48')],
_0x4f6e93 = this[_0x9b7d('0x47')],
_0x4cd538 = this[_0x9b7d('0x3c')],
_0x1ccb88 = this[_0x9b7d('0x35')],
_0x2613d6 = this['mTextSpaceX'],
_0x5f58cb = this['mTextSpaceY'],
_0x351abb = this['mFadeSpeed'],
_0x4e37c4 = this[_0x9b7d('0x2b')];
_0x26069c[_0x9b7d('0x15')] = _0x4cd538 + _0x9b7d('0x9') + _0x1ccb88, _0x26069c[_0x9b7d('0x43')] = _0x9b7d('0x28'), _0x26069c['fillRect'](0x0, 0x0, _0x1bab39, _0x1672b8);
const _0x1801d9 = this[_0x9b7d('0x42')];
_0x1801d9 > 0x1 && (_0x26069c[_0x9b7d('0x34')] = _0x1801d9, _0x26069c[_0x9b7d('0x45')] = _0x9b7d('0x37'), _0x26069c['strokeRect'](_0x1801d9, _0x1801d9, _0x1bab39 - _0x1801d9 * 0x2, _0x1672b8 - _0x1801d9 * 0x2));
const _0x138638 = _0x1bab39 - _0x41ce33 * 0x2,
_0x4506ad = _0x1672b8 - _0x107c64 * 0x2,
_0x4fd3c2 = this['mType'];
let _0x491f3f = _0x9b7d('0x11');
const _0x80564e = this[_0x9b7d('0x2e')][_0x9b7d('0x44')];
_0x80564e[_0x9b7d('0xe')] >= 0x1 && (_0x491f3f = _0x80564e);
_0x491f3f = _0x491f3f[_0x9b7d('0x24')]('');
let _0x50875 = _0x138638 - _0x2c980d,
_0xbcd391 = _0x4cd538 + _0x2613d6;
_0x4fd3c2 == 0x1 && (_0x50875 = _0x4506ad - _0x4f6e93, _0xbcd391 = _0x4cd538 + _0x5f58cb);
const _0x330f88 = Math[_0x9b7d('0x17')](_0x50875 / _0xbcd391);
let _0x14f705 = _0x4506ad - _0x4f6e93,
_0x5afd10 = _0x4cd538 + _0x5f58cb;
_0x4fd3c2 == 0x1 && (_0x14f705 = _0x138638 - _0x2c980d, _0x5afd10 = _0x4cd538 + _0x2613d6);
const _0x3ef56e = Math[_0x9b7d('0x17')](_0x14f705 / _0x5afd10);
let _0xf32bb7 = [];
for (let _0x2e9020 = 0x0; _0x2e9020 < _0x330f88; _0x2e9020++) {
_0xf32bb7[_0x2e9020] = 0x0;
}
let _0x612a7b = 0x0;

function _0x1bf3e3() {
_0x26069c[_0x9b7d('0x43')] = _0x351abb, _0x26069c[_0x9b7d('0x32')](_0x41ce33, _0x107c64, _0x138638, _0x4506ad);
if (_0x5055dc == 0x1) {
const _0x337a98 = (_0x612a7b + 0x0) * 0.8,
_0x3dacba = Math[_0x9b7d('0x13')](Math[_0x9b7d('0x23')](Math[_0x9b7d('0x16')]((_0x337a98 + 0x5) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff,
_0x4c6d33 = Math[_0x9b7d('0x13')](Math[_0x9b7d('0x23')](Math[_0x9b7d('0x16')]((_0x337a98 + 0x3) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff,
_0x5e21e3 = Math[_0x9b7d('0x13')](Math[_0x9b7d('0x23')](Math[_0x9b7d('0x16')]((_0x337a98 + 0x1) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff;
_0x26069c[_0x9b7d('0x45')] = 'rgb(' + _0x3dacba + ',' + _0x4c6d33 + ',' + _0x5e21e3 + ')', _0x26069c['strokeRect'](_0x1801d9, _0x1801d9, _0x138638 + _0x41ce33 * 0x2 - _0x1801d9 * 0x2, _0x4506ad + _0x41ce33 * 0x2 - _0x1801d9 * 0x2);
}
for (let _0x3d4efb = 0x0; _0x3d4efb < _0x330f88; _0x3d4efb++) { let _0x465cb5 = _0xf32bb7[_0x3d4efb] >= _0x3ef56e;
_0x465cb5 == 0x1 && (Math['random']() > _0x4e37c4 && (_0xf32bb7[_0x3d4efb] = 0x0, _0x465cb5 = 0x0));
if (_0x465cb5 == 0x0) {
const [_0x23a6d8, _0x263805] = _0x223f01(_0x330f88, _0x491f3f, _0x3d4efb, _0xf32bb7[_0x3d4efb], _0x612a7b);
_0x26069c[_0x9b7d('0x43')] = _0x263805, _0x4fd3c2 == 0x1 ? _0x26069c[_0x9b7d('0x5b')](_0x23a6d8, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0x3d4efb * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93) : _0x26069c[_0x9b7d('0x5b')](_0x23a6d8, _0x3d4efb * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93), _0xf32bb7[_0x3d4efb]++;
}
}
_0x612a7b++;

function _0x223f01(_0x13b090, _0x281d01, _0x47c8a4, _0x47b5c9, _0x1da13c) {
let _0x32d666 = _0x281d01[Math['floor'](Math[_0x9b7d('0x29')]() * _0x281d01['length'])],
_0x477883 = _0x9b7d('0x21');
const _0x7710a1 = Math[_0x9b7d('0x17')](_0x13b090 / 0x2);
if (_0x281d01[_0x9b7d('0xe')] == 0x2 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = _0x9b7d('0x21');
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x1], _0x477883 = _0x9b7d('0x21')) : _0x477883 = '#0f0';
} else {
if (_0x281d01[_0x9b7d('0xe')] == 0x3 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = _0x9b7d('0x21');
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = _0x9b7d('0x21');
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x2], _0x477883 = _0x9b7d('0x21')) : _0x477883 = '#0f0';
}
} else {
if (_0x281d01[_0x9b7d('0xe')] == 0x4 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = _0x9b7d('0x21');
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = _0x9b7d('0x21');
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x2], _0x477883 = _0x9b7d('0x21');
else _0x47c8a4 == _0x7710a1 + 0x1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x3], _0x477883 = _0x9b7d('0x21')) : _0x477883 = _0x9b7d('0xd');
}
}
} else {
if (_0x281d01[_0x9b7d('0xe')] == 0x5 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = _0x9b7d('0x21');
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = _0x9b7d('0x21');
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x2], _0x477883 = _0x9b7d('0x21');
else {
if (_0x47c8a4 == _0x7710a1 + 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x3], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 0x2 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x4], _0x477883 = _0x9b7d('0x21')) : _0x477883 = _0x9b7d('0xd');
}
}
}
} else _0x477883 = '#0f0';
}
}
}
return [_0x32d666, _0x477883];
}
}
this[_0x9b7d('0x58')] = this[_0x9b7d('0x59')][_0x9b7d('0x23')] - this['mSlider'][_0x9b7d('0x44')] + 0xf, this['mIntervalDraw'] = 0xc8, this[_0x9b7d('0x39')] = setInterval(_0x1bf3e3, this[_0x9b7d('0x58')]);
} [_0x9b7d('0x3e')]() {
clearInterval(this[_0x9b7d('0x39')]), this[_0x9b7d('0x56')]();
} [_0x9b7d('0x27')]() {
function _0x1dc076(_0x3b34d1, _0x2795b1, _0x1029b1) {
const _0x3bacbb = _0x3b34d1[_0x9b7d('0xa')](_0x9b7d('0x3'));
var _0x9ac7c3 = new Image();
_0x9ac7c3[_0x9b7d('0x3b')] = _0x3bacbb, _0x2795b1[_0x1029b1] = _0x9ac7c3;
}
this[_0x9b7d('0x4')][_0x9b7d('0xe')] = 0x0, document[_0x9b7d('0x4f')](_0x9b7d('0x38'))['src'] = _0x9b7d('0x4d'), document[_0x9b7d('0x4f')]('download_gif')['style'][_0x9b7d('0x5a')] = _0x9b7d('0x2a'), document['getElementById'](_0x9b7d('0x30'))['style'][_0x9b7d('0x5a')] = _0x9b7d('0x46');
const _0x28f1c7 = this[_0x9b7d('0x51')];
let _0x14b993 = this['mImageArray'];
this['mEncoder'] = new GIFEncoder();
let _0x15558d = this['mEncoder'],
_0x15ea3f = 0x0;
this['updateGifInfo']();
const _0x59b777 = this[_0x9b7d('0x58')],
_0x6a28aa = this[_0x9b7d('0x1a')],
_0x3866e6 = this['mGifFrameSpan'],
_0x1bdbbf = setInterval(function() {
_0x1dc076(_0x28f1c7, _0x14b993, _0x15ea3f), _0x15ea3f++;
if (_0x15ea3f >= _0x6a28aa) {
var _0x4e5fca = document[_0x9b7d('0x4f')](_0x9b7d('0x1')),
_0x3dfb9a = _0x4e5fca[_0x9b7d('0x12')]('2d');
_0x15558d['setRepeat'](0x0), _0x15558d['setDelay'](_0x59b777), _0x15558d[_0x9b7d('0x4e')](), frames = _0x14b993, _0x4e5fca[_0x9b7d('0x40')] = frames[0x0][_0x9b7d('0x33')], _0x4e5fca[_0x9b7d('0x19')] = frames[0x0]['naturalHeight'];
for (var _0x58bfda = 0x0; _0x58bfda < frames[_0x9b7d('0xe')]; _0x58bfda++) { _0x3dfb9a[_0x9b7d('0x49')](frames[_0x58bfda], 0x0, 0x0), _0x15558d[_0x9b7d('0x6')](_0x3dfb9a); } _0x15558d[_0x9b7d('0x1c')](), document[_0x9b7d('0x4f')](_0x9b7d('0x38'))[_0x9b7d('0x3b')] = _0x9b7d('0x1b') + encode64(_0x15558d[_0x9b7d('0x8')]()['getData']()); const _0x99ff55 = document['getElementById'](_0x9b7d('0x38'))[_0x9b7d('0x3b')][_0x9b7d('0xe')], _0x41b772 = Math[_0x9b7d('0x4a')](_0x99ff55 / 0xf4240 / 1.35); let _0xfdad32 = document['getElementById']('download_gif'); _0xfdad32['style'][_0x9b7d('0x5a')] = _0x9b7d('0x46'), _0xfdad32[_0x9b7d('0x7')] = _0x9b7d('0x5c') + _0x41b772 + 'MB)', document[_0x9b7d('0x4f')]('encoding_gif')[_0x9b7d('0x55')][_0x9b7d('0x5a')] = _0x9b7d('0x2a'), clearInterval(_0x1bdbbf); } }, _0x59b777 * _0x3866e6); if (this['mIsExportFrame'] == 0x1) { let _0x2366e1 = 0x0; const _0x48ff57 = setInterval(function() { var _0x325f21 = document[_0x9b7d('0x4c')]('a'); _0x325f21[_0x9b7d('0x14')] = _0x9b7d('0x4b') + _0x2366e1 + _0x9b7d('0x1d'), _0x325f21[_0x9b7d('0x3f')] = _0x14b993[_0x2366e1]['src'], _0x325f21[_0x9b7d('0xb')](), _0x325f21[_0x9b7d('0xf')](), _0x2366e1++, _0x2366e1 >= _0x6a28aa && clearInterval(_0x48ff57);
}, 0x64);
}
} [_0x9b7d('0x10')]() {
this[_0x9b7d('0x50')][_0x9b7d('0x14')](_0x9b7d('0x54'));
} [_0x9b7d('0x2')]() {
this['mFontSize'] = 0x5;
} ['ChangeFontSize_M']() {
this[_0x9b7d('0x3c')] = 0xa;
} ['ChangeFontSize_L']() {
this[_0x9b7d('0x3c')] = 0xf;
} ['ChangeCanvasSize_S']() {
this[_0x9b7d('0x1e')] = 0x140, this[_0x9b7d('0x20')] = 0xb4;
} [_0x9b7d('0x25')]() {
this[_0x9b7d('0x1e')] = 0x1e0, this[_0x9b7d('0x20')] = 0x10e;
} [_0x9b7d('0x22')]() {
this['mWitdh'] = 0x280, this['mHeight'] = 0x168;
} [_0x9b7d('0x3d')](_0x36bf9d, _0x5e4b5a) {
this['mWitdh'] = _0x36bf9d, this[_0x9b7d('0x20')] = _0x5e4b5a;
} [_0x9b7d('0x2f')]() {
this[_0x9b7d('0x36')] = 0x7d0;
const _0x42817f = this[_0x9b7d('0x36')] / this['mIntervalDraw'];
this[_0x9b7d('0x1a')] = Math[_0x9b7d('0x17')](_0x42817f);
} [_0x9b7d('0x41')]() {
this['mGifTime'] = 0xfa0;
const _0x939fec = this[_0x9b7d('0x36')] / this[_0x9b7d('0x58')];
this[_0x9b7d('0x1a')] = Math[_0x9b7d('0x17')](_0x939fec);
} ['ChangeGifTime_L']() {
this[_0x9b7d('0x36')] = 0x1770;
const _0x1d1805 = this[_0x9b7d('0x36')] / this[_0x9b7d('0x58')];
this['GifNum'] = Math[_0x9b7d('0x17')](_0x1d1805);
} [_0x9b7d('0x3a')]() {
const _0x499797 = this['mGifTime'] / this[_0x9b7d('0x58')];
this['GifNum'] = Math['floor'](_0x499797);
}
}

2. LostMyCodeさんのツール で難読化部分をデコード

+ (クリックで展開)

const _0x2a58 = ['createElement', 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', 'start', 'getElementById', 'mEncoder', 'mCanvas', 'メイリオ', 'mBezelX', 'download.gif', 'style', 'OnloadCyber', 'mTextSpaceY', 'mIntervalDraw', 'mSlider', 'display', 'fillText', 'GIFをダウンロード(', 'mTextSpaceX', 'canvas_gif_temp', 'ChangeFontSize_S', 'image/png', 'mImageArray', 'mType', 'addFrame', 'textContent', 'stream', 'px\x20', 'toDataURL', 'click', 'mFadeSpeed', '#0f0', 'length', 'remove', 'DownloadGIF', 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn', 'getContext', 'min', 'download', 'font', 'abs', 'floor', 'arial', 'height', 'GifNum', 'data:image/gif;base64,', 'finish', '.png', 'mWitdh', 'mIsExportFrame', 'mHeight', '#f00', 'ChangeCanvasSize_L', 'max', 'split', 'ChangeCanvasSize_M', 'mBezelY', 'CreateGif', 'rgba(0,\x200,\x200,\x201)', 'random', 'none', 'mWraparoundProbability', 'mIsRainbowBezel', 'rgba(0,\x200,\x200,\x200.08)', 'mTextBox', 'ChangeGifTime_S', 'encoding_gif', 'mGifFrameSpan', 'fillRect', 'naturalWidth', 'lineWidth', 'mFontStyle', 'mGifTime', 'rgb(0,\x20255,\x200)', 'anime_gif', 'mDrawlooper', 'updateGifInfo', 'src', 'mFontSize', 'ChangeCanvasSize', 'ExecuteCyber', 'href', 'width', 'ChangeGifTime_M', 'mLinewidth', 'fillStyle', 'value', 'strokeStyle', 'block', 'mTextAdjustY', 'mTextAdjustX', 'drawImage', 'ceil', 'frame_'];
(function(_0x2ed04e, _0x2a587b) {
const _0x9b7da7 = function(_0x540d80) {
while (--_0x540d80) {
_0x2ed04e.push(_0x2ed04e.shift());
}
};
_0x9b7da7(++_0x2a587b);
}(_0x2a58, 0x128));
var _0x9b7d = function(_0x2ed04e, _0x2a587b) {
_0x2ed04e = _0x2ed04e - 0x0;
let _0x9b7da7 = _0x2a58[_0x2ed04e];
return _0x9b7da7;
};
class Cyber {
constructor(_0x4c0e2a, _0x54d509, _0x45d90f, _0x56de54, _0x10e014) {
this.mCanvas = document.getElementById(_0x4c0e2a), this.mSlider = document.getElementById(_0x54d509), this.mTextBox = document.getElementById(_0x45d90f), this.mDrawlooper = 0x0, this.mType = _0x10e014, this.mImageArray = [], this.mEncoder, this.mIntervalDraw = 0x23, this.mFontSize = 0xa, this.mFontStyle = 'arial', this.mWitdh = 0x1e0, this.mHeight = 0x10e, this.mLinewidth = 0x0, this.mBezelX = this.mLinewidth + 0x0, this.mBezelY = this.mLinewidth + 0x0, this.mIsRainbowBezel = 0x0, this.mTextAdjustX = 0x2, this.mTextAdjustY = 0x2, this.mTextSpaceX = 0x0, this.mTextSpaceY = 0x0, this.mFadeSpeed = 'rgba(0, 0, 0, 0.08)', this.mWraparoundProbability = 0.975, this.mGifFrameSpan = 0x1, this.mIsExportFrame = 0x0, this.mGifTime = 0x0, this.GifNum = 0x0, this.ChangeGifTime_M(), this.mFontSize = 0x21, this.mFontStyle = 'メイリオ', this.mWitdh = 0x140, this.mHeight = 0x10e, this.mLinewidth = 0x3, this.mBezelX = this.mLinewidth + 0x2, this.mBezelY = this.mLinewidth + 0x2, this.mIsRainbowBezel = 0x0, this.mTextAdjustX = 0xc, this.mTextAdjustY = 0x6, this.mTextSpaceX = 0x4, this.mTextSpaceY = 0x8, this.mFadeSpeed = 'rgba(0,\x200,\x200,\x200.35)', this.mWraparoundProbability = 0.75, this.mGifFrameSpan = 0x1, this.mIsExportFrame = 0x0;
} ['OnloadCyber']() {
const _0x571b29 = this.mCanvas;
let _0x26069c = _0x571b29.getContext('2d');
const _0x1bab39 = _0x571b29.width = this.mWitdh,
_0x1672b8 = _0x571b29.height = this.mHeight,
_0x41ce33 = this.mBezelX,
_0x107c64 = this.mBezelY,
_0x5055dc = this.mIsRainbowBezel,
_0x2c980d = this.mTextAdjustX,
_0x4f6e93 = this.mTextAdjustY,
_0x4cd538 = this.mFontSize,
_0x1ccb88 = this.mFontStyle,
_0x2613d6 = this.mTextSpaceX,
_0x5f58cb = this.mTextSpaceY,
_0x351abb = this.mFadeSpeed,
_0x4e37c4 = this.mWraparoundProbability;
_0x26069c.font = _0x4cd538 + 'px ' + _0x1ccb88, _0x26069c.fillStyle = 'rgba(0, 0, 0, 1)', _0x26069c.fillRect(0x0, 0x0, _0x1bab39, _0x1672b8);
const _0x1801d9 = this.mLinewidth;
_0x1801d9 > 0x1 && (_0x26069c.lineWidth = _0x1801d9, _0x26069c.strokeStyle = 'rgb(0, 255, 0)', _0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x1bab39 - _0x1801d9 * 0x2, _0x1672b8 - _0x1801d9 * 0x2));
const _0x138638 = _0x1bab39 - _0x41ce33 * 0x2,
_0x4506ad = _0x1672b8 - _0x107c64 * 0x2,
_0x4fd3c2 = this.mType;
let _0x491f3f = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn';
const _0x80564e = this.mTextBox.value;
_0x80564e.length >= 0x1 && (_0x491f3f = _0x80564e);
_0x491f3f = _0x491f3f.split('');
let _0x50875 = _0x138638 - _0x2c980d,
_0xbcd391 = _0x4cd538 + _0x2613d6;
_0x4fd3c2 == 0x1 && (_0x50875 = _0x4506ad - _0x4f6e93, _0xbcd391 = _0x4cd538 + _0x5f58cb);
const _0x330f88 = Math.floor(_0x50875 / _0xbcd391);
let _0x14f705 = _0x4506ad - _0x4f6e93,
_0x5afd10 = _0x4cd538 + _0x5f58cb;
_0x4fd3c2 == 0x1 && (_0x14f705 = _0x138638 - _0x2c980d, _0x5afd10 = _0x4cd538 + _0x2613d6);
const _0x3ef56e = Math.floor(_0x14f705 / _0x5afd10);
let _0xf32bb7 = [];
for (let _0x2e9020 = 0x0; _0x2e9020 < _0x330f88; _0x2e9020++) {
_0xf32bb7[_0x2e9020] = 0x0;
}
let _0x612a7b = 0x0;

function _0x1bf3e3() {
_0x26069c.fillStyle = _0x351abb, _0x26069c.fillRect(_0x41ce33, _0x107c64, _0x138638, _0x4506ad);
if (_0x5055dc == 0x1) {
const _0x337a98 = (_0x612a7b + 0x0) * 0.8,
_0x3dacba = Math.min(Math.max(Math.abs((_0x337a98 + 0x5) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff,
_0x4c6d33 = Math.min(Math.max(Math.abs((_0x337a98 + 0x3) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff,
_0x5e21e3 = Math.min(Math.max(Math.abs((_0x337a98 + 0x1) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff;
_0x26069c.strokeStyle = 'rgb(' + _0x3dacba + ',' + _0x4c6d33 + ',' + _0x5e21e3 + ')', _0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x138638 + _0x41ce33 * 0x2 - _0x1801d9 * 0x2, _0x4506ad + _0x41ce33 * 0x2 - _0x1801d9 * 0x2);
}
for (let _0x3d4efb = 0x0; _0x3d4efb < _0x330f88; _0x3d4efb++) { let _0x465cb5 = _0xf32bb7[_0x3d4efb] >= _0x3ef56e;
_0x465cb5 == 0x1 && (Math.random() > _0x4e37c4 && (_0xf32bb7[_0x3d4efb] = 0x0, _0x465cb5 = 0x0));
if (_0x465cb5 == 0x0) {
const [_0x23a6d8, _0x263805] = _0x223f01(_0x330f88, _0x491f3f, _0x3d4efb, _0xf32bb7[_0x3d4efb], _0x612a7b);
_0x26069c.fillStyle = _0x263805, _0x4fd3c2 == 0x1 ? _0x26069c.fillText(_0x23a6d8, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0x3d4efb * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93) : _0x26069c.fillText(_0x23a6d8, _0x3d4efb * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93), _0xf32bb7[_0x3d4efb]++;
}
}
_0x612a7b++;

function _0x223f01(_0x13b090, _0x281d01, _0x47c8a4, _0x47b5c9, _0x1da13c) {
let _0x32d666 = _0x281d01[Math.floor(Math.random() * _0x281d01.length)],
_0x477883 = '#f00';
const _0x7710a1 = Math.floor(_0x13b090 / 0x2);
if (_0x281d01.length == 0x2 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x1], _0x477883 = '#f00') : _0x477883 = '#0f0';
} else {
if (_0x281d01.length == 0x3 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x2], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
} else {
if (_0x281d01.length == 0x4 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x2], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 0x1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x3], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
} else {
if (_0x281d01.length == 0x5 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x2], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 + 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x3], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 0x2 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x4], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
}
} else _0x477883 = '#0f0';
}
}
}
return [_0x32d666, _0x477883];
}
}
this.mIntervalDraw = this.mSlider.max - this.mSlider.value + 0xf, this.mIntervalDraw = 0xc8, this.mDrawlooper = setInterval(_0x1bf3e3, this.mIntervalDraw);
} ['ExecuteCyber']() {
clearInterval(this.mDrawlooper), this.OnloadCyber();
} ['CreateGif']() {
function _0x1dc076(_0x3b34d1, _0x2795b1, _0x1029b1) {
const _0x3bacbb = _0x3b34d1.toDataURL('image/png');
var _0x9ac7c3 = new Image();
_0x9ac7c3.src = _0x3bacbb, _0x2795b1[_0x1029b1] = _0x9ac7c3;
}
this.mImageArray.length = 0x0, document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==', document.getElementById('download_gif')['style']['display'] = 'none', document.getElementById('encoding_gif')['style']['display'] = 'block';
const _0x28f1c7 = this.mCanvas;
let _0x14b993 = this.mImageArray;
this.mEncoder = new GIFEncoder();
let _0x15558d = this.mEncoder,
_0x15ea3f = 0x0;
this.updateGifInfo();
const _0x59b777 = this.mIntervalDraw,
_0x6a28aa = this.GifNum,
_0x3866e6 = this.mGifFrameSpan,
_0x1bdbbf = setInterval(function() {
_0x1dc076(_0x28f1c7, _0x14b993, _0x15ea3f), _0x15ea3f++;
if (_0x15ea3f >= _0x6a28aa) {
var _0x4e5fca = document.getElementById('canvas_gif_temp'),
_0x3dfb9a = _0x4e5fca.getContext('2d');
_0x15558d.setRepeat(0x0), _0x15558d.setDelay(_0x59b777), _0x15558d.start(), frames = _0x14b993, _0x4e5fca.width = frames[0x0]['naturalWidth'], _0x4e5fca.height = frames[0x0]['naturalHeight'];
for (var _0x58bfda = 0x0; _0x58bfda < frames.length; _0x58bfda++) { _0x3dfb9a.drawImage(frames[_0x58bfda], 0x0, 0x0), _0x15558d.addFrame(_0x3dfb9a); } _0x15558d.finish(), document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,' + encode64(_0x15558d.stream()['getData']()); const _0x99ff55 = document.getElementById('anime_gif')['src']['length'], _0x41b772 = Math.ceil(_0x99ff55 / 0xf4240 / 1.35); let _0xfdad32 = document.getElementById('download_gif'); _0xfdad32.style.display = 'block', _0xfdad32.textContent = 'GIFをダウンロード(' + _0x41b772 + 'MB)', document.getElementById('encoding_gif')['style']['display'] = 'none', clearInterval(_0x1bdbbf); } }, _0x59b777 * _0x3866e6); if (this.mIsExportFrame == 0x1) { let _0x2366e1 = 0x0; const _0x48ff57 = setInterval(function() { var _0x325f21 = document.createElement('a'); _0x325f21.download = 'frame_' + _0x2366e1 + '.png', _0x325f21.href = _0x14b993[_0x2366e1]['src'], _0x325f21.click(), _0x325f21.remove(), _0x2366e1++, _0x2366e1 >= _0x6a28aa && clearInterval(_0x48ff57);
}, 0x64);
}
} ['DownloadGIF']() {
this.mEncoder.download('download.gif');
} ['ChangeFontSize_S']() {
this.mFontSize = 0x5;
} ['ChangeFontSize_M']() {
this.mFontSize = 0xa;
} ['ChangeFontSize_L']() {
this.mFontSize = 0xf;
} ['ChangeCanvasSize_S']() {
this.mWitdh = 0x140, this.mHeight = 0xb4;
} ['ChangeCanvasSize_M']() {
this.mWitdh = 0x1e0, this.mHeight = 0x10e;
} ['ChangeCanvasSize_L']() {
this.mWitdh = 0x280, this.mHeight = 0x168;
} ['ChangeCanvasSize'](_0x36bf9d, _0x5e4b5a) {
this.mWitdh = _0x36bf9d, this.mHeight = _0x5e4b5a;
} ['ChangeGifTime_S']() {
this.mGifTime = 0x7d0;
const _0x42817f = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x42817f);
} ['ChangeGifTime_M']() {
this.mGifTime = 0xfa0;
const _0x939fec = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x939fec);
} ['ChangeGifTime_L']() {
this.mGifTime = 0x1770;
const _0x1d1805 = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x1d1805);
} ['updateGifInfo']() {
const _0x499797 = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x499797);
}
}

3. カンマで1行で表示されている部分を、セミコロンと改行で整形

+ (クリックで展開)

const _0x2a58 = ['createElement',
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
'start',
'getElementById',
'mEncoder',
'mCanvas',
'メイリオ',
'mBezelX',
'download.gif',
'style',
'OnloadCyber',
'mTextSpaceY',
'mIntervalDraw',
'mSlider',
'display',
'fillText',
'GIFをダウンロード(',
'mTextSpaceX',
'canvas_gif_temp',
'ChangeFontSize_S',
'image/png',
'mImageArray',
'mType',
'addFrame',
'textContent',
'stream',
'px\x20',
'toDataURL',
'click',
'mFadeSpeed',
'#0f0',
'length',
'remove',
'DownloadGIF',
'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn',
'getContext',
'min',
'download',
'font',
'abs',
'floor',
'arial',
'height',
'GifNum',
'data:image/gif;base64,',
'finish',
'.png',
'mWitdh',
'mIsExportFrame',
'mHeight',
'#f00',
'ChangeCanvasSize_L',
'max',
'split',
'ChangeCanvasSize_M',
'mBezelY',
'CreateGif',
'rgba(0,\x200,\x200,\x201)',
'random',
'none',
'mWraparoundProbability',
'mIsRainbowBezel',
'rgba(0,\x200,\x200,\x200.08)',
'mTextBox',
'ChangeGifTime_S',
'encoding_gif',
'mGifFrameSpan',
'fillRect',
'naturalWidth',
'lineWidth',
'mFontStyle',
'mGifTime',
'rgb(0,\x20255,\x200)',
'anime_gif',
'mDrawlooper',
'updateGifInfo',
'src',
'mFontSize',
'ChangeCanvasSize',
'ExecuteCyber',
'href',
'width',
'ChangeGifTime_M',
'mLinewidth',
'fillStyle',
'value',
'strokeStyle',
'block',
'mTextAdjustY',
'mTextAdjustX',
'drawImage',
'ceil',
'frame_'];

(function(_0x2ed04e, _0x2a587b) {
const _0x9b7da7 = function(_0x540d80) {
while (--_0x540d80) {
_0x2ed04e.push(_0x2ed04e.shift());
}
};
_0x9b7da7(++_0x2a587b);
}(_0x2a58, 0x128));
var _0x9b7d = function(_0x2ed04e, _0x2a587b) {
_0x2ed04e = _0x2ed04e - 0x0;
let _0x9b7da7 = _0x2a58[_0x2ed04e];
return _0x9b7da7;
};
class Cyber {
constructor(_0x4c0e2a, _0x54d509, _0x45d90f, _0x56de54, _0x10e014) {
this.mCanvas = document.getElementById(_0x4c0e2a);
this.mSlider = document.getElementById(_0x54d509);
this.mTextBox = document.getElementById(_0x45d90f);
this.mDrawlooper = 0x0;
this.mType = _0x10e014;
this.mImageArray = [];
this.mEncoder;
this.mIntervalDraw = 0x23;
this.mFontSize = 0xa;
this.mFontStyle = 'arial';
this.mWitdh = 0x1e0;
this.mHeight = 0x10e;
this.mLinewidth = 0x0;
this.mBezelX = this.mLinewidth + 0x0;
this.mBezelY = this.mLinewidth + 0x0;
this.mIsRainbowBezel = 0x0;
this.mTextAdjustX = 0x2;
this.mTextAdjustY = 0x2;
this.mTextSpaceX = 0x0;
this.mTextSpaceY = 0x0;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.08)';
this.mWraparoundProbability = 0.975;
this.mGifFrameSpan = 0x1;
this.mIsExportFrame = 0x0;
this.mGifTime = 0x0;
this.GifNum = 0x0;
this.ChangeGifTime_M();
this.mFontSize = 0x21;
this.mFontStyle = 'メイリオ';
this.mWitdh = 0x140;
this.mHeight = 0x10e;
this.mLinewidth = 0x3;
this.mBezelX = this.mLinewidth + 0x2;
this.mBezelY = this.mLinewidth + 0x2;
this.mIsRainbowBezel = 0x0;
this.mTextAdjustX = 0xc;
this.mTextAdjustY = 0x6;
this.mTextSpaceX = 0x4;
this.mTextSpaceY = 0x8;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.35)';
this.mWraparoundProbability = 0.75;
this.mGifFrameSpan = 0x1;
this.mIsExportFrame = 0x0;

} ['OnloadCyber']() {
const _0x571b29 = this.mCanvas;
let _0x26069c = _0x571b29.getContext('2d');
const _0x1bab39 = _0x571b29.width = this.mWitdh;
const _0x1672b8 = _0x571b29.height = this.mHeight;
const _0x41ce33 = this.mBezelX;
const _0x107c64 = this.mBezelY;
const _0x5055dc = this.mIsRainbowBezel;
const _0x2c980d = this.mTextAdjustX;
const _0x4f6e93 = this.mTextAdjustY;
const _0x4cd538 = this.mFontSize;
const _0x1ccb88 = this.mFontStyle;
const _0x2613d6 = this.mTextSpaceX;
const _0x5f58cb = this.mTextSpaceY;
const _0x351abb = this.mFadeSpeed;
const _0x4e37c4 = this.mWraparoundProbability;
_0x26069c.font = _0x4cd538 + 'px ' + _0x1ccb88;
_0x26069c.fillStyle = 'rgba(0, 0, 0, 1)';
_0x26069c.fillRect(0x0, 0x0, _0x1bab39, _0x1672b8);
const _0x1801d9 = this.mLinewidth;
_0x1801d9 > 0x1 && (_0x26069c.lineWidth = _0x1801d9, _0x26069c.strokeStyle = 'rgb(0, 255, 0)', _0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x1bab39 - _0x1801d9 * 0x2, _0x1672b8 - _0x1801d9 * 0x2));
const _0x138638 = _0x1bab39 - _0x41ce33 * 0x2;
const _0x4506ad = _0x1672b8 - _0x107c64 * 0x2;
const _0x4fd3c2 = this.mType;
let _0x491f3f = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn';
const _0x80564e = this.mTextBox.value;
_0x80564e.length >= 0x1 && (_0x491f3f = _0x80564e);
_0x491f3f = _0x491f3f.split('');
let _0x50875 = _0x138638 - _0x2c980d;
let _0xbcd391 = _0x4cd538 + _0x2613d6;
_0x4fd3c2 == 0x1 && (_0x50875 = _0x4506ad - _0x4f6e93, _0xbcd391 = _0x4cd538 + _0x5f58cb);
const _0x330f88 = Math.floor(_0x50875 / _0xbcd391);
let _0x14f705 = _0x4506ad - _0x4f6e93;
let _0x5afd10 = _0x4cd538 + _0x5f58cb;
_0x4fd3c2 == 0x1 && (_0x14f705 = _0x138638 - _0x2c980d, _0x5afd10 = _0x4cd538 + _0x2613d6);
const _0x3ef56e = Math.floor(_0x14f705 / _0x5afd10);
let _0xf32bb7 = [];
for (let _0x2e9020 = 0x0; _0x2e9020 < _0x330f88; _0x2e9020++) {
_0xf32bb7[_0x2e9020] = 0x0;
}
let _0x612a7b = 0x0;

function _0x1bf3e3() {
_0x26069c.fillStyle = _0x351abb, _0x26069c.fillRect(_0x41ce33, _0x107c64, _0x138638, _0x4506ad);
if (_0x5055dc == 0x1) {
const _0x337a98 = (_0x612a7b + 0x0) * 0.8;
const _0x3dacba = Math.min(Math.max(Math.abs((_0x337a98 + 0x5) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff;
const _0x4c6d33 = Math.min(Math.max(Math.abs((_0x337a98 + 0x3) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff;
const _0x5e21e3 = Math.min(Math.max(Math.abs((_0x337a98 + 0x1) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff;
_0x26069c.strokeStyle = 'rgb(' + _0x3dacba + ',' + _0x4c6d33 + ',' + _0x5e21e3 + ')';
_0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x138638 + _0x41ce33 * 0x2 - _0x1801d9 * 0x2, _0x4506ad + _0x41ce33 * 0x2 - _0x1801d9 * 0x2);
}
for (let _0x3d4efb = 0x0; _0x3d4efb < _0x330f88; _0x3d4efb++) { let _0x465cb5 = _0xf32bb7[_0x3d4efb] >= _0x3ef56e;
_0x465cb5 == 0x1 && (Math.random() > _0x4e37c4 && (_0xf32bb7[_0x3d4efb] = 0x0, _0x465cb5 = 0x0));
if (_0x465cb5 == 0x0) {
const [_0x23a6d8, _0x263805] = _0x223f01(_0x330f88, _0x491f3f, _0x3d4efb, _0xf32bb7[_0x3d4efb], _0x612a7b);
_0x26069c.fillStyle = _0x263805, _0x4fd3c2 == 0x1 ? _0x26069c.fillText(_0x23a6d8, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0x3d4efb * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93) : _0x26069c.fillText(_0x23a6d8, _0x3d4efb * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93), _0xf32bb7[_0x3d4efb]++;
}
}
_0x612a7b++;

function _0x223f01(_0x13b090, _0x281d01, _0x47c8a4, _0x47b5c9, _0x1da13c) {
let _0x32d666 = _0x281d01[Math.floor(Math.random() * _0x281d01.length)],
_0x477883 = '#f00';
const _0x7710a1 = Math.floor(_0x13b090 / 0x2);
if (_0x281d01.length == 0x2 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x1], _0x477883 = '#f00') : _0x477883 = '#0f0';
} else {
if (_0x281d01.length == 0x3 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x2], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
} else {
if (_0x281d01.length == 0x4 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x2], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 0x1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x3], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
} else {
if (_0x281d01.length == 0x5 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x2], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 + 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x3], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 0x2 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x4], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
}
} else _0x477883 = '#0f0';
}
}
}
return [_0x32d666, _0x477883];
}
}
this.mIntervalDraw = this.mSlider.max - this.mSlider.value + 0xf;
this.mIntervalDraw = 0xc8;
this.mDrawlooper = setInterval(_0x1bf3e3, this.mIntervalDraw);

} ['ExecuteCyber']() {
clearInterval(this.mDrawlooper), this.OnloadCyber();
} ['CreateGif']() {
function _0x1dc076(_0x3b34d1, _0x2795b1, _0x1029b1) {
const _0x3bacbb = _0x3b34d1.toDataURL('image/png');
var _0x9ac7c3 = new Image();
_0x9ac7c3.src = _0x3bacbb, _0x2795b1[_0x1029b1] = _0x9ac7c3;
}
this.mImageArray.length = 0x0;
document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
document.getElementById('download_gif')['style']['display'] = 'none';
document.getElementById('encoding_gif')['style']['display'] = 'block';
const _0x28f1c7 = this.mCanvas;
let _0x14b993 = this.mImageArray;
this.mEncoder = new GIFEncoder();
let _0x15558d = this.mEncoder;
let _0x15ea3f = 0x0;
this.updateGifInfo();
const _0x59b777 = this.mIntervalDraw;
const _0x6a28aa = this.GifNum;
const _0x3866e6 = this.mGifFrameSpan;
const _0x1bdbbf = setInterval(function() {
_0x1dc076(_0x28f1c7, _0x14b993, _0x15ea3f), _0x15ea3f++;
if (_0x15ea3f >= _0x6a28aa) {
var _0x4e5fca = document.getElementById('canvas_gif_temp');
var _0x3dfb9a = _0x4e5fca.getContext('2d');
_0x15558d.setRepeat(0x0);
_0x15558d.setDelay(_0x59b777);
_0x15558d.start();
frames = _0x14b993;
_0x4e5fca.width = frames[0x0]['naturalWidth'];
_0x4e5fca.height = frames[0x0]['naturalHeight'];
for (var _0x58bfda = 0x0; _0x58bfda < frames.length; _0x58bfda++) { _0x3dfb9a.drawImage(frames[_0x58bfda], 0x0, 0x0), _0x15558d.addFrame(_0x3dfb9a); } _0x15558d.finish(), document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,' + encode64(_0x15558d.stream()['getData']()); const _0x99ff55 = document.getElementById('anime_gif')['src']['length']; const _0x41b772 = Math.ceil(_0x99ff55 / 0xf4240 / 1.35); let _0xfdad32 = document.getElementById('download_gif'); _0xfdad32.style.display = 'block'; _0xfdad32.textContent = 'GIFをダウンロード(' + _0x41b772 + 'MB)'; document.getElementById('encoding_gif')['style']['display'] = 'none'; clearInterval(_0x1bdbbf); } }, _0x59b777 * _0x3866e6); if (this.mIsExportFrame == 0x1) { let _0x2366e1 = 0x0; const _0x48ff57 = setInterval(function() { var _0x325f21 = document.createElement('a'); _0x325f21.download = 'frame_' + _0x2366e1 + '.png'; _0x325f21.href = _0x14b993[_0x2366e1]['src']; _0x325f21.click(); _0x325f21.remove(); _0x2366e1++, _0x2366e1 >= _0x6a28aa && clearInterval(_0x48ff57);
}, 0x64);
}
} ['DownloadGIF']() {
this.mEncoder.download('download.gif');
} ['ChangeFontSize_S']() {
this.mFontSize = 0x5;
} ['ChangeFontSize_M']() {
this.mFontSize = 0xa;
} ['ChangeFontSize_L']() {
this.mFontSize = 0xf;
} ['ChangeCanvasSize_S']() {
this.mWitdh = 0x140, this.mHeight = 0xb4;
} ['ChangeCanvasSize_M']() {
this.mWitdh = 0x1e0, this.mHeight = 0x10e;
} ['ChangeCanvasSize_L']() {
this.mWitdh = 0x280, this.mHeight = 0x168;
} ['ChangeCanvasSize'](_0x36bf9d, _0x5e4b5a) {
this.mWitdh = _0x36bf9d, this.mHeight = _0x5e4b5a;
} ['ChangeGifTime_S']() {
this.mGifTime = 0x7d0;
const _0x42817f = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x42817f);
} ['ChangeGifTime_M']() {
this.mGifTime = 0xfa0;
const _0x939fec = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x939fec);
} ['ChangeGifTime_L']() {
this.mGifTime = 0x1770;
const _0x1d1805 = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x1d1805);
} ['updateGifInfo']() {
const _0x499797 = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x499797);
}
}

4. 関数が ['OnloadCyber']() のようになっているので関数化

+ (クリックで展開)

const _0x2a58 = ['createElement',
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
'start',
'getElementById',
'mEncoder',
'mCanvas',
'メイリオ',
'mBezelX',
'download.gif',
'style',
'OnloadCyber',
'mTextSpaceY',
'mIntervalDraw',
'mSlider',
'display',
'fillText',
'GIFをダウンロード(',
'mTextSpaceX',
'canvas_gif_temp',
'ChangeFontSize_S',
'image/png',
'mImageArray',
'mType',
'addFrame',
'textContent',
'stream',
'px\x20',
'toDataURL',
'click',
'mFadeSpeed',
'#0f0',
'length',
'remove',
'DownloadGIF',
'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn',
'getContext',
'min',
'download',
'font',
'abs',
'floor',
'arial',
'height',
'GifNum',
'data:image/gif;base64,',
'finish',
'.png',
'mWitdh',
'mIsExportFrame',
'mHeight',
'#f00',
'ChangeCanvasSize_L',
'max',
'split',
'ChangeCanvasSize_M',
'mBezelY',
'CreateGif',
'rgba(0,\x200,\x200,\x201)',
'random',
'none',
'mWraparoundProbability',
'mIsRainbowBezel',
'rgba(0,\x200,\x200,\x200.08)',
'mTextBox',
'ChangeGifTime_S',
'encoding_gif',
'mGifFrameSpan',
'fillRect',
'naturalWidth',
'lineWidth',
'mFontStyle',
'mGifTime',
'rgb(0,\x20255,\x200)',
'anime_gif',
'mDrawlooper',
'updateGifInfo',
'src',
'mFontSize',
'ChangeCanvasSize',
'ExecuteCyber',
'href',
'width',
'ChangeGifTime_M',
'mLinewidth',
'fillStyle',
'value',
'strokeStyle',
'block',
'mTextAdjustY',
'mTextAdjustX',
'drawImage',
'ceil',
'frame_'];

(function(_0x2ed04e, _0x2a587b) {
const _0x9b7da7 = function(_0x540d80) {
while (--_0x540d80) {
_0x2ed04e.push(_0x2ed04e.shift());
}
};
_0x9b7da7(++_0x2a587b);
}(_0x2a58, 0x128));
var _0x9b7d = function(_0x2ed04e, _0x2a587b) {
_0x2ed04e = _0x2ed04e - 0x0;
let _0x9b7da7 = _0x2a58[_0x2ed04e];
return _0x9b7da7;
};
class Cyber {
constructor(_0x4c0e2a, _0x54d509, _0x45d90f, _0x56de54, _0x10e014) {
this.mCanvas = document.getElementById(_0x4c0e2a);
this.mSlider = document.getElementById(_0x54d509);
this.mTextBox = document.getElementById(_0x45d90f);
this.mDrawlooper = 0x0;
this.mType = _0x10e014;
this.mImageArray = [];
this.mEncoder;
this.mIntervalDraw = 0x23;
this.mFontSize = 0xa;
this.mFontStyle = 'arial';
this.mWitdh = 0x1e0;
this.mHeight = 0x10e;
this.mLinewidth = 0x0;
this.mBezelX = this.mLinewidth + 0x0;
this.mBezelY = this.mLinewidth + 0x0;
this.mIsRainbowBezel = 0x0;
this.mTextAdjustX = 0x2;
this.mTextAdjustY = 0x2;
this.mTextSpaceX = 0x0;
this.mTextSpaceY = 0x0;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.08)';
this.mWraparoundProbability = 0.975;
this.mGifFrameSpan = 0x1;
this.mIsExportFrame = 0x0;
this.mGifTime = 0x0;
this.GifNum = 0x0;
this.ChangeGifTime_M();
this.mFontSize = 0x21;
this.mFontStyle = 'メイリオ';
this.mWitdh = 0x140;
this.mHeight = 0x10e;
this.mLinewidth = 0x3;
this.mBezelX = this.mLinewidth + 0x2;
this.mBezelY = this.mLinewidth + 0x2;
this.mIsRainbowBezel = 0x0;
this.mTextAdjustX = 0xc;
this.mTextAdjustY = 0x6;
this.mTextSpaceX = 0x4;
this.mTextSpaceY = 0x8;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.35)';
this.mWraparoundProbability = 0.75;
this.mGifFrameSpan = 0x1;
this.mIsExportFrame = 0x0;
}

OnloadCyber()
{
const _0x571b29 = this.mCanvas;
let _0x26069c = _0x571b29.getContext('2d');
const _0x1bab39 = _0x571b29.width = this.mWitdh;
const _0x1672b8 = _0x571b29.height = this.mHeight;
const _0x41ce33 = this.mBezelX;
const _0x107c64 = this.mBezelY;
const _0x5055dc = this.mIsRainbowBezel;
const _0x2c980d = this.mTextAdjustX;
const _0x4f6e93 = this.mTextAdjustY;
const _0x4cd538 = this.mFontSize;
const _0x1ccb88 = this.mFontStyle;
const _0x2613d6 = this.mTextSpaceX;
const _0x5f58cb = this.mTextSpaceY;
const _0x351abb = this.mFadeSpeed;
const _0x4e37c4 = this.mWraparoundProbability;
_0x26069c.font = _0x4cd538 + 'px ' + _0x1ccb88;
_0x26069c.fillStyle = 'rgba(0, 0, 0, 1)';
_0x26069c.fillRect(0x0, 0x0, _0x1bab39, _0x1672b8);
const _0x1801d9 = this.mLinewidth;
_0x1801d9 > 0x1 && (_0x26069c.lineWidth = _0x1801d9, _0x26069c.strokeStyle = 'rgb(0, 255, 0)', _0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x1bab39 - _0x1801d9 * 0x2, _0x1672b8 - _0x1801d9 * 0x2));
const _0x138638 = _0x1bab39 - _0x41ce33 * 0x2;
const _0x4506ad = _0x1672b8 - _0x107c64 * 0x2;
const _0x4fd3c2 = this.mType;
let _0x491f3f = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn';
const _0x80564e = this.mTextBox.value;
_0x80564e.length >= 0x1 && (_0x491f3f = _0x80564e);
_0x491f3f = _0x491f3f.split('');
let _0x50875 = _0x138638 - _0x2c980d;
let _0xbcd391 = _0x4cd538 + _0x2613d6;
_0x4fd3c2 == 0x1 && (_0x50875 = _0x4506ad - _0x4f6e93, _0xbcd391 = _0x4cd538 + _0x5f58cb);
const _0x330f88 = Math.floor(_0x50875 / _0xbcd391);
let _0x14f705 = _0x4506ad - _0x4f6e93;
let _0x5afd10 = _0x4cd538 + _0x5f58cb;
_0x4fd3c2 == 0x1 && (_0x14f705 = _0x138638 - _0x2c980d, _0x5afd10 = _0x4cd538 + _0x2613d6);
const _0x3ef56e = Math.floor(_0x14f705 / _0x5afd10);
let _0xf32bb7 = [];
for (let _0x2e9020 = 0x0; _0x2e9020 < _0x330f88; _0x2e9020++) {
_0xf32bb7[_0x2e9020] = 0x0;
}
let _0x612a7b = 0x0;

function _0x1bf3e3()
{
_0x26069c.fillStyle = _0x351abb, _0x26069c.fillRect(_0x41ce33, _0x107c64, _0x138638, _0x4506ad);
if (_0x5055dc == 0x1) {
const _0x337a98 = (_0x612a7b + 0x0) * 0.8;
const _0x3dacba = Math.min(Math.max(Math.abs((_0x337a98 + 0x5) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff;
const _0x4c6d33 = Math.min(Math.max(Math.abs((_0x337a98 + 0x3) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff;
const _0x5e21e3 = Math.min(Math.max(Math.abs((_0x337a98 + 0x1) % 0x6 - 0x3) - 0x1, 0x0), 0x1) * 0xff;
_0x26069c.strokeStyle = 'rgb(' + _0x3dacba + ',' + _0x4c6d33 + ',' + _0x5e21e3 + ')';
_0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x138638 + _0x41ce33 * 0x2 - _0x1801d9 * 0x2, _0x4506ad + _0x41ce33 * 0x2 - _0x1801d9 * 0x2);
}
for (let _0x3d4efb = 0x0; _0x3d4efb < _0x330f88; _0x3d4efb++) { let _0x465cb5 = _0xf32bb7[_0x3d4efb] >= _0x3ef56e;
_0x465cb5 == 0x1 && (Math.random() > _0x4e37c4 && (_0xf32bb7[_0x3d4efb] = 0x0, _0x465cb5 = 0x0));
if (_0x465cb5 == 0x0) {
const [_0x23a6d8, _0x263805] = _0x223f01(_0x330f88, _0x491f3f, _0x3d4efb, _0xf32bb7[_0x3d4efb], _0x612a7b);
_0x26069c.fillStyle = _0x263805, _0x4fd3c2 == 0x1 ? _0x26069c.fillText(_0x23a6d8, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0x3d4efb * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93) : _0x26069c.fillText(_0x23a6d8, _0x3d4efb * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93), _0xf32bb7[_0x3d4efb]++;
}
}
_0x612a7b++;
}

function _0x223f01(_0x13b090, _0x281d01, _0x47c8a4, _0x47b5c9, _0x1da13c)
{
let _0x32d666 = _0x281d01[Math.floor(Math.random() * _0x281d01.length)],
_0x477883 = '#f00';
const _0x7710a1 = Math.floor(_0x13b090 / 0x2);
if (_0x281d01.length == 0x2 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x1], _0x477883 = '#f00') : _0x477883 = '#0f0';
} else {
if (_0x281d01.length == 0x3 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x2], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
} else {
if (_0x281d01.length == 0x4 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x2], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 0x1 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x3], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
} else {
if (_0x281d01.length == 0x5 && _0x1da13c == 0x0) {
if (_0x47c8a4 == _0x7710a1 - 0x2 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x2], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 + 0x1 && _0x47b5c9 == 0x0) _0x32d666 = _0x281d01[0x3], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 0x2 && _0x47b5c9 == 0x0 ? (_0x32d666 = _0x281d01[0x4], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
}
} else _0x477883 = '#0f0';
}
}
}
return [_0x32d666, _0x477883];
}

this.mIntervalDraw = this.mSlider.max - this.mSlider.value + 0xf;
this.mIntervalDraw = 0xc8;
this.mDrawlooper = setInterval(_0x1bf3e3, this.mIntervalDraw);

}

ExecuteCyber()
{
clearInterval(this.mDrawlooper), this.OnloadCyber();
}

CreateGif()
{
function _0x1dc076(_0x3b34d1, _0x2795b1, _0x1029b1) {
const _0x3bacbb = _0x3b34d1.toDataURL('image/png');
var _0x9ac7c3 = new Image();
_0x9ac7c3.src = _0x3bacbb, _0x2795b1[_0x1029b1] = _0x9ac7c3;
}
this.mImageArray.length = 0x0;
document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
document.getElementById('download_gif')['style']['display'] = 'none';
document.getElementById('encoding_gif')['style']['display'] = 'block';
const _0x28f1c7 = this.mCanvas;
let _0x14b993 = this.mImageArray;
this.mEncoder = new GIFEncoder();
let _0x15558d = this.mEncoder;
let _0x15ea3f = 0x0;
this.updateGifInfo();
const _0x59b777 = this.mIntervalDraw;
const _0x6a28aa = this.GifNum;
const _0x3866e6 = this.mGifFrameSpan;
const _0x1bdbbf = setInterval(function() {
_0x1dc076(_0x28f1c7, _0x14b993, _0x15ea3f), _0x15ea3f++;
if (_0x15ea3f >= _0x6a28aa) {
var _0x4e5fca = document.getElementById('canvas_gif_temp');
var _0x3dfb9a = _0x4e5fca.getContext('2d');
_0x15558d.setRepeat(0x0);
_0x15558d.setDelay(_0x59b777);
_0x15558d.start();
frames = _0x14b993;
_0x4e5fca.width = frames[0x0]['naturalWidth'];
_0x4e5fca.height = frames[0x0]['naturalHeight'];
for (var _0x58bfda = 0x0; _0x58bfda < frames.length; _0x58bfda++) { _0x3dfb9a.drawImage(frames[_0x58bfda], 0x0, 0x0), _0x15558d.addFrame(_0x3dfb9a); } _0x15558d.finish(), document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,' + encode64(_0x15558d.stream()['getData']()); const _0x99ff55 = document.getElementById('anime_gif')['src']['length']; const _0x41b772 = Math.ceil(_0x99ff55 / 0xf4240 / 1.35); let _0xfdad32 = document.getElementById('download_gif'); _0xfdad32.style.display = 'block'; _0xfdad32.textContent = 'GIFをダウンロード(' + _0x41b772 + 'MB)'; document.getElementById('encoding_gif')['style']['display'] = 'none'; clearInterval(_0x1bdbbf); } }, _0x59b777 * _0x3866e6); if (this.mIsExportFrame == 0x1) { let _0x2366e1 = 0x0; const _0x48ff57 = setInterval(function() { var _0x325f21 = document.createElement('a'); _0x325f21.download = 'frame_' + _0x2366e1 + '.png'; _0x325f21.href = _0x14b993[_0x2366e1]['src']; _0x325f21.click(); _0x325f21.remove(); _0x2366e1++, _0x2366e1 >= _0x6a28aa && clearInterval(_0x48ff57);
}, 0x64);
}
}

DownloadGIF()
{
this.mEncoder.download('download.gif');
}

ChangeFontSize_S()
{
this.mFontSize = 0x5;
}

ChangeFontSize_M()
{
this.mFontSize = 0xa;
}

ChangeFontSize_L()
{
this.mFontSize = 0xf;
}

ChangeCanvasSize_S()
{
this.mWitdh = 0x140;
this.mHeight = 0xb4;
}

ChangeCanvasSize_M()
{
this.mWitdh = 0x1e0;
this.mHeight = 0x10e;
}

ChangeCanvasSize_L()
{
this.mWitdh = 0x280;
this.mHeight = 0x168;
}

ChangeCanvasSize(_0x36bf9d, _0x5e4b5a)
{
this.mWitdh = _0x36bf9d;
this.mHeight = _0x5e4b5a;
}

ChangeGifTime_S()
{
this.mGifTime = 0x7d0;
const _0x42817f = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x42817f);
}

ChangeGifTime_M()
{
this.mGifTime = 0xfa0;
const _0x939fec = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x939fec);
}

ChangeGifTime_L()
{
this.mGifTime = 0x1770;
const _0x1d1805 = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x1d1805);
}

updateGifInfo()
{
const _0x499797 = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(_0x499797);
}

}

5. 数値が16進数表記(0x~)になっているので10進数に変換

+ (クリックで展開)

const _0x2a58 = ['createElement',
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
'start',
'getElementById',
'mEncoder',
'mCanvas',
'メイリオ',
'mBezelX',
'download.gif',
'style',
'OnloadCyber',
'mTextSpaceY',
'mIntervalDraw',
'mSlider',
'display',
'fillText',
'GIFをダウンロード(',
'mTextSpaceX',
'canvas_gif_temp',
'ChangeFontSize_S',
'image/png',
'mImageArray',
'mType',
'addFrame',
'textContent',
'stream',
'px\x20',
'toDataURL',
'click',
'mFadeSpeed',
'#0f0',
'length',
'remove',
'DownloadGIF',
'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn',
'getContext',
'min',
'download',
'font',
'abs',
'floor',
'arial',
'height',
'GifNum',
'data:image/gif;base64,',
'finish',
'.png',
'mWitdh',
'mIsExportFrame',
'mHeight',
'#f00',
'ChangeCanvasSize_L',
'max',
'split',
'ChangeCanvasSize_M',
'mBezelY',
'CreateGif',
'rgba(0,\x200,\x200,\x201)',
'random',
'none',
'mWraparoundProbability',
'mIsRainbowBezel',
'rgba(0,\x200,\x200,\x200.08)',
'mTextBox',
'ChangeGifTime_S',
'encoding_gif',
'mGifFrameSpan',
'fillRect',
'naturalWidth',
'lineWidth',
'mFontStyle',
'mGifTime',
'rgb(0,\x20255,\x200)',
'anime_gif',
'mDrawlooper',
'updateGifInfo',
'src',
'mFontSize',
'ChangeCanvasSize',
'ExecuteCyber',
'href',
'width',
'ChangeGifTime_M',
'mLinewidth',
'fillStyle',
'value',
'strokeStyle',
'block',
'mTextAdjustY',
'mTextAdjustX',
'drawImage',
'ceil',
'frame_'];

(function(_0x2ed04e, _0x2a587b) {
const _0x9b7da7 = function(_0x540d80) {
while (--_0x540d80) {
_0x2ed04e.push(_0x2ed04e.shift());
}
};
_0x9b7da7(++_0x2a587b);
}(_0x2a58, 0x128));
var _0x9b7d = function(_0x2ed04e, _0x2a587b) {
_0x2ed04e = _0x2ed04e - 0x0;
let _0x9b7da7 = _0x2a58[_0x2ed04e];
return _0x9b7da7;
};
class Cyber {
constructor(id_canvas, id_slider, id_text, _0x56de54, type) {
this.mCanvas = document.getElementById(id_canvas);
this.mSlider = document.getElementById(id_slider);
this.mTextBox = document.getElementById(id_text);
this.mDrawlooper = 0;
this.mType = type;
this.mImageArray = [];
this.mEncoder;
this.mIntervalDraw = 35;
this.mFontSize = 10;
this.mFontStyle = 'arial';
this.mWitdh = 480;
this.mHeight = 270;
this.mLinewidth = 0;
this.mBezelX = this.mLinewidth + 0;
this.mBezelY = this.mLinewidth + 0;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 2;
this.mTextAdjustY = 2;
this.mTextSpaceX = 0;
this.mTextSpaceY = 0;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.08)';
this.mWraparoundProbability = 0.975;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
this.mGifTime = 0;
this.GifNum = 0;
this.ChangeGifTime_M();

this.mFontSize = 33;
this.mFontStyle = 'メイリオ';
this.mWitdh = 320;
this.mHeight = 270;
this.mLinewidth = 3;
this.mBezelX = this.mLinewidth + 2;
this.mBezelY = this.mLinewidth + 2;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 12;
this.mTextAdjustY = 6;
this.mTextSpaceX = 4;
this.mTextSpaceY = 8;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.35)';
this.mWraparoundProbability = 0.75;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
}

OnloadCyber()
{
const _0x571b29 = this.mCanvas;
let _0x26069c = _0x571b29.getContext('2d');
const _0x1bab39 = _0x571b29.width = this.mWitdh;
const _0x1672b8 = _0x571b29.height = this.mHeight;
const _0x41ce33 = this.mBezelX;
const _0x107c64 = this.mBezelY;
const _0x5055dc = this.mIsRainbowBezel;
const _0x2c980d = this.mTextAdjustX;
const _0x4f6e93 = this.mTextAdjustY;
const _0x4cd538 = this.mFontSize;
const _0x1ccb88 = this.mFontStyle;
const _0x2613d6 = this.mTextSpaceX;
const _0x5f58cb = this.mTextSpaceY;
const _0x351abb = this.mFadeSpeed;
const _0x4e37c4 = this.mWraparoundProbability;
_0x26069c.font = _0x4cd538 + 'px ' + _0x1ccb88;
_0x26069c.fillStyle = 'rgba(0, 0, 0, 1)';
_0x26069c.fillRect(0, 0, _0x1bab39, _0x1672b8);
const _0x1801d9 = this.mLinewidth;
_0x1801d9 > 1 && (_0x26069c.lineWidth = _0x1801d9, _0x26069c.strokeStyle = 'rgb(0, 255, 0)', _0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x1bab39 - _0x1801d9 * 2, _0x1672b8 - _0x1801d9 * 2));
const _0x138638 = _0x1bab39 - _0x41ce33 * 2;
const _0x4506ad = _0x1672b8 - _0x107c64 * 2;
const _0x4fd3c2 = this.mType;
let _0x491f3f = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn';
const _0x80564e = this.mTextBox.value;
_0x80564e.length >= 0x1 && (_0x491f3f = _0x80564e);
_0x491f3f = _0x491f3f.split('');
let _0x50875 = _0x138638 - _0x2c980d;
let _0xbcd391 = _0x4cd538 + _0x2613d6;
_0x4fd3c2 == 1 && (_0x50875 = _0x4506ad - _0x4f6e93, _0xbcd391 = _0x4cd538 + _0x5f58cb);
const _0x330f88 = Math.floor(_0x50875 / _0xbcd391);
let _0x14f705 = _0x4506ad - _0x4f6e93;
let _0x5afd10 = _0x4cd538 + _0x5f58cb;
_0x4fd3c2 == 1 && (_0x14f705 = _0x138638 - _0x2c980d, _0x5afd10 = _0x4cd538 + _0x2613d6);
const _0x3ef56e = Math.floor(_0x14f705 / _0x5afd10);
let _0xf32bb7 = [];
for (let _0x2e9020 = 0; _0x2e9020 < _0x330f88; _0x2e9020++) {
_0xf32bb7[_0x2e9020] = 0;
}
let _0x612a7b = 0;

function _0x1bf3e3()
{
_0x26069c.fillStyle = _0x351abb, _0x26069c.fillRect(_0x41ce33, _0x107c64, _0x138638, _0x4506ad);
if (_0x5055dc == 1) {
const _0x337a98 = (_0x612a7b + 0) * 0.8;
const _0x3dacba = Math.min(Math.max(Math.abs((_0x337a98 + 5) % 6 - 3) - 1, 0), 1) * 255;
const _0x4c6d33 = Math.min(Math.max(Math.abs((_0x337a98 + 3) % 6 - 3) - 1, 0), 1) * 255;
const _0x5e21e3 = Math.min(Math.max(Math.abs((_0x337a98 + 1) % 6 - 3) - 1, 0), 1) * 255;
_0x26069c.strokeStyle = 'rgb(' + _0x3dacba + ',' + _0x4c6d33 + ',' + _0x5e21e3 + ')';
_0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x138638 + _0x41ce33 * 2 - _0x1801d9 * 2, _0x4506ad + _0x41ce33 * 2 - _0x1801d9 * 2);
}
for (let _0x3d4efb = 0x0; _0x3d4efb < _0x330f88; _0x3d4efb++) { let _0x465cb5 = _0xf32bb7[_0x3d4efb] >= _0x3ef56e;
_0x465cb5 == 1 && (Math.random() > _0x4e37c4 && (_0xf32bb7[_0x3d4efb] = 0, _0x465cb5 = 0));
if (_0x465cb5 == 0) {
const [_0x23a6d8, _0x263805] = _0x223f01(_0x330f88, _0x491f3f, _0x3d4efb, _0xf32bb7[_0x3d4efb], _0x612a7b);
_0x26069c.fillStyle = _0x263805, _0x4fd3c2 == 1 ? _0x26069c.fillText(_0x23a6d8, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0x3d4efb * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93) : _0x26069c.fillText(_0x23a6d8, _0x3d4efb * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93), _0xf32bb7[_0x3d4efb]++;
}
}
_0x612a7b++;
}

function _0x223f01(_0x13b090, _0x281d01, _0x47c8a4, _0x47b5c9, _0x1da13c)
{
let _0x32d666 = _0x281d01[Math.floor(Math.random() * _0x281d01.length)],
_0x477883 = '#f00';
const _0x7710a1 = Math.floor(_0x13b090 / 2);
if (_0x281d01.length == 2 && _0x1da13c == 0) {
if (_0x47c8a4 == _0x7710a1 - 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0 ? (_0x32d666 = _0x281d01[0x1], _0x477883 = '#f00') : _0x477883 = '#0f0';
} else {
if (_0x281d01.length == 3 && _0x1da13c == 0) {
if (_0x47c8a4 == _0x7710a1 - 2 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[1], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0 ? (_0x32d666 = _0x281d01[2], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
} else {
if (_0x281d01.length == 4 && _0x1da13c == 0) {
if (_0x47c8a4 == _0x7710a1 - 2 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[2], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 1 && _0x47b5c9 == 0 ? (_0x32d666 = _0x281d01[3], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
} else {
if (_0x281d01.length == 5 && _0x1da13c == 0) {
if (_0x47c8a4 == _0x7710a1 - 2 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[2], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 + 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[3], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 2 && _0x47b5c9 == 0 ? (_0x32d666 = _0x281d01[4], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
}
} else _0x477883 = '#0f0';
}
}
}
return [_0x32d666, _0x477883];
}

this.mIntervalDraw = this.mSlider.max - this.mSlider.value + 15;
this.mIntervalDraw = 200;
this.mDrawlooper = setInterval(_0x1bf3e3, this.mIntervalDraw);

}

ExecuteCyber()
{
clearInterval(this.mDrawlooper), this.OnloadCyber();
}

CreateGif()
{
function _0x1dc076(_0x3b34d1, _0x2795b1, _0x1029b1) {
const _0x3bacbb = _0x3b34d1.toDataURL('image/png');
var _0x9ac7c3 = new Image();
_0x9ac7c3.src = _0x3bacbb, _0x2795b1[_0x1029b1] = _0x9ac7c3;
}
this.mImageArray.length = 0;
document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
document.getElementById('download_gif')['style']['display'] = 'none';
document.getElementById('encoding_gif')['style']['display'] = 'block';
const _0x28f1c7 = this.mCanvas;
let _0x14b993 = this.mImageArray;
this.mEncoder = new GIFEncoder();
let _0x15558d = this.mEncoder;
let _0x15ea3f = 0;
this.updateGifInfo();
const _0x59b777 = this.mIntervalDraw;
const _0x6a28aa = this.GifNum;
const _0x3866e6 = this.mGifFrameSpan;
const _0x1bdbbf = setInterval(function() {
_0x1dc076(_0x28f1c7, _0x14b993, _0x15ea3f), _0x15ea3f++;
if (_0x15ea3f >= _0x6a28aa) {
var _0x4e5fca = document.getElementById('canvas_gif_temp');
var _0x3dfb9a = _0x4e5fca.getContext('2d');
_0x15558d.setRepeat(0);
_0x15558d.setDelay(_0x59b777);
_0x15558d.start();
frames = _0x14b993;
_0x4e5fca.width = frames[0]['naturalWidth'];
_0x4e5fca.height = frames[0]['naturalHeight'];
for (var _0x58bfda = 0; _0x58bfda < frames.length; _0x58bfda++) { _0x3dfb9a.drawImage(frames[_0x58bfda], 0, 0), _0x15558d.addFrame(_0x3dfb9a); } _0x15558d.finish(), document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,' + encode64(_0x15558d.stream()['getData']()); const _0x99ff55 = document.getElementById('anime_gif')['src']['length']; const _0x41b772 = Math.ceil(_0x99ff55 / 1000000 / 1.35); let _0xfdad32 = document.getElementById('download_gif'); _0xfdad32.style.display = 'block'; _0xfdad32.textContent = 'GIFをダウンロード(' + _0x41b772 + 'MB)'; document.getElementById('encoding_gif')['style']['display'] = 'none'; clearInterval(_0x1bdbbf); } }, _0x59b777 * _0x3866e6); if (this.mIsExportFrame == 1) { let _0x2366e1 = 0; const _0x48ff57 = setInterval(function() { var _0x325f21 = document.createElement('a'); _0x325f21.download = 'frame_' + _0x2366e1 + '.png'; _0x325f21.href = _0x14b993[_0x2366e1]['src']; _0x325f21.click(); _0x325f21.remove(); _0x2366e1++, _0x2366e1 >= _0x6a28aa && clearInterval(_0x48ff57);
}, 100);
}
}

DownloadGIF()
{
this.mEncoder.download('download.gif');
}

ChangeFontSize_S()
{
this.mFontSize = 5;
}

ChangeFontSize_M()
{
this.mFontSize = 10;
}

ChangeFontSize_L()
{
this.mFontSize = 15;
}

ChangeCanvasSize_S()
{
this.mWitdh = 320;
this.mHeight = 180;
}

ChangeCanvasSize_M()
{
this.mWitdh = 480;
this.mHeight = 270;
}

ChangeCanvasSize_L()
{
this.mWitdh = 640;
this.mHeight = 360;
}

ChangeCanvasSize(width, height)
{
this.mWitdh = width;
this.mHeight = height;
}

ChangeGifTime_S()
{
this.mGifTime = 2000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_M()
{
this.mGifTime = 4000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_L()
{
this.mGifTime = 6000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

updateGifInfo()
{
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

}

6. ローカル変数は _0xabc のようになっているので、わかりやすい名前に置換

+ (クリックで展開)

const _0x2a58 = ['createElement',
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
'start',
'getElementById',
'mEncoder',
'mCanvas',
'メイリオ',
'mBezelX',
'download.gif',
'style',
'OnloadCyber',
'mTextSpaceY',
'mIntervalDraw',
'mSlider',
'display',
'fillText',
'GIFをダウンロード(',
'mTextSpaceX',
'canvas_gif_temp',
'ChangeFontSize_S',
'image/png',
'mImageArray',
'mType',
'addFrame',
'textContent',
'stream',
'px\x20',
'toDataURL',
'click',
'mFadeSpeed',
'#0f0',
'length',
'remove',
'DownloadGIF',
'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn',
'getContext',
'min',
'download',
'font',
'abs',
'floor',
'arial',
'height',
'GifNum',
'data:image/gif;base64,',
'finish',
'.png',
'mWitdh',
'mIsExportFrame',
'mHeight',
'#f00',
'ChangeCanvasSize_L',
'max',
'split',
'ChangeCanvasSize_M',
'mBezelY',
'CreateGif',
'rgba(0,\x200,\x200,\x201)',
'random',
'none',
'mWraparoundProbability',
'mIsRainbowBezel',
'rgba(0,\x200,\x200,\x200.08)',
'mTextBox',
'ChangeGifTime_S',
'encoding_gif',
'mGifFrameSpan',
'fillRect',
'naturalWidth',
'lineWidth',
'mFontStyle',
'mGifTime',
'rgb(0,\x20255,\x200)',
'anime_gif',
'mDrawlooper',
'updateGifInfo',
'src',
'mFontSize',
'ChangeCanvasSize',
'ExecuteCyber',
'href',
'width',
'ChangeGifTime_M',
'mLinewidth',
'fillStyle',
'value',
'strokeStyle',
'block',
'mTextAdjustY',
'mTextAdjustX',
'drawImage',
'ceil',
'frame_'];

(function(_0x2ed04e, _0x2a587b) {
const _0x9b7da7 = function(_0x540d80) {
while (--_0x540d80) {
_0x2ed04e.push(_0x2ed04e.shift());
}
};
_0x9b7da7(++_0x2a587b);
}(_0x2a58, 0x128));
var _0x9b7d = function(_0x2ed04e, _0x2a587b) {
_0x2ed04e = _0x2ed04e - 0x0;
let _0x9b7da7 = _0x2a58[_0x2ed04e];
return _0x9b7da7;
};
class Cyber {
constructor(id_canvas, id_slider, id_text, _0x56de54, type) {
this.mCanvas = document.getElementById(id_canvas);
this.mSlider = document.getElementById(id_slider);
this.mTextBox = document.getElementById(id_text);
this.mDrawlooper = 0;
this.mType = type;
this.mImageArray = [];
this.mEncoder;
this.mIntervalDraw = 35;
this.mFontSize = 10;
this.mFontStyle = 'arial';
this.mWitdh = 480;
this.mHeight = 270;
this.mLinewidth = 0;
this.mBezelX = this.mLinewidth + 0;
this.mBezelY = this.mLinewidth + 0;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 2;
this.mTextAdjustY = 2;
this.mTextSpaceX = 0;
this.mTextSpaceY = 0;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.08)';
this.mWraparoundProbability = 0.975;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
this.mGifTime = 0;
this.GifNum = 0;
this.ChangeGifTime_M();

this.mFontSize = 33;
this.mFontStyle = 'メイリオ';
this.mWitdh = 320;
this.mHeight = 270;
this.mLinewidth = 3;
this.mBezelX = this.mLinewidth + 2;
this.mBezelY = this.mLinewidth + 2;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 12;
this.mTextAdjustY = 6;
this.mTextSpaceX = 4;
this.mTextSpaceY = 8;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.35)';
this.mWraparoundProbability = 0.75;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
}

OnloadCyber()
{
const canvas = this.mCanvas;
let _0x26069c = canvas.getContext('2d');
const _0x1bab39 = canvas.width = this.mWitdh;
const _0x1672b8 = canvas.height = this.mHeight;
const _0x41ce33 = this.mBezelX;
const _0x107c64 = this.mBezelY;
const _0x5055dc = this.mIsRainbowBezel;
const _0x2c980d = this.mTextAdjustX;
const _0x4f6e93 = this.mTextAdjustY;
const _0x4cd538 = this.mFontSize;
const _0x1ccb88 = this.mFontStyle;
const _0x2613d6 = this.mTextSpaceX;
const _0x5f58cb = this.mTextSpaceY;
const _0x351abb = this.mFadeSpeed;
const _0x4e37c4 = this.mWraparoundProbability;
_0x26069c.font = _0x4cd538 + 'px ' + _0x1ccb88;
_0x26069c.fillStyle = 'rgba(0, 0, 0, 1)';
_0x26069c.fillRect(0, 0, _0x1bab39, _0x1672b8);
const _0x1801d9 = this.mLinewidth;
_0x1801d9 > 1 && (_0x26069c.lineWidth = _0x1801d9, _0x26069c.strokeStyle = 'rgb(0, 255, 0)', _0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x1bab39 - _0x1801d9 * 2, _0x1672b8 - _0x1801d9 * 2));
const _0x138638 = _0x1bab39 - _0x41ce33 * 2;
const _0x4506ad = _0x1672b8 - _0x107c64 * 2;
const _0x4fd3c2 = this.mType;
let _0x491f3f = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn';
const _0x80564e = this.mTextBox.value;
_0x80564e.length >= 0x1 && (_0x491f3f = _0x80564e);
_0x491f3f = _0x491f3f.split('');
let _0x50875 = _0x138638 - _0x2c980d;
let _0xbcd391 = _0x4cd538 + _0x2613d6;
_0x4fd3c2 == 1 && (_0x50875 = _0x4506ad - _0x4f6e93, _0xbcd391 = _0x4cd538 + _0x5f58cb);
const _0x330f88 = Math.floor(_0x50875 / _0xbcd391);
let _0x14f705 = _0x4506ad - _0x4f6e93;
let _0x5afd10 = _0x4cd538 + _0x5f58cb;
_0x4fd3c2 == 1 && (_0x14f705 = _0x138638 - _0x2c980d, _0x5afd10 = _0x4cd538 + _0x2613d6);
const _0x3ef56e = Math.floor(_0x14f705 / _0x5afd10);
let _0xf32bb7 = [];
for (let _0x2e9020 = 0; _0x2e9020 < _0x330f88; _0x2e9020++) {
_0xf32bb7[_0x2e9020] = 0;
}
let _0x612a7b = 0;

function _0x1bf3e3()
{
_0x26069c.fillStyle = _0x351abb, _0x26069c.fillRect(_0x41ce33, _0x107c64, _0x138638, _0x4506ad);
if (_0x5055dc == 1) {
const _0x337a98 = (_0x612a7b + 0) * 0.8;
const _0x3dacba = Math.min(Math.max(Math.abs((_0x337a98 + 5) % 6 - 3) - 1, 0), 1) * 255;
const _0x4c6d33 = Math.min(Math.max(Math.abs((_0x337a98 + 3) % 6 - 3) - 1, 0), 1) * 255;
const _0x5e21e3 = Math.min(Math.max(Math.abs((_0x337a98 + 1) % 6 - 3) - 1, 0), 1) * 255;
_0x26069c.strokeStyle = 'rgb(' + _0x3dacba + ',' + _0x4c6d33 + ',' + _0x5e21e3 + ')';
_0x26069c.strokeRect(_0x1801d9, _0x1801d9, _0x138638 + _0x41ce33 * 2 - _0x1801d9 * 2, _0x4506ad + _0x41ce33 * 2 - _0x1801d9 * 2);
}
for (let _0x3d4efb = 0x0; _0x3d4efb < _0x330f88; _0x3d4efb++) { let _0x465cb5 = _0xf32bb7[_0x3d4efb] >= _0x3ef56e;
_0x465cb5 == 1 && (Math.random() > _0x4e37c4 && (_0xf32bb7[_0x3d4efb] = 0, _0x465cb5 = 0));
if (_0x465cb5 == 0) {
const [_0x23a6d8, _0x263805] = _0x223f01(_0x330f88, _0x491f3f, _0x3d4efb, _0xf32bb7[_0x3d4efb], _0x612a7b);
_0x26069c.fillStyle = _0x263805, _0x4fd3c2 == 1 ? _0x26069c.fillText(_0x23a6d8, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0x3d4efb * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93) : _0x26069c.fillText(_0x23a6d8, _0x3d4efb * (_0x4cd538 + _0x2613d6) + _0x41ce33 + _0x2c980d, _0xf32bb7[_0x3d4efb] * (_0x4cd538 + _0x5f58cb) + _0x107c64 + _0x4cd538 + _0x4f6e93), _0xf32bb7[_0x3d4efb]++;
}
}
_0x612a7b++;
}

function _0x223f01(_0x13b090, _0x281d01, _0x47c8a4, _0x47b5c9, _0x1da13c)
{
let _0x32d666 = _0x281d01[Math.floor(Math.random() * _0x281d01.length)],
_0x477883 = '#f00';
const _0x7710a1 = Math.floor(_0x13b090 / 2);
if (_0x281d01.length == 2 && _0x1da13c == 0) {
if (_0x47c8a4 == _0x7710a1 - 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0 ? (_0x32d666 = _0x281d01[0x1], _0x477883 = '#f00') : _0x477883 = '#0f0';
} else {
if (_0x281d01.length == 3 && _0x1da13c == 0) {
if (_0x47c8a4 == _0x7710a1 - 2 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[0x0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[1], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0 ? (_0x32d666 = _0x281d01[2], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
} else {
if (_0x281d01.length == 4 && _0x1da13c == 0) {
if (_0x47c8a4 == _0x7710a1 - 2 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[2], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 1 && _0x47b5c9 == 0 ? (_0x32d666 = _0x281d01[3], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
} else {
if (_0x281d01.length == 5 && _0x1da13c == 0) {
if (_0x47c8a4 == _0x7710a1 - 2 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[0], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 - 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[1], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[2], _0x477883 = '#f00';
else {
if (_0x47c8a4 == _0x7710a1 + 1 && _0x47b5c9 == 0) _0x32d666 = _0x281d01[3], _0x477883 = '#f00';
else _0x47c8a4 == _0x7710a1 + 2 && _0x47b5c9 == 0 ? (_0x32d666 = _0x281d01[4], _0x477883 = '#f00') : _0x477883 = '#0f0';
}
}
}
} else _0x477883 = '#0f0';
}
}
}
return [_0x32d666, _0x477883];
}

this.mIntervalDraw = this.mSlider.max - this.mSlider.value + 15;
this.mIntervalDraw = 200;
this.mDrawlooper = setInterval(_0x1bf3e3, this.mIntervalDraw);

}

ExecuteCyber()
{
clearInterval(this.mDrawlooper), this.OnloadCyber();
}

CreateGif()
{
function _0x1dc076(_0x3b34d1, _0x2795b1, _0x1029b1) {
const _0x3bacbb = _0x3b34d1.toDataURL('image/png');
var _0x9ac7c3 = new Image();
_0x9ac7c3.src = _0x3bacbb, _0x2795b1[_0x1029b1] = _0x9ac7c3;
}
this.mImageArray.length = 0;
document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
document.getElementById('download_gif')['style']['display'] = 'none';
document.getElementById('encoding_gif')['style']['display'] = 'block';
const _0x28f1c7 = this.mCanvas;
let _0x14b993 = this.mImageArray;
this.mEncoder = new GIFEncoder();
let _0x15558d = this.mEncoder;
let _0x15ea3f = 0;
this.updateGifInfo();
const _0x59b777 = this.mIntervalDraw;
const _0x6a28aa = this.GifNum;
const _0x3866e6 = this.mGifFrameSpan;
const _0x1bdbbf = setInterval(function() {
_0x1dc076(_0x28f1c7, _0x14b993, _0x15ea3f), _0x15ea3f++;
if (_0x15ea3f >= _0x6a28aa) {
var _0x4e5fca = document.getElementById('canvas_gif_temp');
var _0x3dfb9a = _0x4e5fca.getContext('2d');
_0x15558d.setRepeat(0);
_0x15558d.setDelay(_0x59b777);
_0x15558d.start();
frames = _0x14b993;
_0x4e5fca.width = frames[0]['naturalWidth'];
_0x4e5fca.height = frames[0]['naturalHeight'];
for (var _0x58bfda = 0; _0x58bfda < frames.length; _0x58bfda++) { _0x3dfb9a.drawImage(frames[_0x58bfda], 0, 0), _0x15558d.addFrame(_0x3dfb9a); } _0x15558d.finish(), document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,' + encode64(_0x15558d.stream()['getData']()); const _0x99ff55 = document.getElementById('anime_gif')['src']['length']; const _0x41b772 = Math.ceil(_0x99ff55 / 1000000 / 1.35); let _0xfdad32 = document.getElementById('download_gif'); _0xfdad32.style.display = 'block'; _0xfdad32.textContent = 'GIFをダウンロード(' + _0x41b772 + 'MB)'; document.getElementById('encoding_gif')['style']['display'] = 'none'; clearInterval(_0x1bdbbf); } }, _0x59b777 * _0x3866e6); if (this.mIsExportFrame == 1) { let _0x2366e1 = 0; const _0x48ff57 = setInterval(function() { var _0x325f21 = document.createElement('a'); _0x325f21.download = 'frame_' + _0x2366e1 + '.png'; _0x325f21.href = _0x14b993[_0x2366e1]['src']; _0x325f21.click(); _0x325f21.remove(); _0x2366e1++, _0x2366e1 >= _0x6a28aa && clearInterval(_0x48ff57);
}, 100);
}
}

DownloadGIF()
{
this.mEncoder.download('download.gif');
}

ChangeFontSize_S()
{
this.mFontSize = 5;
}

ChangeFontSize_M()
{
this.mFontSize = 10;
}

ChangeFontSize_L()
{
this.mFontSize = 15;
}

ChangeCanvasSize_S()
{
this.mWitdh = 320;
this.mHeight = 180;
}

ChangeCanvasSize_M()
{
this.mWitdh = 480;
this.mHeight = 270;
}

ChangeCanvasSize_L()
{
this.mWitdh = 640;
this.mHeight = 360;
}

ChangeCanvasSize(width, height)
{
this.mWitdh = width;
this.mHeight = height;
}

ChangeGifTime_S()
{
this.mGifTime = 2000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_M()
{
this.mGifTime = 4000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_L()
{
this.mGifTime = 6000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

updateGifInfo()
{
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

}

7. if文が短絡評価形式になってしまっているので、if文形式に戻す

+ (クリックで展開)

const _0x2a58 = ['createElement',
'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
'start',
'getElementById',
'mEncoder',
'mCanvas',
'メイリオ',
'mBezelX',
'download.gif',
'style',
'OnloadCyber',
'mTextSpaceY',
'mIntervalDraw',
'mSlider',
'display',
'fillText',
'GIFをダウンロード(',
'mTextSpaceX',
'canvas_gif_temp',
'ChangeFontSize_S',
'image/png',
'mImageArray',
'mType',
'addFrame',
'textContent',
'stream',
'px\x20',
'toDataURL',
'click',
'mFadeSpeed',
'#0f0',
'length',
'remove',
'DownloadGIF',
'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn',
'getContext',
'min',
'download',
'font',
'abs',
'floor',
'arial',
'height',
'GifNum',
'data:image/gif;base64,',
'finish',
'.png',
'mWitdh',
'mIsExportFrame',
'mHeight',
'#f00',
'ChangeCanvasSize_L',
'max',
'split',
'ChangeCanvasSize_M',
'mBezelY',
'CreateGif',
'rgba(0,\x200,\x200,\x201)',
'random',
'none',
'mWraparoundProbability',
'mIsRainbowBezel',
'rgba(0,\x200,\x200,\x200.08)',
'mTextBox',
'ChangeGifTime_S',
'encoding_gif',
'mGifFrameSpan',
'fillRect',
'naturalWidth',
'lineWidth',
'mFontStyle',
'mGifTime',
'rgb(0,\x20255,\x200)',
'anime_gif',
'mDrawlooper',
'updateGifInfo',
'src',
'mFontSize',
'ChangeCanvasSize',
'ExecuteCyber',
'href',
'width',
'ChangeGifTime_M',
'mLinewidth',
'fillStyle',
'value',
'strokeStyle',
'block',
'mTextAdjustY',
'mTextAdjustX',
'drawImage',
'ceil',
'frame_'];

(function(_0x2ed04e, _0x2a587b) {
const _0x9b7da7 = function(_0x540d80) {
while (--_0x540d80) {
_0x2ed04e.push(_0x2ed04e.shift());
}
};
_0x9b7da7(++_0x2a587b);
}(_0x2a58, 0x128));
var _0x9b7d = function(_0x2ed04e, _0x2a587b) {
_0x2ed04e = _0x2ed04e - 0x0;
let _0x9b7da7 = _0x2a58[_0x2ed04e];
return _0x9b7da7;
};

class Cyber {
constructor(id_canvas, id_slider, id_text, type) {
this.mCanvas = document.getElementById(id_canvas);
this.mSlider = document.getElementById(id_slider);
this.mTextBox = document.getElementById(id_text);
this.mDrawlooper = 0;
this.mType = type;
this.mImageArray = [];
this.mEncoder;
this.mIntervalDraw = 35;

this.mFontSize = 10;
this.mFontStyle = 'arial';
this.mWitdh = 480;
this.mHeight = 270;
this.mLinewidth = 0;
this.mBezelX = this.mLinewidth + 0;
this.mBezelY = this.mLinewidth + 0;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 2;
this.mTextAdjustY = 2;
this.mTextSpaceX = 0;
this.mTextSpaceY = 0;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.08)';
this.mWraparoundProbability = 0.975;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
this.mGifTime = 0;
this.GifNum = 0;
this.ChangeGifTime_M();

this.mFontSize = 33;
this.mFontStyle = 'メイリオ';
this.mWitdh = 320;
this.mHeight = 270;
this.mLinewidth = 3;
this.mBezelX = this.mLinewidth + 2;
this.mBezelY = this.mLinewidth + 2;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 12;
this.mTextAdjustY = 6;
this.mTextSpaceX = 4;
this.mTextSpaceY = 8;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.35)';
this.mWraparoundProbability = 0.75;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
}

OnloadCyber()
{
const canvas = this.mCanvas;
let context = canvas.getContext('2d');
const width_original = canvas.width = this.mWitdh;
const height_original = canvas.height = this.mHeight;
const bezel_x = this.mBezelX;
const bezel_y = this.mBezelY;
const is_rainbow_bezel = this.mIsRainbowBezel;
const text_adjust_x = this.mTextAdjustX;
const text_adjust_y = this.mTextAdjustY;
const font_size = this.mFontSize;
const font_style = this.mFontStyle;
const text_space_x = this.mTextSpaceX;
const text_space_y = this.mTextSpaceY;
const fade_speed = this.mFadeSpeed;
const wraparound_probability = this.mWraparoundProbability;
context.font = font_size + 'px ' + font_style;
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.fillRect(0, 0, width_original, height_original);
const line_width = this.mLinewidth;
if (line_width > 1)
{
context.lineWidth = line_width;
context.strokeStyle = 'rgb(0, 255, 0)';
context.strokeRect(line_width, line_width, width_original - line_width * 2, height_original - line_width * 2);
}
const width_impl = width_original - bezel_x * 2;
const height_impl = height_original - bezel_y * 2;
const type = this.mType;
let text_original = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn';
const text_box = this.mTextBox.value;
if (text_box.length >= 1)
{
text_original = text_box;
}
text_original = text_original.split('');
let column_span = width_impl - text_adjust_x;
let font_span_x = font_size + text_space_x;
if (type == 1)
{
column_span = height_impl - text_adjust_y;
font_span_x = font_size + text_space_y;
}
const column_num = Math.floor(column_span / font_span_x);
let row_span = height_impl - text_adjust_y;
let font_span_y = font_size + text_space_y;
if (type == 1)
{
row_span = width_impl - text_adjust_x;
font_span_y = font_size + text_space_x;
}
const row_num = Math.floor(row_span / font_span_y);
let drop_index = [];
for (let i = 0; i < column_num; i++) {
drop_index[i] = 0;
}
let draw_count = 0;

function draw()
{
context.fillStyle = fade_speed;
context.fillRect(bezel_x, bezel_y, width_impl, height_impl);

if (is_rainbow_bezel == 1)
{
const start = (draw_count + 0) * 0.8;
const r = Math.min(Math.max(Math.abs((start + 5) % 6 - 3) - 1, 0), 1) * 255;
const g = Math.min(Math.max(Math.abs((start + 3) % 6 - 3) - 1, 0), 1) * 255;
const b = Math.min(Math.max(Math.abs((start + 1) % 6 - 3) - 1, 0), 1) * 255;
context.strokeStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
context.strokeRect(line_width, line_width, width_impl + bezel_x * 2 - line_width * 2, height_impl + bezel_x * 2 - line_width * 2);
}

for (let i = 0; i < column_num; i++) { let is_rangeover_row = drop_index[i] >= row_num;
is_rangeover_row == 1 && (Math.random() > wraparound_probability && (drop_index[i] = 0, is_rangeover_row = 0));

if (is_rangeover_row == 0)
{
const [text, text_color] = getTextAndColor(column_num, text_original, i, drop_index[i], draw_count);
context.fillStyle = text_color;
if (type == 1)
{
context.fillText(text, drop_index[i] * (font_size + text_space_x) + bezel_x + text_adjust_x, i * (font_size + text_space_y) + bezel_y + font_size + text_adjust_y);
}
else
{
context.fillText(text, i * (font_size + text_space_x) + bezel_x + text_adjust_x, drop_index[i] * (font_size + text_space_y) + bezel_y + font_size + text_adjust_y);
}

drop_index[i]++;
}
}

draw_count++;
}

function getTextAndColor(column_num, text_original, column_index, row_index, draw_count)
{
let text = text_original[Math.floor(Math.random() * text_original.length)];
let text_color = '#f00';
const column_half = Math.floor(column_num / 2);

if (text_original.length == 2 && draw_count == 0)
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[0], text_color = '#f00';
else column_index == column_half && row_index == 0 ? (text = text_original[1], text_color = '#f00') : text_color = '#0f0';
}
else if (text_original.length == 3 && draw_count == 0)
{
if (column_index == column_half - 2 && row_index == 0) text = text_original[0], text_color = '#f00';
else
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[1], text_color = '#f00';
else column_index == column_half && row_index == 0 ? (text = text_original[2], text_color = '#f00') : text_color = '#0f0';
}
}
else if (text_original.length == 4 && draw_count == 0)
{
if (column_index == column_half - 2 && row_index == 0) text = text_original[0], text_color = '#f00';
else
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[1], text_color = '#f00';
else
{
if (column_index == column_half && row_index == 0) text = text_original[2], text_color = '#f00';
else column_index == column_half + 1 && row_index == 0 ? (text = text_original[3], text_color = '#f00') : text_color = '#0f0';
}
}
}
else if (text_original.length == 5 && draw_count == 0)
{
if (column_index == column_half - 2 && row_index == 0) text = text_original[0], text_color = '#f00';
else
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[1], text_color = '#f00';
else
{
if (column_index == column_half && row_index == 0) text = text_original[2], text_color = '#f00';
else
{
if (column_index == column_half + 1 && row_index == 0) text = text_original[3], text_color = '#f00';
else column_index == column_half + 2 && row_index == 0 ? (text = text_original[4], text_color = '#f00') : text_color = '#0f0';
}
}
}
}
else
{
text_color = '#0f0';
}

return [text, text_color];
}

this.mIntervalDraw = this.mSlider.max - this.mSlider.value + 15;
this.mIntervalDraw = 200;
this.mDrawlooper = setInterval(draw, this.mIntervalDraw);

}

ExecuteCyber()
{
clearInterval(this.mDrawlooper);
this.OnloadCyber();
}

CreateGif()
{
function createImage(canvas, image_array, image_index)
{
const dataURL = canvas.toDataURL('image/png');
var image = new Image();
image.src = dataURL;
image_array[image_index] = image;
}

this.mImageArray.length = 0;
document.getElementById('anime_gif')['src'] = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
document.getElementById('download_gif')['style']['display'] = 'none';
document.getElementById('encoding_gif')['style']['display'] = 'block';
const canvas = this.mCanvas;
let image_array = this.mImageArray;
this.mEncoder = new GIFEncoder();
let encoder = this.mEncoder;
let image_index = 0;
this.updateGifInfo();
const interval_draw = this.mIntervalDraw;
const gif_num = this.GifNum;
const gif_frame_span = this.mGifFrameSpan;

const interval_id = setInterval(function() {
createImage(canvas, image_array, image_index);
image_index++;

if (image_index >= gif_num)
{
var canvas_gif_temp = document.getElementById('canvas_gif_temp');
var canvas_gif_temp_context = canvas_gif_temp.getContext('2d');
encoder.setRepeat(0);
encoder.setDelay(interval_draw);
encoder.start();
frames = image_array;
canvas_gif_temp.width = frames[0]['naturalWidth'];
canvas_gif_temp.height = frames[0]['naturalHeight'];
for (var i = 0; i < frames.length; i++) { canvas_gif_temp_context.drawImage(frames[i], 0, 0), encoder.addFrame(canvas_gif_temp_context); } encoder.finish(); document.getElementById('anime_gif').src = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); const gif_data_size_impl = document.getElementById('anime_gif').src.length; const gif_data_size = Math.ceil(gif_data_size_impl / 1000000 / 1.35); let id_download_gif = document.getElementById('download_gif'); id_download_gif.style.display = 'block'; id_download_gif.textContent = 'GIFをダウンロード(' + gif_data_size + 'MB)'; document.getElementById('encoding_gif').style.display = 'none'; clearInterval(interval_id); } }, interval_draw * gif_frame_span); if (this.mIsExportFrame == 1) { let frame_index = 0; const interval_id_frame_download = setInterval(function() { var element = document.createElement('a'); element.download = 'frame_' + frame_index + '.png'; element.href = image_array[frame_index].src; element.click(); element.remove(); frame_index++; frame_index >= gif_num && clearInterval(interval_id_frame_download);
}, 100);
}
}

DownloadGIF()
{
this.mEncoder.download('download.gif');
}

ChangeFontSize_S()
{
this.mFontSize = 5;
}

ChangeFontSize_M()
{
this.mFontSize = 10;
}

ChangeFontSize_L()
{
this.mFontSize = 15;
}

ChangeCanvasSize_S()
{
this.mWitdh = 320;
this.mHeight = 180;
}

ChangeCanvasSize_M()
{
this.mWitdh = 480;
this.mHeight = 270;
}

ChangeCanvasSize_L()
{
this.mWitdh = 640;
this.mHeight = 360;
}

ChangeCanvasSize(width, height)
{
this.mWitdh = width;
this.mHeight = height;
}

ChangeGifTime_S()
{
this.mGifTime = 2000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_M()
{
this.mGifTime = 4000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_L()
{
this.mGifTime = 6000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

updateGifInfo()
{
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

}

8. 先頭の不要コードを削除し、コメントを追記していき、デコード完了

+ (クリックで展開)

// マトリックス風のcanvas
// type == 1 の場合は、文字が横方向に流れる
class Cyber {
constructor(id_canvas, id_slider, id_text, type) {
this.mCanvas = document.getElementById(id_canvas);
this.mSlider = document.getElementById(id_slider);
this.mTextBox = document.getElementById(id_text);

this.mDrawlooper = 0;
this.mType = type;
this.mImageArray = [];
this.mEncoder;
this.mIntervalDraw = 35;

this.mFontSize = 10;
this.mFontStyle = 'arial';
this.mWitdh = 480;
this.mHeight = 270;
this.mLinewidth = 0;
this.mBezelX = this.mLinewidth + 0;
this.mBezelY = this.mLinewidth + 0;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 2;
this.mTextAdjustY = 2;
this.mTextSpaceX = 0;
this.mTextSpaceY = 0;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.08)';
this.mWraparoundProbability = 0.975;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
this.mGifTime = 0;
this.GifNum = 0;
this.ChangeGifTime_M();

/*
* LINEスタンプ用の設定
this.mFontSize = 33;
this.mFontStyle = 'メイリオ';
this.mWitdh = 320;
this.mHeight = 270;
this.mLinewidth = 3;
this.mBezelX = this.mLinewidth + 2;
this.mBezelY = this.mLinewidth + 2;
this.mIsRainbowBezel = 0;
this.mTextAdjustX = 12;
this.mTextAdjustY = 6;
this.mTextSpaceX = 4;
this.mTextSpaceY = 8;
this.mFadeSpeed = 'rgba(0, 0, 0, 0.35)';
this.mWraparoundProbability = 0.75;
this.mGifFrameSpan = 1;
this.mIsExportFrame = 0;
*/
}

OnloadCyber()
{
const canvas = this.mCanvas;
let context = canvas.getContext('2d');
const width_original = canvas.width = this.mWitdh;
const height_original = canvas.height = this.mHeight;
const bezel_x = this.mBezelX;
const bezel_y = this.mBezelY;
const is_rainbow_bezel = this.mIsRainbowBezel;
const text_adjust_x = this.mTextAdjustX;
const text_adjust_y = this.mTextAdjustY;
const font_size = this.mFontSize;
const font_style = this.mFontStyle;
const text_space_x = this.mTextSpaceX;
const text_space_y = this.mTextSpaceY;
const fade_speed = this.mFadeSpeed;
const wraparound_probability = this.mWraparoundProbability;
const type = this.mType;

context.font = font_size + 'px ' + font_style;
context.fillStyle = 'rgba(0, 0, 0, 1)';
context.fillRect(0, 0, width_original, height_original);

// 外枠の描画
const line_width = this.mLinewidth;
if (line_width > 1)
{
context.lineWidth = line_width;
context.strokeStyle = 'rgb(0, 255, 0)';
context.strokeRect(line_width, line_width, width_original - line_width * 2, height_original - line_width * 2);
}

// ベゼルを除いた正味の描画領域
const width_impl = width_original - bezel_x * 2;
const height_impl = height_original - bezel_y * 2;

// 表示する文字列
let text_original = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ∫∮∑√∂∇∬ʼn';
const text_box = this.mTextBox.value;
if (text_box.length >= 1)
{
text_original = text_box;
}
text_original = text_original.split('');

// 行と列を算出
let column_span = width_impl - text_adjust_x;
let font_span_x = font_size + text_space_x;
if (type == 1)
{
column_span = height_impl - text_adjust_y;
font_span_x = font_size + text_space_y;
}
const column_num = Math.floor(column_span / font_span_x);
let row_span = height_impl - text_adjust_y;
let font_span_y = font_size + text_space_y;
if (type == 1)
{
row_span = width_impl - text_adjust_x;
font_span_y = font_size + text_space_x;
}
const row_num = Math.floor(row_span / font_span_y);

// 配列初期化
let drop_index = [];
for (let i = 0; i < column_num; i++) {
drop_index[i] = 0;
}

// 描画
? ? ? ?let draw_count = 0;
function draw()
{
// 描画ごとに薄い画面でフェードさせていく
context.fillStyle = fade_speed;
context.fillRect(bezel_x, bezel_y, width_impl, height_impl);

// 外枠をレインボーにする
if (is_rainbow_bezel == 1)
{
const start = (draw_count + 0) * 0.8;
const r = Math.min(Math.max(Math.abs((start + 5) % 6 - 3) - 1, 0), 1) * 255;
const g = Math.min(Math.max(Math.abs((start + 3) % 6 - 3) - 1, 0), 1) * 255;
const b = Math.min(Math.max(Math.abs((start + 1) % 6 - 3) - 1, 0), 1) * 255;
context.strokeStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
context.strokeRect(line_width, line_width, width_impl + bezel_x * 2 - line_width * 2, height_impl + bezel_x * 2 - line_width * 2);
}

// 列ごとに1文字を描画
for (let i = 0; i < column_num; i++) { let is_rangeover_row = drop_index[i] >= row_num;
if (is_rangeover_row == 1)
{
// 行が範囲オーバーしている場合は、一定確率で drop_index を初期化
if (Math.random() > wraparound_probability)
{
drop_index[i] = 0;
is_rangeover_row = 0;
}
}

if (is_rangeover_row == 0)
{
// 文字と色を取得
const [text, text_color] = getTextAndColor(column_num, text_original, i, drop_index[i], draw_count);
context.fillStyle = text_color;

// 描画
if (type == 1)
{
context.fillText(text, drop_index[i] * (font_size + text_space_x) + bezel_x + text_adjust_x, i * (font_size + text_space_y) + bezel_y + font_size + text_adjust_y);
}
else
{
context.fillText(text, i * (font_size + text_space_x) + bezel_x + text_adjust_x, drop_index[i] * (font_size + text_space_y) + bezel_y + font_size + text_adjust_y);
}

drop_index[i]++;
}
}

draw_count++;
}

// 文字と色を取得
function getTextAndColor(column_num, text_original, column_index, row_index, draw_count)
{
// 初回のみ、指定した文字列を赤色にする(5文字まで)

let text = text_original[Math.floor(Math.random() * text_original.length)];
let text_color = '#f00';
const column_half = Math.floor(column_num / 2);

if (text_original.length == 2 && draw_count == 0)
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[0], text_color = '#f00';
else column_index == column_half && row_index == 0 ? (text = text_original[1], text_color = '#f00') : text_color = '#0f0';
}
else if (text_original.length == 3 && draw_count == 0)
{
if (column_index == column_half - 2 && row_index == 0) text = text_original[0], text_color = '#f00';
else
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[1], text_color = '#f00';
else column_index == column_half && row_index == 0 ? (text = text_original[2], text_color = '#f00') : text_color = '#0f0';
}
}
else if (text_original.length == 4 && draw_count == 0)
{
if (column_index == column_half - 2 && row_index == 0) text = text_original[0], text_color = '#f00';
else
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[1], text_color = '#f00';
else
{
if (column_index == column_half && row_index == 0) text = text_original[2], text_color = '#f00';
else column_index == column_half + 1 && row_index == 0 ? (text = text_original[3], text_color = '#f00') : text_color = '#0f0';
}
}
}
else if (text_original.length == 5 && draw_count == 0)
{
if (column_index == column_half - 2 && row_index == 0) text = text_original[0], text_color = '#f00';
else
{
if (column_index == column_half - 1 && row_index == 0) text = text_original[1], text_color = '#f00';
else
{
if (column_index == column_half && row_index == 0) text = text_original[2], text_color = '#f00';
else
{
if (column_index == column_half + 1 && row_index == 0) text = text_original[3], text_color = '#f00';
else column_index == column_half + 2 && row_index == 0 ? (text = text_original[4], text_color = '#f00') : text_color = '#0f0';
}
}
}
}
else
{
text_color = '#0f0';
}

return [text, text_color];
}

// 落下速度を設定
this.mIntervalDraw = this.mSlider.max - this.mSlider.value + 15;
// LINEスタンプ用の設定
//this.mIntervalDraw = 200;
this.mDrawlooper = setInterval(draw, this.mIntervalDraw);
}

ExecuteCyber()
{
// 前回に実行した draw の繰り返し実行を停止
clearInterval(this.mDrawlooper);

// 再度実行
this.OnloadCyber();
}

CreateGif()
{
// canvas のデータを image_array にセット
function createImage(canvas, image_array, image_index)
{
const dataURL = canvas.toDataURL('image/png');
var image = new Image();
image.src = dataURL;
image_array[image_index] = image;
}

this.mImageArray.length = 0;
document.getElementById('anime_gif').src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
document.getElementById('download_gif').style.display = 'none';
document.getElementById('encoding_gif').style.display = 'block';

const canvas = this.mCanvas;
let image_array = this.mImageArray;
this.mEncoder = new GIFEncoder();
let encoder = this.mEncoder;
let image_index = 0;
this.updateGifInfo();
const interval_draw = this.mIntervalDraw;
const gif_num = this.GifNum;
const gif_frame_span = this.mGifFrameSpan;

// canvas のフレームを image_array に保存
const interval_id = setInterval(function() {
createImage(canvas, image_array, image_index);
image_index++;

// 所定のフレーム数が得られたら、gifを作成
if (image_index >= gif_num)
{
// gifを作成
var canvas_gif_temp = document.getElementById('canvas_gif_temp');
var canvas_gif_temp_context = canvas_gif_temp.getContext('2d');
encoder.setRepeat(0);
encoder.setDelay(interval_draw);
encoder.start();
frames = image_array;
canvas_gif_temp.width = frames[0].naturalWidth;
canvas_gif_temp.height = frames[0].naturalHeight;
for (var i = 0; i < frames.length; i++) { canvas_gif_temp_context.drawImage(frames[i], 0, 0), encoder.addFrame(canvas_gif_temp_context); } encoder.finish(); // ダウンロードボタンを設定 document.getElementById('anime_gif').src = 'data:image/gif;base64,' + encode64(encoder.stream().getData()); const gif_data_size_impl = document.getElementById('anime_gif').src.length; const gif_data_size = Math.ceil(gif_data_size_impl / 1000000 / 1.35); let id_download_gif = document.getElementById('download_gif'); id_download_gif.style.display = 'block'; id_download_gif.textContent = 'GIFをダウンロード(' + gif_data_size + 'MB)'; document.getElementById('encoding_gif').style.display = 'none'; clearInterval(interval_id); } }, interval_draw * gif_frame_span); // gifの各フレームを画像出力するデバッグ機能 if (this.mIsExportFrame == 1) { let frame_index = 0; const interval_id_frame_download = setInterval(function() { var element = document.createElement('a'); element.download = 'frame_' + frame_index + '.png'; element.href = image_array[frame_index].src; element.click(); element.remove(); frame_index++; frame_index >= gif_num && clearInterval(interval_id_frame_download);
}, 100);
}
}

DownloadGIF()
{
this.mEncoder.download('download.gif');
}

ChangeFontSize_S()
{
this.mFontSize = 5;
}

ChangeFontSize_M()
{
this.mFontSize = 10;
}

ChangeFontSize_L()
{
this.mFontSize = 15;
}

ChangeCanvasSize_S()
{
this.mWitdh = 320;
this.mHeight = 180;
}

ChangeCanvasSize_M()
{
this.mWitdh = 480;
this.mHeight = 270;
}

ChangeCanvasSize_L()
{
this.mWitdh = 640;
this.mHeight = 360;
}

ChangeCanvasSize(width, height)
{
this.mWitdh = width;
this.mHeight = height;
}

ChangeGifTime_S()
{
this.mGifTime = 2000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_M()
{
this.mGifTime = 4000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

ChangeGifTime_L()
{
this.mGifTime = 6000;
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}

updateGifInfo()
{
const gifnum = this.mGifTime / this.mIntervalDraw;
this.GifNum = Math.floor(gifnum);
}
}

まとめ

  • エラーを解決しやすいように、デコードは少しずつ行い、こまめに動作確認
  • デコードしたことで未使用変数に気付いてコード整理になった
  • というか、コードはバージョン管理しておきましょう・・・(プライベートは横着しがち・・・)

-ブログ

© 2022 墾田ええねん! Powered by AFFINGER5