{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">
                <div class="text-center">
<!--                    <div id="printer" class="text-center" style="width: 300px;padding-top:10px;padding-bottom:10px;margin: 0 auto;text-align: center;">-->
<!--                        &lt;!&ndash;<img src="{:url('Qrcode/qrcode',[],'')}?code={$code}" width="300"  alt="">&ndash;&gt;-->
<!--                        <img src="/admin/img/goods_card.jpg" width="300"  alt="">-->
<!--                        <img style="position: absolute;margin-top: 49px;margin-left: -283px" src="{:url('Qrcode/qrcode',[],'')}?code={$code}" width="96" alt="">-->
<!--                        <h5 style="position: absolute;font-weight:bold;margin-left: 200px;margin-top: -89px;text-align: center">{$info.title}</h5>-->
<!--                        <h5 style="position: absolute;font-weight:bold;margin-left: 200px;margin-top: -68px;text-align: center">{$info.brand}</h5>-->
<!--                        <h5 style="position: absolute;font-weight:bold;margin-left: 200px;margin-top: -44px;text-align: center">{$info.spec}</h5>-->
<!--                    </div>-->

                    <div id="printer" class="text-center" style="width: 300px;padding-top:10px;padding-bottom:10px;margin: 0 auto;text-align: center;">
                        <style>
                            .pbox{
                                width: 300px;
                                height: 157px;
                                position: relative;
                            }
                            .pbox .qrimg{
                                display: inline-block;
                                position: absolute;
                                top: 48px;
                                left: 18px;
                                width: 96px;
                                height: 96px;
                                z-index: 10;
                            }
                            .pbox .ptitle{
                                position: absolute;
                                top: 54px;
                                left: 156px;
                                width: 126px;
                                height: 25px;
                                line-height: 25px;
                                overflow: hidden;
                            }
                            .pbox .pbrand{
                                position: absolute;
                                top: 75px;
                                left: 156px;
                                width: 126px;
                                height: 25px;
                                line-height: 25px;
                                overflow: hidden;
                            }
                            .pbox .pspec{
                                position: absolute;
                                top: 98px;
                                left: 156px;
                                width: 126px;
                                height: 25px;
                                line-height: 25px;
                                overflow: hidden;
                            }
                        </style>
                        <div class="pbox">
                            <img src="/admin/img/goods_card.jpg" width="300"  alt="">
                            <img class="qrimg" src="{:url('Qrcode/qrcode',[],'')}?code={$code}" alt="">
                            <h5 class="ptitle">{$info.title}</h5>
                            <h5 class="pbrand">{$info.brand}</h5>
                            <h5 class="pspec">{$info.spec}</h5>
                        </div>
                    </div>

                    <a href="javascript:;" class="btn btn-sm btn-primary" onclick="print()">
                        <i class="glyphicon glyphicon-print">打印</i>
                    </a>
                    <a href="javascript:;" class="btn btn-sm btn-primary" onclick="down()">
                        <i class="fa fa-cloud-download">下载</i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/static/browser.js"></script>
<script src="/static/jquery.jqprint-0.3.js"></script>
<script src="/static/html2canvas.min.js"></script>

<script>
    function print(){
        $("#printer").jqprint();
    } function down() {
        var canvas2 = document.createElement("canvas");
        let _canvas = document.querySelector('#printer');
        var w = parseInt(window.getComputedStyle(_canvas).width);
        var h = parseInt(window.getComputedStyle(_canvas).height);
        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * 4;
        canvas2.height = h * 4;
        canvas2.style.width = w * 4 + "px";
        canvas2.style.height = h * 4 + "px";
        //可以按照自己的需求，对context的参数修改,translate指的是偏移量
        //  var context = canvas.getContext("2d");
        //  context.translate(0,0);
        var rect = $('#printer').get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
        var context = canvas2.getContext("2d");
        context.scale(4, 4);
        //  context.translate(rect.left, -rect.top);
        html2canvas(document.querySelector('#printer'), {
            // canvas: canvas2,
            //allowTaint : false,
            taintTest: true,
            useCORS: true,
        }).then(function (canvas) {
            var saveFile = function (data, filename) {
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = data;
                save_link.download = filename;

                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
            };
            //最终文件名
            var filename = '{$info.title}.png';
            saveFile(canvas.toDataURL(), filename);

        });
    }
</script>
{/block}