<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
</head>
<body>
<div id="QRcode"></div>
<a class="QR-download" href="#" download>下载</a>
<script src="http://www.wangyulue.com/assets/js/qrcode.js"></script>
<script src="http://www.wangyulue.com/assets/js/html2canvas.min.js"></script>
<script>
    /**
     *  输出一个带有文字说明的二维码。
     * 
     *  @param {Object} obj 相关配置，
     *  obj = {
            dom : "QRcode",     //
            url : "http://www.wangyulue.com",  //二维码网址
            text : ["王玉略的个人网站","Stay Hungry, Stay Foolish."], //二维码的文字说明
            pic_size : 300, // 图片的尺寸大小
            font_size : 16, //说明文字的字体大小
        }
     *  回调函数中返回一个base64形式的图片，以便在回调中注入到<a>标签中下载使用
     * 
     */
    function getQRcodeImg(obj,fn){
        var url = obj.url,
            size = obj.pic_size || 256;
            font_size = obj.font_size || 18;
        dom = document.getElementById(obj.dom);
        dom.innerHTML = generateHTML(obj.text,size,font_size);
        var $qrcode = dom.getElementsByClassName("QR-qrcode")[0],
            $main = dom.getElementsByClassName("QR-main")[0];
        new QRCode($qrcode, {
            text: url,
            width: size,
            height: size,
        });
        html2canvas($main).then(function(canvas) {
            var base64 = concatCanvas(dom,$qrcode.getElementsByTagName("canvas")[0],canvas,20);
            fn && fn(base64);
        });
        /**
        * 根据配置拼凑要处理的html代码
        * 
        * @param {Array} arr 要添加的文字，以数组传入
        *  
        */
        function generateHTML(arr,size,font_size){
            var out = "",temp = "";
            arr.forEach(function(item){
                temp += "<div style=\'text-align:center;font-size:" +font_size+ "px;\'>"+ item +"</div>" ;
            }) 
            out =
                "<div style=\'position:absolute;opacity:0;\'>" +
                    "<div class=\'QR-main\' style=\'width: " +size+ "px;\'>" +
                        temp +
                    "</div>" +
                "</div>" +
                "<div class=\'QR-qrcode\' style=\'display:none;\'></div>";
            return out ;
        }
        /**
        * 将两个canvas合并在一起
        * 
        * @param {Object} dom canvas要添加的dom对象
        * @param {Object} canvas1 第一个canvas
        * @param {Object} canvas2 第二个canvas
        * @param {Number} padding 图片的padding，默认20
        * @return {String} 返回base64字符串
        *  
        */
        function concatCanvas(dom,canvas1,canvas2,padding){
            var c1h = canvas1.height,
                c1w = canvas1.width,
            //    c2h = canvas2.height, 
            //    c2w = canvas2.width,
            /*    说明：将以上两行代码改为以下两行代码；
             *    原因：以上两行代码在window下显示是好的，但是放到Mac下显示会出一些问题，
             *         仔细发现是在Mac下,html2canvas的API返回的canvas不符合预期，在MAC环境canvas返回如下：
             *         html2canvas($main).then(function(canvas) {
             *             console.log(canvas); //<canvas width="600" height="88" style="width: 300px; height: 44px;"></canvas>
             *         });
             *         可以看到看到canvas的width和height值和其style里的width和height的值有所不同，
             *         于是采用以下的方法来获得canvas的宽度和高度
             *         王二认为出现以上问题可能是因为分辨率的问题
             */
                c2h = Number(canvas2.style.height.slice(0,-2));
                c2w = Number(canvas2.style.width.slice(0,-2));
                canvas = document.createElement("canvas");
                padding = padding || 20 ;
            /** 根据二维码、文字两个canvas，再加上padding计算出新的canvas的宽度和高度 **/
            canvas.height = c1h + c2h + 2.5 * padding ;
            canvas.width = Math.max(c1w,c2w) + 2 * padding ;
            /** end **/
            dom.appendChild(canvas);
            /** 将canvas画上白色背景 **/
            context = canvas.getContext("2d");
            context.fillStyle ="white";
            context.fillRect(0,0,canvas.width,canvas.height);
            /** end **/
            /** 将二维码、文字两个canvas绘画到一个canvas里 **/
            context.drawImage(canvas1, padding, padding, c1w ,c1h);
            context.drawImage(canvas2, padding, 1.5 * padding+c1h, c2w ,c2h);
            /** end **/
            /** 返回base64,用于注入到a标签里以便下载 **/
            return canvas.toDataURL(\'image/jpeg\',1);
            /** end **/
        }
    }
    var obj = {
        dom : "QRcode",
        url : "http://www.wangyulue.com",
        text : ["王玉略的个人网站","Stay Hungry, Stay Foolish."], 
        pic_size : 300, 
        font_size : 16, 
    }
    getQRcodeImg(obj,function(base64){
        document.getElementsByClassName("QR-download")[0].href = base64 ;
    });
    
</script>
</body>
</html>

 

 效果：

 

版权声明：本文为web-fusheng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/web-fusheng/p/10050739.html