{% extends 'yolo/collectBase.html' %}
{% block body %}

{% if user_id != '002' %}
<div role="tabpanel">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
        <li>
            <a href="/detect">
                <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
            </a>
        </li>
        <li class="active">
            <a href="/detectCompress">
                <span class="glyphicon glyphicon-stop" aria-hidden="true"></span>
            </a>
        </li>
    </ul>
</div>
{% endif %}

<div class="container">
    <form action="/detectCompress" method="post">
        <legend>图像检测</legend>
        <div id="upload">
            <label for="file" class="lead" >提交照片：</label>
            <input type="file" name="img" id="file" class="form-control" />
            <input hidden type="text" name="isHorizontal" id="isHorizontal">
        </div>
    </form>
    <div hidden id="submitted">
        <p>图像已提交，正在上传和处理，请稍后。</p>
        <a href="/detectCompress" class="btn btn-info">重新上传</a>
    </div>

    <img hidden src="" id="show" width="100">

    <hr />
    <div id="resultBox">
        <p id="result"></p>
        <img id="src" src="" class="img-responsive">
    </div>
</div>

<script>
    var isHorizontal = 'true';
    function changepic() {
        var reads = new FileReader();
        let f = document.getElementById('file').files[0];
        reads.readAsDataURL(f);
        reads.onload = function (e) {
            document.getElementById('show').src = this.result;
        };
    }
    function judgeIfHorizontal() {
        var theImage = new Image();
        theImage.src = $("#show").attr("src");
        if (theImage.width/theImage.height < 1){
            isHorizontal = '';
        }
    }
    $(function(){
        var input = document.querySelector('input');
        input.onchange = function () {
            changepic();
            setTimeout('judgeIfHorizontal()', 200);
            if(isHorizontal) $('#isHorizontal').val('1');
            $('#upload').hide(); //避免重复上传
            $('#submitted').show(); //提示可以重新上传
            $('#resultBox').hide(); //隐藏上次的结果
            // 也可以传入图片路径：lrz('../demo.jpg', ...
            lrz(this.files[0], {
                // 压缩成功
                done: function (results) {
                    // 你需要的数据都在这里，可以以字符串的形式传送base64给服务端转存为图片。
                    // console.log(results);
                    $(function() {
                        $.post(
                            '/detectCompress',
                            {"imgBase64" : results.base64, 'isHorizontal':isHorizontal},
                            function(data){
                                $('#submitted').hide();
                                $('#upload').show();
                                $('#result').text(data['result']);
                                $('#src').attr('src',data['src']);
                                $('#resultBox').show();
                            }
                        )
                    })
                }
            });
        }
    
    })
</script>
{% endblock %}