基于opencv+ImageAI+tensorflow的智能动漫人物识别系统——深度学习算法应用(含python、JS、模型源码)+数据集（四）

    $.ajax({
        type: "POST",  //发送选择POST方法
        url: '/', //设定人物
        dataType: "json",  //接收结果类型为json
        data: formData,  //用户上传的图片
        cache: false,
        contentType: false,
        processData: false,
        error: function (XMLResponse) {
            console.log("error")
        },
        success: function (data) { //服务器成功返回结果
            document.getElementById('loading').style.display = "none";
           let template1 = document.getElementById('template1').innerHTML;
            document.getElementById('name').innerHTML = template(template1, {data: data.result}) //渲染展示结果模板
            document.getElementById('name').style.display = "block";
        }
});} else { document.getElementById('name').innerText = "请选择一张图片"; }
//前端页面框架
<body>
<div class="wrapper">
    <nav class="header navbar">
        <span class="navbar-brand mb-0 h1">动漫人物识别</span>
    </nav>
    <div class="content-wrapper">
        <div class="input-wrapper card">
            <img class="rounded img card-img-top" src="static/images/banner.jpg" id="preview">
            <div class="card-body" style="text-align: center">
             <button class="btn btn-secondary form-control"id="up">选择图片</button>
                <input class="file" type="file" name="file" id="upload_input" value="选择一张图片">
                <button class="btn btn-primary form-control" onclick='confirm_up()'>点击上传</button>
            <div class="form-control" id="loading" style="display: none">
                <img class="card-img-top"src="static/images/loading.gif" alt=""
                         style="height: 20px;width: 20px; display: inline-block">
                    uploading...
                </div>
            </div>
        </div>
        <div class="predict-result card">
            <p class="card-header">预测结果: </p>
            <div class="card-body predict" id="name"></div>
        </div>
    </div>
</div>
<script src="static/js/preview.js" type="text/javascript"></script>
</body>
//添加用户预览
let preview = document.querySelector('#preview');
let eleFile = document.getElementById('upload_input');
eleFile.addEventListener('change', function () {
    let file = this.files[0];
    console.log("Input change")
    //确认选择的文件是图片
    if (file.type.indexOf("image") == 0) {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            //图片转为base64
            let newUrl = this.result;
            preview.src = newUrl;
        };
    }
    document.getElementById('name').style.display = "none";
});
$(document).ready(function(){
    $('#up').click(function(){
        $('#upload_input').click();
    });
});

2）后端

后端使用Flask 框架。

UPLOAD_FOLDER = 'uploader' #路径设置
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'jif'} #图片类型
app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['JSON_AS_ASCII'] = False
@app.route('/test')
def hello():
    return "hello world"
#检查文件类型
def allowed_file(filename):
    return '.' in filename and 
           filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
@app.route('/', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        #检查请求命令是否有文件
        if 'file' not in request.files:
            #flash('No file part')
            return redirect(request.url)
        file = request.files['file']
        #如果用户没有选择文件，浏览器提交一个没有文件名的空文件
        if file.filename == '':
            # flash('No selected file')
            return redirect(request.url)
        if file and allowed_file(file.filename):
            filename = secure_filename(file.filename)
            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            file_path = file_path.replace('\', '/')  #解决路径问题
            if not os.path.exists(UPLOAD_FOLDER):
                os.mkdir(UPLOAD_FOLDER)
            file.save(file_path)
            print(file_path)
            result = predict.predict(file_path)
            return jsonify({'signal': 1, 'result': result, 'img_path': file_path})
    else:
        return render_template('index.html')
@app.route('/uploader/<filename>')
def uploaded_file(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'],
        filename)