利用JS插件识别抖音图片验证的几种方法

经常刷网页版的抖音，但隔一段时间就会出现验证码，有滑块和文字点选。今天尝试开发一个自动完成验证的插件，但遇到了跨域图片不能直接获得base64数据的问题。

准备插件工具：https://pan.baidu.com/s/1IiSvK8DuftEqeaXI9fZIyg?pwd=j1dm 提取码：j1dm

工具使用说明：

1 2 3 4 5 6 7 8 9 10 11 12

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 。也可以用于其它数据的读取。
以下代码示例，过抖音验证（文字点选类识别率较低，需要训练模型然后更新到识别程序中才能完善）。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146

//识别验证码 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(); }