二维码的生成及保存为图片

直接上代码，不废话。直接复制就可以成功。qrcode去github下载：https://github.com/davidshimjs/qrcodejs

<script type="text/javascript" src="js/qrcode.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<body>
<input id="text" type="hidden" value="http://www.baidu.com"  />
<input id="text2" type="hidden" value="http://www.yahoo.com"  />
<input id="text3" type="hidden" value="http://www.sina.com.cn"  />

<center>
    <div style="margin-top:85px;">
        <div style="float:left;margin-right:50px;margin-left:50px;">
            <b style="margin-bottom:10px;display:block">百度网站二维码</b>
            <div class="box" id="qrcode2" style="width:240px; height:240px;"></div><a><div style="margin-top:20px"  onclick="printPhoto('qrcode2','百度网站二维码')"><b>下载</b></div></a>
        </div>

        <div style="float:left;margin-right:50px;margin-left:50px;">
            <b style="margin-bottom:10px;display:block">yahoo网站二维码</b>
            <div class="box" id="qrcode" style="width:240px; height:240px;"></div><a><div style="margin-top:20px"  onclick="printPhoto('qrcode','yahoo网站二维码')"><b>下载</b></div></a>
        </div>
        
        <div style="float:left;margin-right:50px;margin-left:50px;">
            <b style="margin-bottom:10px;display:block">新浪网站二维码</b>
            <div class="box" id="qrcode3" style="width:240px; height:240px;"></div><a><div style="margin-top:20px"  onclick="printPhoto('qrcode3','新浪网站二维码')"><b>下载</b></div></a>
        </div>
    </div>
</center>






<script type="text/javascript">
    $(function () {
        //第一个二维码
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 240,
            height: 240,
            correctLevel: 3
        });
        makeCode(qrcode, 'text');
        //$("#qrcode").removeAttr("title");
        //end
        //第二个二维码
        var qrcode2 = new QRCode(document.getElementById("qrcode2"), {
            width : 240,
            height: 240,
            correctLevel: 3
        });
        makeCode(qrcode2, 'text2');
        //$("#qrcode2").removeAttr("title");
        //end
        //第三个二维码
        var qrcode3 = new QRCode(document.getElementById("qrcode3"), {
            width : 240,
            height: 240,
            correctLevel: 3
        });
        makeCode(qrcode3, 'text3');
        //$("#qrcode3").removeAttr("title");
        //end
    })
        //生成二维码
        function makeCode (qrcode,divid) {        
            var elText = document.getElementById(divid);
            qrcode.makeCode(elText.value);
        }

</script>

<script>
    //这是将html传化为图片的方法
    function printPhoto(tab,picname){
            
            html2canvas(document.querySelector("#"+tab)).then(canvas => {

            // 图片导出为 png 格式
            var type = 'png';
            var imgData = canvas.toDataURL(type);
            var _fixType = function(type) {
                type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                var r = type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/' + r;
            };

            // 加工image data，替换mime type
            imgData = imgData.replace(_fixType(type),'image/octet-stream');

            //console.log(imgData);

            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 = picname + '.' + type;
            // download
                    saveFile(imgData,filename);

    });
}
</script>
</body>

 

posted @ 2019-09-12 16:51  超超go  阅读(1111)  评论(0)  编辑  收藏  举报