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

利用的是 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. OpenStack平台虚拟机实例在线迁移失败问题

    一.在线迁移时提示如下的报错 二.原因分析 通过kolla-ansible部署queens版本时,因为OEM的机器设备的UUID记录的一致,导致迁移时识别的是自身机器的UUID,导致迁移失败 三.问题 ...

  2. springboot 打包部署

    springboot内置有tomcat所以我们测试的时候没有加入自己的容器 那么我们的 springboot 怎么发布呢? 1.打成 jar 2.打成 war 这种方式我就不说了,网上有教程,我觉得j ...

  3. codeforce150A（简单的求质数问题）

    A. Win or Freeze time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  4. svn+http+ad域

    svn本地添加用户太麻烦了,如果公司有一百个开发人员要访问,要创建账号密码太麻烦了:所以让他们用AD域账号去登录就很方便,但是权限的管控还是在svn的本地添加(这个暂时还没办法很好的解决) 一.安装依 ...

  5. spark：ML和MLlib的区别

    ML和MLlib的区别如下: ML是升级版的MLlib,最新的Spark版本优先支持ML. ML支持DataFrame数据结构和Pipelines,而MLlib仅支持RDD数据结构. ML明确区分了分 ...

  6. Ubuntu16.04通过GPT挂载硬盘

    一般而言,服务器上挂载的硬盘都是比较大的,传统的对硬盘进行分区需要在终端敲sudo fdisk进行操作,但是, 当挂载的硬盘的容量大于2T的时候,是无法通过sudo fdisk进行挂载的,这个时候必须 ...

  7. tarfile — Read and write tar archive files

    参考: https://docs.python.org/2/library/tarfile.html http://www.jianshu.com/p/bbad16822eab #解压文件tarfil ...

  8. 九度OJ1036-空缺数字计算-暴力破解

    题目1036:Old Bill 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3748 解决:2053 题目描述: Among grandfather's papers a bill wa ...

  9. urllib.request中Handler处理器

    1.定义 自定义的urlopen()方法,urlopen()方法是一个特殊的opener(模块已定义好),不支持代理等功能,通过Handler处理器对象来自定义opener对象 2.常用方法 1.bu ...

  10. JSON JAVA 总结

    1.如下是我所用json第三方jar包的maven坐标 <!--可引用的jar--> <dependency> <groupId>net.sf.json-lib&l ...