<!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>

效果：

URL 生成带文字二维码的更多相关文章

  1. 微信公众号开发C#系列-11、生成带参数二维码应用场景

    1.概述 我们在微信公众号开发C#系列-7.消息管理-接收事件推送章节有对扫描带参数二维码事件的处理做了讲解.本篇主要讲解通过微信公众号开发平台提供的接口生成带参数的二维码及应用场景. 微信公众号平台 ...

  2. thinkphp使用phpqrcode生成带logo二维码

    //二维码图片保存路径 $pathname = date("Ymd",time()); $pathname = "./Qrcode/" . $pathname; ...

  3. QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式

    目录 功能介绍 常见问题 效果图与示例 apk Gradle 依赖 布局文件 自定义属性说明 接口说明 关于我 功能介绍 根据之前公司的产品需求,参考 barcodescanner 改的,希望能帮助到 ...

  4. php生成带参数二维码

    1.PHPqrCode是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo, https://sourceforge.net/projects/phpqrcode/ ...

  5. Java生成带logo二维码

    目前生成二维码的方式有很多种,本例采用谷歌的zxing,去白边,添加logo等处理均在代码中有注释 demo连接 https://github.com/littlechaser/qrcode.git

  6. C#生成带Logo二维码

    1.下载ThoughtWorks.QRCode引用并添加在工程中2.在实现类QRCodeEncoderDemo中引入Dll,添加方法 using System; using System.Collec ...

  7. python生成带参数二维码

    #coding:utf8 import urllib2 import urllib import json import string import random class WebChat(obje ...

  8. PHP批量生成底部带编号二维码(二维码生成+文字生成图片+图片拼接合并)

    PHP批量生成带底部编号二维码(二维码生成+文字生成图片+图片拼接合并) 需求: 输入编号如 : cb05-0000001  至 cb05-0000500 批量生成 以编号为名称的下图二维码,然后压缩 ...

  9. PHP生成小程序二维码合成图片生成文字

    这部分代码是写在项目上的代码,THINKPHP3.1如果迁移到其他的地方应该要稍稍改动一下以适合自己的项目 function get_bbox($text,$fsize,$ffile){ return ...

随机推荐

  1. 关于ML的思考讲座-周zh-11.30日

    1.深度神经网络 1.以往神经网络采用单或双隐层结构,虽然参照了生物上的神经元,但是从本质上来说还是数学,以函数嵌套形成. 2.通常使用的激活函数是连续可微(differentiable)的,sigm ...

  2. Office 2003 2007 2010 配置进度 正在配置 解决方案 （转载）

    在安装过Office2003.2007 或者2010之后,如果没有选择全部的组件,或者是因为安装到非系统盘,有时候打开 Office 文档的时候就会出现正在配置Office,或者Office配置进度的 ...

  3. hive表与外部表的区别

    相信很多用户都用过关系型数据库,我们可以在关系型数据库里面创建表(create table),这里要讨论的表和关系型数据库中的表在概念上很类似.我们可以用下面的语句在Hive里面创建一个表: hive ...

  4. 自定义 Repository 方法

    为某一个 Repository 上添加自定义方法 步骤: 定义一个接口: 声明要添加的, 并自实现的方法 提供该接口的实现类: 类名需在要声明的 Repository 后添加 Impl, 并实现方法 ...

  5. WebService—CXF—实现接口发布和客户端调用

    (一)接口发布的几种方式 定义接口: @WebService(targetNamespace="http://www.itfad.net/queryUser") public in ...

  6. Centos 7 无法上网的解决办法

      首先,鼠标右击桌面,点击“在终端中打开”.   然后如下图所示,输入:su,按回车后输入自己的root密码:注意,输密码的时候密码区域并不显示任何东西哦,自己输错了就多按几次backspace就行 ...

  7. 20145122 《Java程序设计》第4周学习总结

    教材学习内容总结 第六章 1.在java中,子类只能继承一个父类. 2.在java中,继承时使用extends关键字,private成员也会被继承. 3.检查多态语法逻辑是否正确,方式是从=号右边往左 ...

  8. System.DateTimeKind 的用法

    最近在使用SQLite的数据库,发现SQLiteConnection类,有一个属性DateTimeKind 去msdn上找了下资料,http://msdn.microsoft.com/en-us/li ...

  9. 【eclipse】查看jar乱码问题解决

  10. SDN前瞻 软件定义网络的一些概念

    SDN的核心:可编程性 SDN的思想:SOA面向服务 面向服务的体系结构(service-oriented architecture SOA) 使网络连接的大量计算机易于合作,以 服务 而不是人工交互 ...