https://www.foodworld.com.tw/captcha/tn_code.js?v=35

1/*! tncode 1.2 author:weiyingbin email:[email protected]
2//@ object webiste: http://www.39gs.com/archive/259.html
3//@ https://github.com/binwind8/tncode
4*/
5
6// === 多語系字典 ===
7var tnLang = {
8    zh_TW: {
9        success: "驗證成功.",
10        fail: "驗證失敗.",
11        error_fast: "操作異常，請重試",
12        error_simple: "操作過於簡單，請重試",
13        loading: "載入中",
14        slide_text: "拖曳已完成拼圖",
15        start_btn: "開始圖形驗證",
16		field_name : "驗證"
17    },
18    en: {
19        success: "Verification successful.",
20        fail: "Verification failed.",
21        error_fast: "Operation abnormal, please try again",
22        error_simple: "Too simple operation, please try again",
23        loading: "Loading...",
24        slide_text: "Drag to complete the puzzle",
25        start_btn: "Start Verification",
26		field_name : "Verification"
27    },
28    ja: {
29        success: "認証に成功しました。",
30        fail: "認証に失敗しました。",
31        error_fast: "操作が不正です。もう一度お試しください。",
32        error_simple: "操作が単純すぎます。もう一度お試しください。",
33        loading: "読み込み中...",
34        slide_text: "パズルを完成させるようにドラッグしてください",
35        start_btn: "認証を開始",
36		field_name : "認証"
37    }
38};
39
40// === 預設語系 ===
41var tnLangCurrent = tnLang.zh_TW;
42
43if(!document.getElementByClassName){
44    function hasClass(elem, cls) {
45      cls = cls || '';
46      if (cls.replace(/\s/g, '').length == 0) return false;
47      var ret = new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
48      return ret;
49    }
50    document.getElementByClassName = function(className,index){
51        var nodes=document.getElementsByTagName("*");
52        var arr=[];
53        for(var i=0;i<nodes.length;i++){
54            if(hasClass(nodes[i],className)) arr.push(nodes[i]);
55        }
56        if(!index)index=0;
57        return index==-1?arr:arr[index];
58    };
59    function addClass( elements,cName ){
60       if( !hasClass( elements,cName ) ){
61          elements.className += " " + cName;
62       };
63    }
64    function removeClass( elements,cName ){
65       if( hasClass( elements,cName ) ){
66          elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " );
67       };
68    }
69}
70
71function appendHTML(o,html) {
72    var divTemp = document.createElement("div"), nodes = null
73        , fragment = document.createDocumentFragment();
74    divTemp.innerHTML = html;
75    nodes = divTemp.childNodes;
76    for (var i=0, length=nodes.length; i<length; i+=1) {
77       fragment.appendChild(nodes[i].cloneNode(true));
78    }
79    o.appendChild(fragment);
80    nodes = null;
81    fragment = null;
82};
83
84var _ajax = function() {};
85_ajax.prototype = {
86    request: function(method, url, callback, postVars) {
87        var xhr = this.createXhrObject()();
88        xhr.onreadystatechange = function() {
89            if (xhr.readyState !== 4) return;
90            (xhr.status === 200) ?
91                callback.success(xhr.responseText, xhr.responseXML) :
92                callback.failure(xhr,status);
93        };
94
95        if (method.toUpperCase() === "GET" && postVars) {
96            url += "?" + this.JSONStringify(postVars);
97            postVars = null;
98        }
99
100        xhr.open(method, url, true);
101
102        if (method.toUpperCase() === "POST" && postVars) {
103            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
104            postVars = this.JSONStringify(postVars);
105        }
106
107        xhr.send(postVars);
108    },
109    createXhrObject: function() {
110        var methods = [
111            function() { return new XMLHttpRequest(); },
112            function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
113            function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
114        ],
115        i = 0,
116        len = methods.length,obj;
117        for (; i < len; i++) {
118            try {
119                methods[i];
120            } catch(e) {
121                continue;
122            }
123            this.createXhrObject = methods[i];
124            return methods[i];
125        }
126        throw new Error("ajax created failure");
127    },
128    JSONStringify: function(obj) {
129        if (!obj) return null;
130        var str = [];
131        for (var p in obj) {
132            if (obj.hasOwnProperty(p)) {
133                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
134            }
135        }
136        return str.join("&");
137    }
138};
139
140var tncode = {
141    _obj:null,
142    _tncode:null,
143    _img:null,
144    _img_loaded:false,
145    _is_draw_bg:false,
146    _is_moving:false,
147    _block_start_x:0,
148    _block_start_y:0,
149    _doing:false,
150    _mark_w:50,
151    _mark_h:50,
152    _mark_offset:0,
153    _img_w:240,
154    _img_h:150,
155    _result:false,
156    _err_c:0,
157    _onsuccess:null,
158
159    // === 防機器人 ===
160    _drag_start_time:0,
161    _track:[],
162
163    _bind:function(elm,evType,fn){
164        if (elm.addEventListener) {

165            elm.addEventListener(evType, fn);
166            return true;
167        }else if (elm.attachEvent) {
168            var r = elm.attachEvent(evType, fn);
169            return r;
170        }
171    },
172
173    _block_start_move:function(e){
174        if(tncode._doing||!tncode._img_loaded){
175            return;
176        }
177        e.preventDefault();
178        var theEvent = window.event || e;
179        if(theEvent.touches){
180            theEvent = theEvent.touches[0];
181        }
182
183        var obj = document.getElementByClassName('tncode_slide_block_text');
184        obj.style.display="none";
185        tncode._draw_bg();
186        tncode._block_start_x = theEvent.clientX;
187        tncode._block_start_y = theEvent.clientY;
188        tncode._doing = true;
189        tncode._is_moving = true;
190
191        // start
192        tncode._drag_start_time = Date.now();
193        tncode._track = [];
194    },
195
196    _block_on_move:function(e){
197        if(!tncode._doing)return true;
198        if(!tncode._is_moving)return true;
199        e.preventDefault();
200        var theEvent = window.event || e;
201        if(theEvent.touches){
202            theEvent = theEvent.touches[0];
203        }
204        tncode._is_moving = true;
205

206        var offset = theEvent.clientX - tncode._block_start_x;
207        if(offset<0){
208            offset = 0;
209        }
210        var max_off = tncode._img_w - tncode._mark_w;
211        if(offset>max_off){
212            offset = max_off;
213        }
214        var obj = document.getElementByClassName('tncode_slide_block');
215        obj.style.cssText = "transform: translate("+offset+"px, 0px)";
216        tncode._mark_offset = offset/max_off*(tncode._img_w-tncode._mark_w);
217        tncode._draw_bg();
218        tncode._draw_mark();
219
220        // 軌跡記錄
221        tncode._track.push({x:theEvent.clientX, t:Date.now()});
222    },
223
224    _block_on_end:function(e){
225        if(!tncode._doing)return true;
226        e.preventDefault();
227        var theEvent = window.event || e;
228        if(theEvent.touches){
229            theEvent = theEvent.touches[0];
230        }
231        tncode._is_moving = false;
232
233        // 機器人檢測
234        var used = Date.now() - tncode._drag_start_time;
235        if(used < 500 || used > 30000){
236            tncode._showmsg(tnLangCurrent.error_fast);
237            tncode.refresh();
238            return;
239        }
240        if(tncode._track.length < 10){
241            tncode._showmsg(tnLangCurrent.error_simple);
242            tncode.refresh();
243            return;
244        }
245
246        tncode._send_result();
247    },
248
249    _send_result:function(){
250        var haddle = {success:tncode._send_result_success,failure:tncode._send_result_failure};
251        tncode._result = false;
252        var re = new _ajax();
253        re.request('POST', tncode._currentUrl()+'check.php', haddle, { tn_r: tncode._mark_offset });
254    },
255
256    _send_result_success:function(responseText,responseXML){
257        tncode._doing = false;
258        try {
259            var res = JSON.parse(responseText);
260        } catch(e) {
261            var res = {status:'error'};
262        }
263        if(res.status=='ok'){
264            tncode._tncode.innerHTML = tnLangCurrent.success;
265            tncode._showmsg(tnLangCurrent.success,1);
266            tncode._result = true;
267            document.getElementByClassName('hgroup').style.display="block";
268            setTimeout(tncode.hide,3000);
269            if(tncode._onsuccess){
270                tncode._onsuccess();
271            }
272        }else{
273            var obj = document.getElementById('tncode_div');
274            addClass( obj,'dd');
275            setTimeout(function(){
276                removeClass( obj,'dd');
277            },200);
278            tncode._result = false;
279            tncode._showmsg(tnLangCurrent.fail);
280            tncode._err_c++;
281            if(tncode._err_c>5){
282                tncode.refresh();
283            }
284        }
285    },
286
287    _send_result_failure:function(xhr,status){ },
288
289    _draw_fullbg:function(){
290        var canvas_bg = document.getElementByClassName('tncode_canvas_bg');
291        var ctx_bg = canvas_bg.getContext('2d');
292        ctx_bg.drawImage(tncode._img, 0, tncode._img_h*2, tncode._img_w, tncode._img_h, 0, 0, tncode._img_w, tncode._img_h);
293    },
294
295    _draw_bg:function(){
296        if(tncode._is_draw_bg){
297            return;
298        }
299        tncode._is_draw_bg = true;
300        var canvas_bg = document.getElementByClassName('tncode_canvas_bg');
301        var ctx_bg = canvas_bg.getContext('2d');
302        ctx_bg.drawImage(tncode._img, 0, 0, tncode._img_w, tncode._img_h, 0, 0, tncode._img_w, tncode._img_h);
303    },
304
305    _draw_mark:function(){
306        var canvas_mark = document.getElementByClassName('tncode_canvas_mark');
307        var ctx_mark = canvas_mark.getContext('2d');
308        ctx_mark.clearRect(0,0,canvas_mark.width,canvas_mark.height);
309        ctx_mark.drawImage(tncode._img, 0, tncode._img_h, tncode._mark_w,tncode._img_h,tncode._mark_offset,0,tncode._mark_w, tncode._img_h);
310        var imageData = ctx_mark.getImageData(0, 0, tncode._img_w, tncode._img_h);
311        var data = imageData.data;
312        var x = tncode._img_h,y=tncode._img_w;
313        for(var j = 0; j < x; j++) {
314            var ii = 1,k1=-1;
315            for(var k=0;k<y&&k>=0&&k>k1;){
316                var i = (j*y+k)*4;
317                k+=ii;
318                var r = data[i], g = data[i+1], b = data[i+2];
319                if(r+g+b<200) data[i+3] = 0;
320                else{
321                    var arr_pix = [1,-5];
322                    var arr_op = [250,0];
323                    for (var i2 =1; i2<arr_pix[0]-arr_pix[1]; i2++) {
324                        var iii = (j*y+k+(arr_pix[0]-1*i2)*ii)*4;
325                        data[iii+3] = parseInt(arr_op[0]-(arr_op[0]-arr_op[1])/(arr_pix[0]-arr_pix[1])*i2);
326                    }
327                    if(ii==-1){ break; }

328                    k1 = k;
329                    k = y-1;
330                    ii = -1;
331                };
332            }
333        }
334        ctx_mark.putImageData(imageData, 0, 0);
335    },
336
337    _reset:function(){
338        tncode._mark_offset = 0;
339        tncode._draw_bg();
340        tncode._draw_mark();
341        var obj = document.getElementByClassName('tncode_slide_block');
342        obj.style.cssText = "transform: translate(0px, 0px)";
343    },
344
345    show:function(){
346        var obj = document.getElementByClassName('hgroup');
347        if(obj){ obj.style.display="none"; }
348        tncode.refresh();
349        tncode._tncode = this;
350        document.getElementById('tncode_div_bg').style.display="block";
351        document.getElementById('tncode_div').style.display="block";
352    },
353
354    hide:function(){
355        document.getElementById('tncode_div_bg').style.display="none";
356        document.getElementById('tncode_div').style.display="none";
357    },
358
359    _showmsg:function(msg,status){
360        if(!status){
361            status = 0;
362            var obj = document.getElementByClassName('tncode_msg_error');
363        }else{
364            var obj = document.getElementByClassName('tncode_msg_ok');
365        }
366        obj.innerHTML = msg;
367        var setOpacity = function (ele, opacity) {
368            if (ele.style.opacity != undefined) {
369                ele.style.opacity = opacity / 100;
370            } else {
371                ele.style.filter = "alpha(opacity=" + opacity + ")";
372            }
373        };
374        function fadeout(ele, opacity, speed) {
375            if (ele) {
376                var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100;
377                v < 1 && (v = v * 100);
378                var count = speed / 1000;
379                var avg = (100 - opacity) / count;
380                var timer = null;
381                timer = setInterval(function() {
382                    if (v - avg > opacity) {
383                        v -= avg;
384                        setOpacity(ele, v);
385                    } else {
386                        setOpacity(ele, 0);
387                        if(status==0){ tncode._reset(); }
388                        clearInterval(timer);
389                    }
390                }, 100);
391            }
392        }
393        function fadein(ele, opacity, speed) {
394            if (ele) {
395                var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity;
396                v < 1 && (v = v * 100);
397                var count = speed / 1000;
398                var avg = count < 2 ? (opacity / count) : (opacity / count - 1);
399                var timer = null;
400                timer = setInterval(function() {
401                    if (v < opacity) {
402                        v += avg;
403                        setOpacity(ele, v);
404                    } else {
405                        clearInterval(timer);
406                        setTimeout(function() {fadeout(obj, 0, 6000);},1000);
407                    }
408                }, 100);
409            }
410        }
411        fadein(obj, 80, 4000);
412    },
413
414    _html:function(){
415        var d = document.getElementById('tncode_div_bg');
416        if(d)return;
417        var html = '<div class="tncode_div_bg" id="tncode_div_bg"></div>'
418            +'<div class="tncode_div" id="tncode_div">'
419            +'<div class="loading">'+tnLangCurrent.loading+'</div>'
420            +'<canvas class="tncode_canvas_bg"></canvas>'
421            +'<canvas class="tncode_canvas_mark"></canvas>'
422            +'<div class="hgroup"></div>'
423            +'<div class="tncode_msg_error"></div>'
424            +'<div class="tncode_msg_ok"></div>'
425            +'<div class="tncode_slide"><div class="tncode_slide_block"></div>'
426            +'<div class="tncode_slide_block_text">'+tnLangCurrent.slide_text+'</div></div>'
427            +'<div class="tools"><div class="tncode_close"></div>'
428            +'<div class="tncode_refresh"></div>'
429            +'<div class="tncode_tips"></div></div></div>';
430        var bo = document.getElementsByTagName('body');
431        appendHTML(bo[0],html);
432    },
433
434    _currentUrl:function(){
435        var list = document.getElementsByTagName('script');
436        for (var i in list) {
437            var  d=list[i];
438            if(d.src && d.src.indexOf('tn_code')!==-1){
439                var arr = d.src.split('tn_code');
440                return arr[0];
441            }
442        }
443    },
444
445    refresh:function(){
446        var isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
447        tncode._err_c = 0;
448        tncode._is_draw_bg = false;
449        tncode._result = false;
450        tncode._img_loaded = false;

451        var obj = document.getElementByClassName('tncode_canvas_bg');
452        obj.style.display="none";
453        obj = document.getElementByClassName('tncode_canvas_mark');
454        obj.style.display="none";
455        tncode._img = new Image();
456        var img_url = tncode._currentUrl()+"tncode.php?t="+Math.random();
457        if(!isSupportWebp){ img_url+="&nowebp=1"; }
458        tncode._img.src = img_url;
459        tncode._img.onload = function(){
460            tncode._draw_fullbg();
461            var canvas_mark = document.getElementByClassName('tncode_canvas_mark');
462            var ctx_mark = canvas_mark.getContext('2d');
463            ctx_mark.clearRect(0,0,canvas_mark.width,canvas_mark.height);
464            tncode._img_loaded = true;
465            obj = document.getElementByClassName('tncode_canvas_bg');
466            obj.style.display="";
467            obj = document.getElementByClassName('tncode_canvas_mark');
468            obj.style.display="";
469        };
470        obj = document.getElementByClassName('tncode_slide_block');
471        obj.style.cssText = "transform: translate(0px, 0px)";
472        obj = document.getElementByClassName('tncode_slide_block_text');
473        obj.style.display="block";
474    },
475
476    init:function(){
477        if(!tncode._img){
478            tncode._html();
479            var obj = document.getElementByClassName('tncode_slide_block');
480            tncode._bind(obj,'mousedown',tncode._block_start_move);
481            tncode._bind(document,'mousemove',tncode._block_on_move);
482            tncode._bind(document,'mouseup',tncode._block_on_end);
483            tncode._bind(obj,'touchstart',tncode._block_start_move);
484            tncode._bind(document,'touchmove',tncode._block_on_move);
485            tncode._bind(document,'touchend',tncode._block_on_end);
486
487            var obj = document.getElementByClassName('tncode_close');
488            tncode._bind(obj,'touchstart',tncode.hide);
489            tncode._bind(obj,'click',tncode.hide);
490            var obj = document.getElementByClassName('tncode_refresh');
491            tncode._bind(obj,'touchstart',tncode.refresh);
492            tncode._bind(obj,'click',tncode.refresh);
493
494            var objs = document.getElementByClassName('tncode',-1);
495            for (var i in objs) {
496                var o = objs[i];
497                o.innerHTML = tnLangCurrent.start_btn;
498                tncode._bind(o,'touchstart',tncode.show);
499                tncode._bind(o,'click',tncode.show);
500            }
501        }
502    },
503
504    result:function(){
505        return tncode._result;
506    },
507
508    onsuccess:function(fn){
509        tncode._onsuccess = fn;
510    }
511};
512var $TN = tncode;
513//var _old_onload = window.onload;
514//window.onload = function(){
515//   if(typeof _old_onload == 'function'){
516//        _old_onload();
517//    }
518//    tncode.init();
519//};
520window.addEventListener('load', function(){
521    tncode.init();
522});