用tornado实现图片标记

素颜马尾好姑娘i 2022-02-28 14:50 168阅读 0赞

### 背景介绍 ###

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

![需要标记的图片][1240]

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

### 项目结构 ###

项目的名称为captcha\_tagging，项目的完整结构如下：

![图片标记项目完整结构][1240 1]

其中，images文件夹中的图片是我们需要标记的图片，标记完后的图片存放在new\_images文件夹，网页模板文件为index.html，[控制程序的脚本为server.py][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][server.py 1]，在浏览器中输入localhost:9100/index，界面如下：

![运行界面][1240 2]

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

![保存后的图片][1240 3]

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

### 总结 ###

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

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

[Keras_CNN]: https://www.jianshu.com/p/6660cf451c5d
[1240]: /images/20220228/613725b8df02431ba7638d00ddccca99.png
[1240 1]: /images/20220228/e2feb535923742f38f131af1a18cb6ae.png
[server.py]: http://xn--server-vy7i35y333asjlinjz41cmuj40y.py
[server.py 1]: http://xn--server-2w2r549b.py
[1240 2]: /images/20220228/d6dc5f3146c945379d17273d05b82ad6.png
[1240 3]: /images/20220228/deb9a71410b44f9394f232527df1482a.png
[https_github.com_percent4_CAPTCHA-Recognizition]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fpercent4%2FCAPTCHA-Recognizition