利用JS插件识别抖音图片验证的几种方法
3835
经常刷网页版的抖音,但隔一段时间就会出现验证码,有滑块和文字点选。今天尝试开发一个自动完成验证的插件,但遇到了跨域图片不能直接获得base64数据的问题。
准备插件工具: https://pan.baidu.com/s/1Dok2WKq15bnHyIVRAGDqNg?pwd=pve2 提取码: pve2
工具使用说明:
- 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
。也可以用于其它数据的读取。
以下代码示例,过抖音验证(文字点选类识别率较低,需要训练模型然后更新到识别程序中才能完善)。
- //识别验证码
- function ocrFormApi(_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,要滑动的距离)
- function mockVerify(_imgId, _distance) {
- var btn = document.querySelector("#" + _imgId);
- var mousedown = document.createEvent('MouseEvents');
- var rect = btn.getBoundingClientRect();
- var x = rect.x;
- var y = rect.y;
- mousedown.initMouseEvent('mousedown', true, true, window, 0,
- x, y, x, y, false, false, false, false, 0, null);
- btn.dispatchEvent(mousedown);
- var dx = 0;
- var dy = 0;
- var interval = setInterval(function () {
- var mousemove = 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);
- var mouseup = 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转换
- function getImgBase64(_img) {
- var canvas = document.createElement("canvas");
- canvas.width = _img.naturalWidth;
- canvas.height = _img.naturalHeight;
- var ctx = canvas.getContext("2d");
- ctx.drawImage(_img, 0, 0);
- return canvas.toDataURL("image/png").replace("data:image/png;base64,", "");
- }
- //传入图片地址(不能跨域),通过blob转换(只能异步)
- function getImgBase64ByUrl(_url, _success) {
- var xhr = new XMLHttpRequest();
- xhr.responseType = "blob";
- xhr.open("POST", _url, true);
- xhr.onload = function (data, textStatus, request) {// 请求完成处理函数
- if (this.status === 200) {
- var _blob = this.response;// 获取返回值
- let _f = new FileReader();
- _f.onload = function (_e) {
- console.log(_e.target.result);
- _success(_e.target.result);
- }
- _f.readAsDataURL(_blob);
- } else {
- console.log(this.status);
- }
- };
- xhr.send();
- }
- function checkCodeOut() {
- 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);
- }
- function init() {
- var _l = location.href;
- if (_l.indexOf("www.douyin.com") != -1) {
- checkCodeOut();
- return;
- }
- return;
- }
- if (typeof $ == 'undefined') {
- var s = 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();
- }
本文网址:https://www.zztuku.com/detail-13757.html
站长图库 - 利用JS插件识别抖音图片验证的几种方法
申明:如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!