当前位置：网站首页>用aardio写一个旋转验证码标注小工具

用aardio写一个旋转验证码标注小工具

2022-07-06 13:36:00 【Qwertyuiop2016】

需求

最近想训练旋转验证码识别的模型。标注数据是个无意义且费时间的活，而且针对旋转验证码还没有找到一个顺手的标注工具。没有那就自己写一个。

在网上看到的文章是生成360个角度的图片，找出其中方向为正的一张。生成360个角度的图片很耗时间，一张图片大概需要个一两分钟，然后再在360个图片中选择一张还挺麻烦的。

开始写代码

旋转效果

我找了很久也没看到aardio有什么可以旋转图片的库，正当我打算用aardio调用Python时，突然看到在HTML中旋转图片居然只需要给img标签加一个style="transform: rotate(0deg);" 其中的0就是旋转的角度，支持负数

也就是说旋转图片的功能我只需要用html就能实现，我只需要控制0deg中的数字，就能控制图片旋转的角度。

//截图 远程调试
import win.ui;
import web.view;
/*DSG{
    {*/
var mainForm = win.form(text="旋转验证码标注";right=468;bottom=605;acceptfiles=1;bgcolor=16777215;border="thin")
mainForm.add()
/*}}*/

var wb = web.view(mainForm,,0);
wb.go('/res/1.html')

mainForm.show();
return win.loopMessage();

1.html的代码

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css"> .vcode-spin-faceboder {
       position: relative; overflow: hidden; width: 350px; height: 350px; margin: 28px auto 24px; border: 0; -webkit-background-size: 100% 100%; background-size: 100% 100% } .vcode-spin-img {
       position: relative; z-index: 999; width: 100%; height: 100%; pointer-events: none; -webkit-border-radius: 50%; border-radius: 50% } .next {
       width: 50px; height: 15px; background-color: rgb(250,0,255) } </style>
    <script type="text/javascript"> </script>
</head>
<body style="margin:50px">
	<div class="vcode-spin-faceboder">
  		<img class="vcode-spin-img" src="1.jpg" style="transform: rotate(0deg);">
		<button id="next" class="next"></button> 
  	</div>
</body>
</html>

效果：
在这里插入图片描述

修改html标签属性

// 180就是旋转的角度
var js = string.format(`this.setAttribute("style", "transform: rotate(%ddeg);");`, 180);
// 100为timeout时间，单位毫秒, 前面是css选择器
wb.waitEle(".vcode-spin-img", js, 100);

如果改成js的写法:

var inp = document.getElementsByClassName("vcode-spin-img"); 
inp.setAttribute("type", "transform: rotate(180deg);");

加个滑动条

我想通过滑动滑动条的位置来控制图片旋转的角度。首先界面控件里选择跟踪条，刻度的话0-359, 后面我改成了(-179-180)。不过库代码里说不能用负数，我试了负数也没问题，就不理他了
在这里插入图片描述

// 指定滑动条最大刻度
mainForm.trackbar.max=359;
// 指定滑动条最小刻度
mainForm.trackbar.min=0;
// 指定滑动条当前刻度
mainForm.trackbar.pos=0;

加入滑动条逻辑

效果：
请添加图片描述

mainForm.trackbar.onnotify = function(id,code,ptr){
     
	if(code==0xFFFFFFF4){
     
		var js = string.format(`this.setAttribute("style", "transform: rotate(%ddeg);");`, mainForm.trackbar.pos);
        wb.waitEle(".vcode-spin-img", js, 100);
	}
}

保存

旋转正了，要将旋转后的图片保存。目前想到了两种方法，第一种直接截图当前软件的界面，会把按钮什么的也截进去。后面再做一下处理就行。因为界面的大小是不变的，只需要剪切指定部分的图

var picture = gdip.snap(mainForm.hwnd);
// filename是文件路径，100是文件质量(0-100)，仅针对jpg格式
picture.save(filename,100);

第二种则是网页截图，因为界面是基于浏览器的。所以也可以支持devtools protocol协议

第一步：打开远程控制端口

var ws = wb.openRemoteDebugging()
ws.Runtime.enable();

第二步：获取图片控件在网页的位置(x, y和width, height)。用js的方法就可以，然后执行js获取返回值。不截img标签，而是截外层的div。因为外层的div是固定大小的。截img的话大小会变化

// 在aardio中引号是可以换行的
js = '(function(){
    
	var a = document.querySelector(".vcode-spin-faceboder").getBoundingClientRect();
	return a.toJSON();
})()'

执行js

ws.Runtime.evaluate(expression=js, awaitPromise=true,returnByValue=true).end = function(result, err){
    
	console.dump(result);
	var clip = {
    scale=1;x=result.left+pageX;y=result.top+pageY;width=result.width;height=result.height};
}

pageX和pageY获取(为什么要加这个我也不清楚，我看的pyppeteer源码加了这个)，实际获取的值也是0,0所以加不加无所谓

var pageX,pageY;
ws.Page.getLayoutMetrics().end = function(result, err){
    
	pageX = result[["layoutViewport"]].pageX
	pageY = result[["layoutViewport"]].pageY
}

针对控件截图，实际也就是全屏截图，然后给个x,y加宽高剪切一下

ws.Page.captureScreenshot(clip=clip).end = function(result,err){
    
	if(result[["data"]]){
    
		var bin = crypt.decodeBin(result[["data"]]);
		string.save("\1.PNG", bin )
	} 
}