php和html生成二维码带背景合成

自己在网上找了很多php生成二维码的案例，本人觉着都太麻烦了，把图片生成导入画布然后再添加元素等等。。。然后呢自己总结出经验了，本人实现的方式是，用jquery.qrcode.js先生成二维码，然后用html2canvas截图就直接合成了，我用的是thinkphp,直接建一个方法是二维码，然后生成视图，二维码页面就有了，是不是很简单，先给大家看一个我自己生成的例子

一、首先看一下我的二维码方法

实例

  public function qrcode(){

        if (Request::isGet()) {
            $sid = Request::Get("sid");
            return $this->fetch('qrcode',[
                'sid'=>$sid
            ]);
        }else{
            return $this->fetch('qrcode',[
                'sid'=>""
            ]);
        }

    }

二、HTML页面是这样的

实例

<div class="myImg" style="position:relative;">
    <img src="__STATIC__/__AI__/mabg.jpg" class="img-responsive  center-block">
    <div id="qrcode"></div>
</div>
<div class="ubtn"><a type="button" id="down_button" class="btn btn-success center-block ">点击下载图片</a></div>

三、JavaScript

实例

<script type="text/javascript" charset="utf8" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="__STATIC__/__AJ__/jquery-qrcode-0.14.0.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.4.0/html2canvas.js"></script>
<script>

    $(function(){//这是二维码方法

        $('#qrcode').qrcode({
            render:"canvas",
            background : "#fff",       //二维码的后景色
            fill: "#000",        //二维码的前景色
            size: 190,
            minVersion:6,
            quiet: 2,
            text: "http://www.sd1888.cn/?sid={$Think.get.sid}"
        });

    })
    $(document).ready(function(){//页面加载就执行截图方法，然后把原先的div隐藏就显示合成的了
        html2canvas($(".myImg"),{ // $(".myImg")是你要复制生成canvas的区域，可以自己选
            onrendered:function(canvas){
                dataURL =canvas.toDataURL("image/png");
                $("body").append(canvas);


                //下载图片
                var timestamp = Date.parse(new Date());
                $("#down_button").attr('href',canvas.toDataURL());
                //下载下来的图片名字
                $("#down_button").attr('download',timestamp + '.png') ;
                $('.myImg').hide();//这里把原先的div隐藏
            }
        })
    })
</script>