用tornado实现图片标记

背景介绍

在文章Keras入门（四）之利用CNN模型轻松破解网站验证码中，其中的验证码图片标记是采用tornado实现的网页实现的。本文将会讲述如何利用tornado来实现图片标记。
我们的示例图片如下：

需要标记的图片

我们实现用tornado来实现一个网站，能够很好地帮助我们完成图片标记，也就是我们只需要输入图片中的数字，那么保存后的图片名称就是输入的数字。
下面，让我们来一起看一下怎么这个功能？

项目结构

项目的名称为captcha_tagging，项目的完整结构如下：

图片标记项目完整结构

其中，images文件夹中的图片是我们需要标记的图片，标记完后的图片存放在new_images文件夹，网页模板文件为index.html，控制程序的脚本为server.py。

程序实现

网页模板文件index.html的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片浏览</title>
</head>
<body>

    <div align="center">
        <br><br>
    <img src="{{static_url('images/%s' % img_src)}}" style="width:100;height:44"/>
        <form action='/index' method='post'>
            value: <input type="text" name="rename" /><br>
            imgName: <input type="text" name="imgname" value="{{imgname}}"/><br>
            <button type="submit">提交</button>
        </form>
    </div>

</body>
</html>

控制程序的脚本server.py的完整代码如下：

# -*- coding: utf-8 -*-

import cv2
import random
import os.path
import tornado.web
import tornado.ioloop
import tornado.options
import tornado.httpserver
from tornado.options import define, options

# 保存图片
def tag_picture(imagepath, name):
    image = cv2.imread(imagepath, 1)
    cv2.imwrite('%s/new_images/%s.png' % (os.path.dirname(os.path.abspath(__file__)), name), image)

#定义端口为9100
define("port", default=9100, type=int)

# 随机获取目录下的一张图片
def get_image(dir):
    files = os.listdir(dir)
    return random.choice(files)

class ImageHandler(tornado.web.RequestHandler):

    # get函数
    def get(self):
        dir = './static/images'
        img_src = get_image(dir)
        self.render('index.html', img_src=img_src, imgname=img_src)

    # post函数
    def post(self):
        filename = self.get_argument('rename')
        imgname = self.get_argument('imgname')
        imagepath = os.path.dirname(__file__)+'/static/images/%s' % imgname
        tag_picture(imagepath, filename)            # 保存新图片
        os.system('rm -rf %s' % imagepath)          # 删除原图片
        print(len(os.listdir('./static/images')))   # 剩余图片数量

        dir = './static/images'
        img_src = get_image(dir)
        self.render('index.html', img_src=img_src, imgname=img_src)


# 主函数
def main():

    # 开启tornado服务
    tornado.options.parse_command_line()
    # 定义app
    app = tornado.web.Application(
            handlers=[(r'/index', ImageHandler)
                      ],    # 网页路径控制
            template_path=os.path.join(os.path.dirname(__file__), "templates"), # 模板路径
            static_path=os.path.join(os.path.dirname(__file__), "static"),      # 静态文件路径
          )
    http_server = tornado.httpserver.HTTPServer(app)
    http_server.listen(options.port)
    tornado.ioloop.IOLoop.instance().start()

main()

程序运行

运行server.py，在浏览器中输入localhost:9100/index，界面如下：

运行界面

在value文本框中输入验证码中的数字8513，然后点提交即可，我们就会发现在new_images文件夹下已保存好了我们刚才标记的图片，而且页面会自动跳转至下一张需要标记的图片。

保存后的图片

利用这个程序，我们只需要标记看到的图片，后台会帮你保存标记的结果，并删除原来的图片，提示你还剩多少张图片需要标记，如果显示剩余数量为0，则标记完毕。笔者在将近一小时的时间里标记了1000张验证码。

总结

想要用神经网络模型去训练数据，那么首先就需要标记好的数据。如果需要自己标记数据的话，这将是非常麻烦且耗时的过程，笔者提供了一种图片标记的思路，希望能给读者一些启发～
本项目已放至Github，地址为：https://github.com/percent4/CAPTCHA-Recognizition 。

注意：本人现已开通微信公众号： Python爬虫与算法（微信号为：easy_web_scrape），欢迎大家关注哦~~

用tornado实现图片标记

背景介绍

项目结构

程序实现

程序运行

总结

jclian91

引用和评论

NLP（二十九）一步一步，理解Self-Attention