使用JS插件识别抖音图片验证的几种方法
1. 使用OCR技术识别图片中的文字，然后模拟输入。 2. 使用图像处理技术，将图片中的验证码提取出来，然后手动输入。 3. 使用机器学习算法，训练一个模型来识别验证码。这种方法需要大量的数据和计算资源。 4. 使用第三方服务，如打码平台等，将验证码发送给服务器进行验证。这种方法需要付费，并且可能会受到限制。 5. 使用浏览器插件或脚本，自动填写验证码。这种方法可能会违反抖音的使用协议，不建议使用。
经常刷网页版的抖音，但隔一段时间就会出现验证码，有滑块和文字点选。今天尝试开发一个自动完成验证的插件，但遇到了跨域图片不能直接获得base64数据的问题。
准备插件工具：https://pan.baidu.com/s/1IiSvK8DuftEqeaXI9fZIyg?pwd=j1DM+提取码：j1dm
工具使用说明：
post方式向http://127.0.0.1:2000提交数据{type:"ocrCode",img:图形base64}识别文字字母等{type:"detection",img:图形base64}识别点选文字范围{type:"slide",targetImg:滑块base64,backgroundImg:背景base64}识别滑块{type:"clickImage",key:"窗口关键字",img:按钮base64}点击图形按钮{type:"passKey",key:按键}模拟键盘按键{type:"activityWindow",window:"要激活的窗口标题关键字",key:按键【可选】}激活窗口并按键{type:"click"}点击鼠标{type:"clickPoint",x:X坐标,y:Y坐标}指定坐标点击鼠标{type:"move",x:X坐标,y:Y坐标}移动鼠标{type:"moveAndClick",x:X坐标,y:Y坐标}移动鼠标到指定坐标再点击{type:"write",text:"要输入的内容"}模拟键盘输入文字第一种：通常获取图片数据直接用canvas drawImage简单直接快速。
但在部分网站中是禁止使用canvas的，所以我就用
第二种：使用 XMLHttpRequest异步（注意只能异步）读取blob数据转base64。
但如果图片是跨域的，第一、二种都会失效
第三种（支持跨域）： 在浏览器插件的background.js中使用 XMLHttpRequest读取图片然后传给inject_script.js 。也可以用于其它数据的读取。
以下代码示例，过抖音验证（文字点选类识别率较低，需要训练模型然后更新到识别程序中才能完善）。
//识别验证码functionocrFormApi(_data){var_code="本地未开启P娃儿猫验证码识别工具的web服务。";try{console.log("提交后台识别中...");$.ajax({type:"POST",url:"http://127.0.0.1:2000/",timeout:2*1000,async:false,data:_data,success:function(data){_code=data;},error:function(_d){_code="识别错误";}});}catch(e){}return_code;}//滑块操作(滑块元素ID，要滑动的距离)functionmockVerify(_imgId,_distance){varbtn=document.querySelector("#"+_imgId);varmousedown=document.createEvent('MouseEvents');varrect=btn.getBoundingClientRect();varx=rect.x;vary=rect.y;mousedown.initMouseEvent('mousedown',true,true,window,0,x,y,x,y,false,false,false,false,0,null);btn.dispatchEvent(mousedown);vardx=0;vardy=0;varinterval=setInterval(function(){varmousemove=document.createEvent('MouseEvents');var_x=x+dx;var_y=y+dy;mousemove.initMouseEvent('mousemove',true,true,window,0,_x,_y,_x,_y,false,false,false,false,0,null);btn.dispatchEvent(mousemove);console.log("MOVE");btn.dispatchEvent(mousemove);if(_x-x>=_distance){clearInterval(interval);varmouseup=document.createEvent('MouseEvents');mouseup.initMouseEvent('mouseup',true,true,window,0,_x,_y,_x,_y,false,false,false,false,0,null);btn.dispatchEvent(mouseup);console.log("END");}else{dx+=Math.ceil(Math.random()*50);}},60);}//传入图像元素通过canvas转换functiongetImgBase64(_img){varcanvas=document.createElement("canvas");canvas.width=_img.naturalWidth;canvas.height=_img.naturalHeight;varctx=canvas.getContext("2d");ctx.drawImage(_img,0,0);returncanvas.toDataURL("image/png").replace("data:image/png;base64,","");}//传入图片地址（不能跨域），通过blob转换（只能异步）functiongetImgBase64ByUrl(_url,_success){varxhr=newXMLHttpRequest();xhr.responseType="blob";xhr.open("POST",_url,true);xhr.onload=function(data,textStatus,request){//请求完成处理函数if(this.status===200){var_blob=this.response;//获取返回值let_f=newFileReader();_f.onload=function(_e){console.log(_e.target.result);_success(_e.target.result);}_f.readAsDataURL(_blob);}else{console.log(this.status);}};xhr.send();}functioncheckCodeOut(){if($("#captcha-verify-image:visible").length){//获取跨域图片数据（把getImgBase64ByUrl中的方法放到插件的background中，因为background没有跨域问题）window.sendMessage({type:"getDataFromUrl",data:{url:$("#captcha-verify-image:visible").attr("src"),blob:1,type:"GET"}},function(_base64){var_backgroundImg=_base64.replace("data:image/jpeg;base64,","");//点选文字if($("#verify-bar-code:visible").length){window.sendMessage({type:"getDataFromUrl",data:{url:$("#verify-bar-code:visible").attr("src"),blob:1,type:"GET"}},function(_base64){var_targetImg=_base64.replace("data:image/jpeg;base64,","");//识别出要求点选的文字var_data=ocrFormApi({type:"ocrCode",img:_targetImg});//_data=JSON.parse(_data);var_txt=_data.code;//识别背景图上的文字及对应坐标_data=ocrFormApi({type:"detection",img:_backgroundImg});console.log(_data)_data=_data.code;for(var_i=0;_i<_txt.length;_i++){if(_data[_txt.charAt(_i)]){console.log("“"+_txt.charAt(_i)+"”字点击范围：",_data[_txt.charAt(_i)])}else{console.log("“"+_txt.charAt(_i)+"”字范围未能识别成功，请刷新。");$(".secsdk_captcha_refresh--text").click();}}});}//滑块if($(".captcha_verify_img_slide:visible").length){window.sendMessage({type:"getDataFromUrl",data:{url:$(".captcha_verify_img_slide:visible").attr("src"),blob:1,type:"GET"}},function(_base64){var_targetImg=_base64.replace("data:image/jpeg;base64,","");var_data=ocrFormApi("slide",{type:"slide",targetImg:_targetImg,backgroundImg:_backgroundImg});console.log("滑块需要操作的数据：",_data);$(".captcha_verify_img_slide:visible").attr("id","52pj_slide");mockVerify("52pj_slide",_data.x);});}});return;}setTimeout(checkCodeOut,1000);}functioninit(){var_l=location.href;if(_l.indexOf("www.douyin.com")!=-1){checkCodeOut();return;}return;}if(typeof$=='undefined'){vars=document.createElement("script");s.onload=init;s.src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js";document.getElementsByTagName("HEAD")[0].appendChild(s);}else{init();}
