|
7 | 7 | } |
8 | 8 |
|
9 | 9 |
|
10 | | - function get_image_url($e) { |
11 | | - // Div with css background (e.g. hcaptcha) |
12 | | - const matches = $e?.style['background']?.trim()?.match(/(?!^)".*?"/g); |
13 | | - if (matches?.length > 0) { |
14 | | - return matches[0].replaceAll('"', ''); |
| 10 | + // function get_image_url($e) { |
| 11 | + // // Div with css background (e.g. hcaptcha) |
| 12 | + // const matches = $e?.style['background']?.trim()?.match(/(?!^)".*?"/g); |
| 13 | + // if (matches?.length > 0) { |
| 14 | + // return matches[0].replaceAll('"', ''); |
| 15 | + // } |
| 16 | + |
| 17 | + // // Img with src or data-src |
| 18 | + // let url = $e.src || $e.dataset.src; |
| 19 | + // if (url) { |
| 20 | + // if (url.startsWith('/')) { |
| 21 | + // url = `${window.location.origin}${url}`; |
| 22 | + // } |
| 23 | + // return url; |
| 24 | + // } |
| 25 | + |
| 26 | + // return null; |
| 27 | + // } |
| 28 | + |
| 29 | + |
| 30 | + async function get_image_data(selector) { |
| 31 | + function get_image_from_style($e) { |
| 32 | + return new Promise(resolve => { |
| 33 | + let bg = $e.style.backgroundImage; |
| 34 | + if (bg) { |
| 35 | + const matches = bg.trim().match(/(?!^)".*?"/g); |
| 36 | + if (!matches || matches.length === 0) { |
| 37 | + bg = null; |
| 38 | + } |
| 39 | + bg = matches[0].replaceAll('"', ''); |
| 40 | + } |
| 41 | + const $img = new Image(); |
| 42 | + $img.onload = () => resolve($img); |
| 43 | + $img.src = bg; |
| 44 | + }); |
15 | 45 | } |
16 | 46 |
|
17 | | - // Img with src or data-src |
18 | | - let url = $e.src || $e.dataset.src; |
19 | | - if (url) { |
20 | | - if (url.startsWith('/')) { |
21 | | - url = `${window.location.origin}${url}`; |
| 47 | + async function get_canvas(selector) { |
| 48 | + const $e = document.querySelector(selector); |
| 49 | + |
| 50 | + // Canvas |
| 51 | + if ($e instanceof HTMLCanvasElement) { |
| 52 | + return $e; |
| 53 | + } |
| 54 | + |
| 55 | + let $img; |
| 56 | + if ($e instanceof HTMLImageElement) { |
| 57 | + $img = $e; |
| 58 | + } |
| 59 | + else { |
| 60 | + $img = await get_image_from_style($e); |
22 | 61 | } |
23 | | - return url; |
| 62 | + |
| 63 | + if (!$img) { |
| 64 | + throw Error(`failed to get image element for ${selector}`); |
| 65 | + } |
| 66 | + |
| 67 | + const $canvas = document.createElement('canvas'); |
| 68 | + $canvas.width = $img.width; |
| 69 | + $canvas.height = $img.height; |
| 70 | + const ctx = $canvas.getContext('2d'); |
| 71 | + ctx.drawImage($img, 0, 0); |
| 72 | + |
| 73 | + return $canvas; |
24 | 74 | } |
25 | 75 |
|
26 | | - return null; |
| 76 | + const $canvas = await get_canvas(selector); |
| 77 | + return $canvas.toDataURL('image/jpeg').split(';base64,')[1]; |
27 | 78 | } |
28 | 79 |
|
29 | 80 |
|
30 | | - let last_url_hash = null; |
| 81 | + let last_image_data = null; |
31 | 82 | function on_task_ready(settings, i=100) { |
32 | 83 | return new Promise(resolve => { |
33 | 84 | let checking = false; |
|
37 | 88 | } |
38 | 89 | checking = true; |
39 | 90 |
|
40 | | - const $image = document.querySelector(settings.ocr_image_selector); |
41 | | - const image_url = get_image_url($image); |
42 | | - if (!image_url || image_url === '') { |
43 | | - console.log('no image url', $image); |
| 91 | + // const $image = document.querySelector(settings.ocr_image_selector); |
| 92 | + // const image_url = get_image_url($image); |
| 93 | + // if (!image_url || image_url === '') { |
| 94 | + // console.log('no image url', $image); |
| 95 | + // checking = false; |
| 96 | + // return; |
| 97 | + // } |
| 98 | + |
| 99 | + // const url_hash = JSON.stringify(image_url); |
| 100 | + // if (last_image_data === url_hash) { |
| 101 | + // console.log('task unchanged'); |
| 102 | + // checking = false; |
| 103 | + // return; |
| 104 | + // } |
| 105 | + // last_image_data = url_hash; |
| 106 | + |
| 107 | + const image_data = await get_image_data(settings.ocr_image_selector); |
| 108 | + if (!image_data) { |
| 109 | + // console.log('no image data'); |
44 | 110 | checking = false; |
45 | 111 | return; |
46 | 112 | } |
47 | 113 |
|
48 | | - const url_hash = JSON.stringify(image_url); |
49 | | - if (last_url_hash === url_hash) { |
50 | | - console.log('task unchanged'); |
| 114 | + if (last_image_data === image_data) { |
| 115 | + // console.log('image_data unchanged'); |
51 | 116 | checking = false; |
52 | 117 | return; |
53 | 118 | } |
54 | | - last_url_hash = url_hash; |
| 119 | + last_image_data = image_data; |
55 | 120 |
|
56 | 121 | clearInterval(check_interval); |
57 | 122 | checking = false; |
58 | | - return resolve({image_url}); |
| 123 | + return resolve({image_data}); |
59 | 124 | }, i); |
60 | 125 | }); |
61 | 126 | } |
62 | 127 |
|
63 | 128 |
|
64 | 129 | async function on_present(settings) { |
65 | | - const {image_url} = await on_task_ready(settings); |
| 130 | + const {image_data} = await on_task_ready(settings); |
66 | 131 |
|
67 | 132 | // Detect images |
68 | 133 | const {job_id, data} = await NopeCHA.post({ |
69 | | - captcha_type: 'ocr', |
70 | | - image_urls: [image_url], |
| 134 | + captcha_type: IS_DEVELOPMENT ? 'ocr_dev' : 'ocr', |
| 135 | + image_data: [image_data], |
71 | 136 | key: settings.key, |
72 | 137 | }); |
73 | 138 | if (!data) { |
|
0 commit comments