当前位置:网站首页>用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 )
	} 
}

增加一些按钮

最终效果:

在这里插入图片描述

使用说明

滑动条右边的0表示,旋转的角度(滑动条的当前刻度)。这个控件是编辑框,可以修改这个角度,然后点击旋转就可以旋转指定的角度

下面的1表示当前指定文件夹的第几张图片,需要先按选择按钮选择有旋转图片的文件夹,向前和向后则是选择文件夹的上一张图片和下一张图片(会循环)

保存按钮则是保存已经标注好的图片到文件夹下(无法指定文件夹,是在当前文件夹创建了一个result,文件名为1.jpg,1表示第几张图片)

其中一直想用aardio写一些工具,后面说一些怎么用aardio打包Python。

完整代码和软件

https://github.com/kanadeblisst/rotate_qrcode_label

原网站

版权声明
本文为[Qwertyuiop2016]所创,转载请带上原文链接,感谢
https://blog.csdn.net/Qwertyuiop2016/article/details/125552484