@extends('layouts.app')

@section('content')
    <div class="container" id="container">
        <div class="form-group">
            <input id="file" type="file" class="form-control-file">
            <button class="btn btn-primary" type="button" @click="uploadFile">上传</button>
        </div>
        <svg id="barcodeDiv" style="width: 2px;height: 200px">
        </svg>
        <svg id="barcodeDiv1" style="width: 2px;height: 200px">

        </svg>
        <div><img src="{{asset('icon/faviconc.ico')}}" alt=""></div>

        <button class="btn btn-primary" @click="deduction">截图</button>

    </div>
@endsection

@section("lastScript")
    <script type="text/javascript" src="{{mix('js/utilities/barcode.js')}}"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
    <script>
        let vue = new Vue({
            el:"#container",
            data:{

            },
            mounted() {
                window.setBarcode("0123456789","#barcodeDiv1",2,50,false)
            },
            methods:{
                uploadFile(){
                    let formData = new FormData();
                    //第一个参数key和表单中的name的值是一个意思canvascanvas
                    //第二个参数是文件的数据对象
                    formData.append('file',document.getElementById('file').files[0]);
                    window.axios.post("http://127.0.0.1:3000",formData).then(res=>{
                        console.log(res);
                    }).catch(err=>{
                        console.log(err);
                    })
                },
                deduction(){
                    html2canvas(document.body).then(function(canvas) {
                        document.body.appendChild(canvas);
                    });
                }

            },

        })
    </script>
@stop