经常刷网页版的抖音，但隔一段时间就会出现验证码，有滑块和文字点选。今天尝试开发一个自动完成验证的插件，但遇到了跨域图片不能直接获得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 。也可以用于其它数据的读取。
以下代码示例，过抖音验证（文字点选类识别率较低，需要训练模型然后更新到识别程序中才能完善）。
//识别验证码
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();
}