精华内容
下载资源
问答
  • js生成二维码图片并打印

    热门讨论 2016-02-24 09:22:13
    技术:js ,jquery ,jquery.jqprint-0.3.js来打印图片,jquery.qrcode.min.js生成二维码,另参杂多项前端小技术,例如:CANVAS转换图片,IMG添加id,js定时器,新窗口弹出....所有一应插件均已完善,不用多余下载和...
  • 独立的js引用文件,源码和min.js文件。含index.html的demo测试文件,只需引用一个方法即可生成二维码。通俗易懂。
  • 通过网页根据用户的输入信息生成二维码,并下载到本地;文件包括:erweima.html,qrcode.js, jquery.js;支持中文生成二维码
  • 现如今,二维码无处不在,扫一扫送抽纸,那么基于js二维码是如何生成的呢?面对这一问题,下面小编给分享一代码介绍javascript生成二维码图片小结,感兴趣的朋友一起学习吧
  • 使用js生成二维码

    2019-03-05 10:40:15
    使用前端技术JavaScript生成二维码,减少后台生成二维码图片带来的服务器压力。
  • JS生成二维码图片并下载,二维码可带logo 一 JS生成二维码图片 参考链接:菜鸟教程https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html 这个链接里面的代码可以直接运行,也可以把里面提到的github...

    JS生成二维码图片并下载,二维码可带logo

    一 JS生成二维码图片

    参考链接:菜鸟教程QRCode.js:使用 JavaScript 生成二维码
    上面链接里面的代码可以直接运行,也可以把里面提到的github(https://github.com/davidshimjs/qrcodejs)上的文件克隆到本地后运行一下,这样你会有更直观的感受。重点代码如下

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="qrcode.js"></script>
    
    
    var makeQrCode = function (data) {
            var qrcode = new QRCode(document.getElementById("qrcode"), {
                width: 200,
                height: 200
            });
            qrcode.makeCode(data);
        };
    

    上面代码中的data就是二维码所要包含的信息,可以是一个链接或一段文字。
    生成了最基本的二维码,尝试到成功的喜悦之后。考虑到客户可能要求二维码中间带logo,要求二维码可以下载保存。所以继续尝试。

    二 生成带logo的二维码

    参考帖子:HTML5笔记:利用JS生成中间带logo的二维码
    这个链接非常好,里面把依赖的js文件都分享出来了,再也不用花积分下载了

    <script type="text/javascript" src="jquery-1.8.0.js"></script>
    <script type="text/javascript" src="utf.js"></script>
    <script type="text/javascript" src="jquery.qrcode.js"></script>
    
    var makeQrCode = function (data) {
        // 生成带logo的二维码
        $('#qrcode').qrcode({
           render : 'canvas',    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好
           text : data,    //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接
           width : '200',               //二维码的宽度
           height : '200',              //二维码的高度
           src: 'logo_qrCode.jpg'
        });
    };
    

    就这样,带logo的二维码就有了。但是我发现了一个问题。二维码中间的logo是方角的,没办法调整格式。水平有限只能做到这里了。下面对比一下JS和C#生成的二维码
    JS生成的二维码
    C#生成的二维码

    此外,开发时我还遇到了两个问题

    1. 我的代码是写在项目里的,src的值,也就是logo的路径写的有问题,图片加载不到,导致生成的二维码不带图片。
    2. 我是.net项目,用的力软的敏捷开发框架。打印功能也是用的力软封装的,带logo的二维码没法打印。不知道怎么回事。

    三 二维码下载

    通过下载按钮点击事件,触发下载图片。
    参考链接不记得了,网上看到写法很多,我只找了一个,能用就行

     $('#qrCode_download').on('click', function () {
                    downloadQrcode();
                });
    //picName是保存图片的名称,在这里是一个变量
    function downloadQrcode() {
            let myCanvas = document.getElementById('qrcode').getElementsByTagName('canvas');
            let a = document.createElement('a');
            a.href = myCanvas[0].toDataURL('image/png');
            a.download = picName;
            a.click();
        }
    
    展开全文
  • 自动生成二维码,可设置二维码样式;自动生成二维码,可设置二维码样式;自动生成二维码,可设置二维码样式;自动生成二维码,可设置二维码样式;
  • 通过js生成二维码,内含jquery.js和jquery.qrcode.min.js可供微信QQ等扫描兼容各种浏览器及手机端
  • 生成二维码数据的主要代码来自,因为它这个里面生成二维码图片的功能在微信小程序里不能使用,我将这个功能改写成可以在微信小程序中使用。 截图 背景图测试中...(页面pages/test/test) 使用(自适应版本,使用rpx...
  • JS生成二维码

    千次下载 热门讨论 2015-12-30 23:04:52
    JS生成二维码,兼容各种浏览器及手机端,支持中文。
  • 主要介绍了JS实现将链接生成二维码并转为图片的方法,涉及qrcodejs插件及js图片生成相关操作技巧,需要的朋友可以参考下
  • js链接生成二维码并实现保存二维码到本地
  • js生成二维码源代码

    2016-09-22 11:28:50
    js生成二维码源代码 包含js库文件,点击qcode.html即可使用 qrcode.js jquery.min.js jquery.qrcode.js jquery.qrcode.min.js
  • 主要介绍了nodejs实现超简单生成二维码的方法,结合实例形式分析了nodejs基于qr-image插件生成二维码的相关操作技巧,需要的朋友可以参考下
  • js生成二维码&添加logo图片 使用不同的方式源码与demo
  • JS生成二维码程序

    2018-01-30 15:28:57
    js生成二维码,测试通过了的,可以用,欢迎大家下载使用。
  • 利用JS生成二维码

    2017-12-14 23:27:30
    利用封装好的 "jquery.min.js" 和 "jquery.qrcode.min.js"可生成二维码
  • js生成二维码并打印

    2016-02-22 18:56:41
    技术:js ,jquery ,jquery.jqprint-0.3.js来打印图片,jquery.qrcode.min.js生成二维码,另参杂多项前端小技术,例如:CANVAS转换图片,IMG添加id,js定时器,新窗口弹出....所有一应插件均已完善,不用多余下载和...
  • JavaScript生成二维码

    2020-03-17 10:33:03
    JavaScript实现生成二维码,非常简单,直接使用就行,都不用改代码。 二维码又称二维条码,常见的二维码为QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形...
  • jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码。此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb。因为它是直接在客户端生成的...
  • 新版之后的js批量生成二维码!!!之前的上传的还没有改善, 没将canvas转成img 的url (主要是快下班啦!不好意思)
  • 下面记录的是小程序中生成二维码图片这一操作,用的是原文作者改版后的生成二维码工具weapp-qrcode.js(demo的众多文件中只需将util下的这个文件拷贝到自己项目中),可在原文地址里clone demo。 截图(copy原文) ...
  • js生成带边框二维码

    2018-09-14 09:34:31
    在前端js生成需要的二维码,方便,操作简单,可以直接使用。在网上找了很多代码,生成二维码都不带边框,而项目要求是必须带,所以找了个带边框的。
  • 使用qrcode.js生成二维码图片

    千次阅读 2017-06-19 16:28:59
    Javascript 二维码生成库:QRCode var qrcode = new QRCode(document.getElementById("qrcode"), { width : 100, height : 100 }); function makeCode () { var elText = document.getElementById(...
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
    <head>
    <title>Javascript 二维码生成库:QRCode</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
    </head>
    <body>
    <input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br />
    <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
    
    <script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
    	width : 100,
    	height : 100
    });
    
    function makeCode () {		
    	var elText = document.getElementById("text");
    	
    	if (!elText.value) {
    		alert("Input a text");
    		elText.focus();
    		return;
    	}
    	
    	qrcode.makeCode(elText.value);
    }
    
    makeCode();
    
    $("#text").
    	on("blur", function () {
    		makeCode();
    	}).
    	on("keydown", function (e) {
    		if (e.keyCode == 13) {
    			makeCode();
    		}
    	});
    </script>
    </body>
    </html>
    

    展开全文
  • 实现前端生成二维码的插件,添加插件后,只需要简单的demo就可以实现代码。资源包括demo代码
  • js生成二维码

    万次阅读 多人点赞 2021-02-27 10:21:21
    js生成二维码一、一个简单的示例 前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js 插件。 一、一个简单的示例 如下:(仅供参考) <%-- ...

    前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js 插件


    插件链接: qrcode.js下载地址,点击即可下载,不需C币.

    一、一个简单的示例

    如下:(仅供参考)

    <%--
      Created by IntelliJ IDEA.
      User: ASUS
      author:xumz
      Date: 2021/2/27
      Time: 10:33
      搬运请备注
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <html>
    <head>
        <script charset='utf-8' type='text/javascript' src='js/jquery-1.11.0.js'></script>
        <script src="js/qrcode.min.js" type="text/javascript"></script>
    </head>
    <body>
    
    <h1>输入URL以生成二维码</h1>
    <div>
        <label for="qr_link">URL:</label>
        <input id="qr_link" type="text" value="hello er wei ma !!" style="width:460px;"/>
        <input type="button" id="qr_creat" value="生成">
        <p>生成的二维码可以通过手机任意扫描工具,查看其二维码信息</p>
        <br/>
    </div>
    <br>
    <div id="qr_container" style="margin:auto; position:relative;"></div>
    
    <script type="text/javascript">
        //点击生成按钮以后
        document.getElementById("qr_creat").onclick = function() {
            var qrcode = new QRCode(        //实例化生成二维码
                document.getElementById("qr_container"), {//二维码存放的div
                    width: 160, //设置宽高
                    height: 160,
                }
    
            );
    
            //根据input框的值生成二维码
            qrcode.makeCode($('#qr_link').val());
           $("#qr_container").append("<br><br>");   //换行
        }
    </script>
    
    </body>
    </html>
    
    

    代码运行效果如下图:
    在这里插入图片描述

    二、二个简单的示例

    第二个例子用到了layui的一些元素layui下载地址
    引入layui.all.js和layui.css即可
    在这里插入图片描述

    scanQR.jsp如下:

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <title>test1</title>
        <%--注意引用和地址--%>
        <script src="js/qrcode.min.js"></script>
        <script src="js/jquery-1.11.0.js"></script>
        <script type="text/javascript" src="js/layui/layui.all.js"></script>
        <link type="text/css" rel="styleSheet" href="js/layui/css/layui.css"/>
    </head>
    <body>
    
    <div align="center">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="skipHandle()">预览</button>
    </div>
    
    <div id="code" style="display: none;">
        <div id="qrcode" style="margin-left: 75px;margin-top: 20px"></div>
    </div>
    
    <script>
    
        layui.use(['layer'], function () {
            var layer = layui.layer
        });
    
        // 设置要生成二维码的链接
        new QRCode(document.getElementById("qrcode"), {
            text: 'https://blog.csdn.net/bug_producter/',//注意地址的修改
            width: 250,
            height: 250
        });
    
        //预览等弹出框
        function skipHandle() {
            layer.open({
                type: 1,
                title: "bug_producter的博客",//标题
                area: ['400px', '400px'],
                content: $('#code').html(),
            });
        }
    
    </script>
    </body>
    </html>
    
    

    运行效果如下:
    在这里插入图片描述
    在这里插入图片描述
    这是博主刚刚生成的一个二维码,扫描后会跳转到博主的主页,用手机浏览器,或者微信QQ…等等都可以扫描扫描,关键代码就这一句 text: ‘https://blog.csdn.net/bug_producter/’

    有兴趣的小伙伴可以转到,

    手机访问本地Tomcat服务器

    在这篇文章的最后 重点 哪儿,也有关于二维码的内容,会追加一个例子的文件

    创作不易,如果这篇文章能够帮助到你,希望能关注或收藏一下博主,如果文章内容有问题也可留言讨论,我们一起学习,一起进步!!

    展开全文
  • 主要介绍了Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 利用jquery的jquery.qrcode.js生成二维码,并且canvas转成图片,方便移动端保存和识别二维码进行其他的操作。如有不足处,请各位大佬批评指导。
  • 本文给大家介绍js动态生成二维码图片的相关内容,感兴趣的朋友一起学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 24,619
精华内容 9,847
关键字:

js生成二维码图片