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

    需求

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

    在网上看到的文章是生成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
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    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>

    • 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

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

    修改html标签属性

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

    • 1
    • 2
    • 3
    • 4

    如果改成js的写法:

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

    • 1
    • 2

    加个滑动条

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    加入滑动条逻辑

    效果：
    请添加图片描述

    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);
	}
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    保存

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

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

    • 1
    • 2
    • 3

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

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

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

    • 1
    • 2

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

    执行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};
}

    • 1
    • 2
    • 3
    • 4

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

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

    • 1
    • 2
    • 3
    • 4
    • 5

    针对控件截图，实际也就是全屏截图，然后给个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 )
	} 
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    增加一些按钮

    最终效果：

    在这里插入图片描述

    使用说明

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

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

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

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

    完整代码和软件

    https://github.com/kanadeblisst/rotate_qrcode_label

  • 相关阅读:
    领域驱动模型DDD（四）——Eventuate Tram Saga源码讲解
    202. 快乐数
    语义分割基础知识
    基于c#上位机制作（WPF控件）
    模型的网页我可以正常访问（不知道是不是挂了梯子的原因）但是pycharm里就报错无法访问
    Xlua在unity中使用luaide打断点
    【iOS开发】——KVO与KVC
    代码随想录算法训练营Day60|单调栈01
    贪心算法—活动选择问题
    基于spark进行数据分析的心力衰竭可视化大屏项目
  • 原文地址：https://blog.csdn.net/Qwertyuiop2016/article/details/125552484