经常刷网页版的抖音，但隔一段时间就会出现验证码，有滑块和文字点选。今天尝试开发一个自动完成验证的插件，但遇到了跨域图片不能直接获得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();

}

# javascript # 前端 # html
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

什么是人工智能大模型？

avatar 讯飞AI开发者社区

企业选型必看！大模型5大分类全解析，避坑指南+落地建议，收藏这篇就够了！

在人工智能飞速发展的今天，大语言模型（Large Language Models, LLM）已成为推动技术进步的核心引擎。然而，随着应用场景的不断拓展，不同类型的LLM也应运而生。本文将带你系统了解当前主流的大模型分类及其核心特点。

avatar 讯飞AI开发者社区

号课堂§2.2：声明范式

声明式语言——尤其是函数式语言和逻辑式语言——擅长基于数理逻辑的应用，如人工智能、符号处理、数据库、编译器等，对基于业务逻辑的、尤其是交互式或事件驱动型的应用就不那么得心应手了。命令式编程模拟电脑运算，是行动导向的，关键在于定义解法，即“怎么做”，因而算法是显性而目标是隐性的；声明式编程模拟人脑思维，是目标驱动的，关键在于描述问题，即“做什么”，因而目标是显性而算法是隐性的。”冒号娓娓道来，“除了

avatar 讯飞AI开发者社区