将一个网址转为二维码, 下面可以添加文字, 还提供下载功能

利用的是 GitHub上面的qrcode.js 和canvas

<!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.shenjp.top",

        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>

js将网址转为二维码并下载图片的更多相关文章

  1. Vue中将网址、动态网址转为二维码

    1. 首先需要安装相关的依赖包 npm install qrcodejs2 --save 或者 npm install qrcode2 --save 这里选择第二种方式进行安装,如图: 2.templ ...

  2. Springboot生成二维码并下载图片png支持打包成zip

    pom.xml <!--二维码--> <dependency> <groupId>com.google.zxing</groupId> <arti ...

  3. jquery.qrcode.min.js(支持中文转化二维码)

    详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...

  4. MyQR库自动为网址生成二维码

    首先安装MyQR库: pip install MyQR #导包 from MyQR import myqr #生成二维码 words=你要为那个网址生成二维码 save_name=保存后的图片名 pi ...

  5. js生成二维码以及插入图片

    先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入demo中,审查元素查看里面引用的 ...

  6. Asp.Net 合并图片(二维码和其他图片合并)

    需求:根据网址生成二维码,然后再把二维码生成到背景图片上,然后显示在网页中 pic.ashx <%@ WebHandler Language="C#" Class=" ...

  7. jquery生成二维码并实现图片下载

    1.引入jquery的两个js文件 <script src="../scripts/erweima/jquery-1.10.2.min.js"></script& ...

  8. pbfunc外部函数扩展应用-直接在Datawindow中生成QR二维码，非图片方式

    利用pbfunc外部函数在Datawindow中直接生成QR二维码,非图片方式.需要注意以下面几点: Datawindow的DataObject的单位必须为像素(Pixels). Datawindow ...

  9. 用一个二维码做下载地址，自动区分是 ios 还是 android

    用一个二维码做下载地址,自动区分是 ios 还是 android, 甚至区分 iphone  和 ipad. <html> <head> <meta http-equiv ...

随机推荐

  1. ubuntu 实用命令收集

    dig 查看域名解析 最下面server为DNS解析地址 dig google.com sudo -s 转为root方式 curl ip.gs 获取本机外网的ip地理地址 开启ipv4转发功能 /et ...

  2. adb devices连接不上设备

    1.端口被占用 解决办法:netstat -aon|findstr "5037",找到占用5037这个端口的进程,然后根据pid在任务管理器里面找到进程然后结束 2.插拔usb数据 ...

  3. 2019-03-28-day021-抽象类与接口类

    今日内容 type和class 继承 抽象类 接口类 多态 java 鸭子类型 pickle模块 collections.namedtuple type和class ##type ##class pr ...

  4. 【Think in java读书笔记】序列化

    Java的对象序列化将那些实现了Serializable接口的对象转换成一个字节序列,并能够在以后将这个字节序列完全恢复成为原来的对象. 序列化机制能自动弥补不同操作系统之间的差异,也就是说在Wind ...

  5. react native 第三方组件

    react native 的成功离不开优秀的第三方组件,以下是我见过的一些优秀或者有用的RN第三方组件 按钮 APSL/react-native-button 导航 react-native-simp ...

  6. RPi 3B 无线连接配置

    /********************************************************************** * RPi 3B 无线连接配置 * 说明: * 树莓派3 ...

  7. 求强连通分量Tarjan算法

    ]; // 时间戳 ; // 时间 ]; // 节点u所能访问到的最小时间戳 ]; // 节点u是否在栈中. ]; ; // 我们维护的信息. ]; // 给节点染色, 同一个连通块的节点应该是同一个 ...

  8. [LeetCode&Python] Problem 888. Fair Candy Swap

    Alice and Bob have candy bars of different sizes: A[i] is the size of the i-th bar of candy that Ali ...

  9. 20155219 2016-2017-2 《Java程序设计》第8周学习总结

    20155219 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 通用API 日志API 1.java.util.logging包提供了日志功能相关类与接口, ...

  10. No setter found for property 'cronExpression' in class 'org.springframework.scheduling.quartz.CronTriggerBean'

    今天想写个Spring集成Quartz的小Demo,结果报错cronExpression未定义,通过差错,原来是因为Spring 3.0.5与Quartz2.2.2不兼容,Spring3.1以下的只能 ...