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

利用的是 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. Spring异步调用注解@Async的使用

    1.pom依赖 <dependency> <groupId>org.springframework</groupId> <artifactId>spri ...

  2. php优秀框架codeigniter学习系列——前言

    php的框架众多,笔者用过的包括thinkphp,CI,smarty,laravel,也用过一些公司自己开发的框架. thinkphp是国人自己开发的,我大概用过一段时间,基本功能都还好,应该也还比较 ...

  3. python 递归进阶操作方法

    递归 在函数内部,可以调用其他函数; 如果一个函数在内部调用自身本身,这个函数就是递归函数. 例如,我们来计算阶乘: n! = 1 x 2 x 3 x ... x n, 用函数f1(n)表示,可以看出 ...

  4. Java NIO系列教程

    http://ifeve.com/overview/ http://tutorials.jenkov.com/java-nio/nio-vs-io.html

  5. freeswitch编译mod_av模块

    需要先编译libav库 编译libav下载:git clone https://freeswitch.org/stash/scm/sd/libav.git cd libav ./configure - ...

  6. IDEA发布应用时发布到lib下面的包不全

    IDEA发布应用时发布到lib下面的包不全,Tomcate启动时就报:At least one JAR was scanned for TLDs yet contained no TLDs. Enab ...

  7. 【Maven】Project configuration is not up-to-date with pom.xml错误解决方法

    导入一个Maven项目之后发现有一个如下的错误: Project configuration is not up-to-date with pom.xml. Run project configura ...

  8. JS之鼠标改变img

    代码用途: 通过点击图片,来改变图片内容 代码: <!DOCTYPE html> <html> <body> <script> function cha ...

  9. 一个跳转提示页面---JS

    //一个跳转提示页面   <script type="text/javascript">   var s=5;     function go(){        do ...

  10. PRCT-1302 the OCR has an invalid ip address

    PRCT-1302 the OCR has an invalid ip address 1. 报错信息 an internal error occurred within cluster verifi ...