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


    直接上代码,不废话。直接复制就可以成功。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="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="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="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>
  • 相关阅读:
    Bytom资产发行与部署合约教程
    币币合约执行解析(包含部分源码)
    Bytom猜谜合约使用指南
    Bytom移动端钱包SDK开发基础
    Bytom矿池接入协议指南
    Bytom交易说明(UTXO用户自己管理模式)
    Derek解读Bytom源码-创世区块
    Derek解读Bytom源码-持久化存储LevelDB
    编写生成彩色验证码的Servlet
    最长公共子序列问题
  • 原文地址:https://www.cnblogs.com/573734817pc/p/11512753.html
Copyright © 2020-2023  润新知