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

时间：2024-04-14 20:59:26

直接上代码，不废话。直接复制就可以成功。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>

 

相关文章