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

利用的是 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. 玩转 React【第02期】：恋上 React 模板 JSX

    往期回顾 前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻烦,而且层级结构特别不清晰.今天我们来看一种优雅的编写React的代码的 ...

  2. <YaRN><Official doc><RM REST API's>

    Overview ... YARN Architecture The fundamental idea of YARN is to split up the functionalities of re ...

  3. 20165214 实验一 Java开发环境的熟悉

    20165214 实验一 Java开发环境的熟悉 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:朱文远 学号:20165214 指导教师:娄嘉鹏 实验日期:2018年4月2日 实验 ...

  4. day 69-70 一对一 一对多 多对一联表查询

    day 69 orm操作之表关系,多对多,多对一 多对一/一对多, 多对多{类中的定义方法} day69 1. 昨日内容回顾 1. 单表增删改查 2. 单表查询API 返回QuerySet对象的: 1 ...

  5. 计数SQL，查找单据总量和按季度查找单据总量

    --查找单据总量 select COUNT(1) as '表XXXXXX数据量' from XXXXXXwith(nolock) --按季度查找单据总量 select count(1) as '表XX ...

  6. python 基础5 初级函数

    函数最重要的目的是方便我们重复使用相同的一段程序.将一些操作隶属于一个函数,以后你想实现相同的操作的时候,只用调用函数名就可以,而不需要重复敲所有的语句. def my_len(): def 关键字 ...

  7. 2.10 select下拉框

    2.10 select下拉框 本篇以百度设置下拉选项框为案例,详细介绍select下拉框相关的操作方法. 一.认识select    1.打开百度-设置-搜索设置界面,如下图所示 2.箭头所指位置,就 ...

  8. TCP三次握手及释放连接详解（转）

    一.TCP头部简介 ACK :即确认字符,在数据通信中,接收站发给发送站的一种传输类控制字符.表示发来的数据已确认接收无误.TCP报文格式中的控制位由6个标志比特构成,其中一个就是ACK,ACK为1表 ...

  9. oracle死锁测试

    测试一个死锁,看看oracle会报什么错误,以及oracle如何处理 1.创建测试表,测试数据 2.第一轮update,delete 两个会话,不同的行 3.第二轮,delete,update两个会话 ...

  10. arch/arm/Makefile:382: recipe for target 'kernel.img' failed

    /********************************************************************** * arch/arm/Makefile:382: rec ...