精华内容
下载资源
问答
  • 独立的js引用文件,源码和min.js文件。含index.html的demo测试文件,只需引用一个方法即可生成二维码。通俗易懂。
  • 使用js生成二维码

    2019-03-05 10:40:15
    使用前端技术JavaScript生成二维码,减少后台生成二维码图片带来的服务器压力。
  • 原生js-二维码生成

    2021-08-30 23:52:34
    点击生成二维码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <meta name="format-detection" content="telephone=no">
            <title> </title>
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="apple-mobile-web-app-status-bar-style" content="black">
            <link rel="stylesheet" href="css/mui.min.css">
            <style>
                .code{
                    margin-top: 50px;
                    margin-left: 50px;
                    width: 200px;
                    height: 200px;
                    text-align: center;
                }
            </style>
        <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
            <script src="js/mui.min.js"></script>    
            
        </head>
        

        <body>
            <header class="mui-bar mui-bar-nav">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
                <h1 class="mui-title"> </h1>
            </header>
            <div class="mui-content">
            
                <input type="text" name="" id="text" value="" placeholder="http://www.baidu.com" />
                <div class="code" id="qrcode"> 
                
                </div>
                <button class="mui-btn-block" id="Dic">点击生成二维码</button>
            <div>

        
            <script>
        var qrcode = new QRCode(document.getElementById("qrcode"), {
                text: "http://www.runoob.com",
                width: 128,
                height: 128,
                colorDark : "#000000",
                colorLight : "#ffffff",
                correctLevel : QRCode.CorrectLevel.H
        });
        function makeCode () {
            var elText = document.getElementById("text").value;
            console.log(elText);
            qrcode.makeCode(elText);
        }
        

        document.getElementById('Dic').addEventListener('tap',function () {
                makeCode();
                
        })
        
            </script>
        </body>

    </html>

    展开全文
  • 可以兼容手机识别,解决了手机长按的时候 光标错位问题
  • 实现前端生成二维码的插件,添加插件后,只需要简单的demo就可以实现代码。资源包括demo代码
  • JS实现二维码生成

    2017-02-16 15:56:47
    纯正JS实现二维码生成,代码规范,直接运行
  • 利用QRCode.js可以制作在线的二维码生成器,同时通过他可以自定义二维码的样式,属性等,使二维码的样式更加丰富,多彩!
  • js实现特定字符生成二维码
  • script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js">script> ...
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
    
        <!-- 方案一 -->
        <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
        <div id="qrcode1" style="margin-bottom: 100px;"></div>
        <script>
            var qrcode = new QRCode(document.getElementById('qrcode1'), {
                text: "https://www.csdn.net/",
                width: 100,
                height: 100,
                colorDark: '#000',
                colorLight: "#ffffff"
            });
        </script>
    
        <!-- 方案二 ,该方法依赖jquery库-->
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
        <div id="qrcode2"></div>
        <script>        
            $('#qrcode2').qrcode({
                render: 'canvas', // 或 table
                height: 100,
                width: 100,
                text: "https://www.csdn.net/",
                typeNumber: -1, // 计算模式
                correctLevel: 2, // 二维码纠错级别
                background: "#ffffff", // 背景颜色
                foreground: "#000000" // 二维码颜色
            })
        </script>
    </body>
    
    </html>
    

    更多相关内容大家可以前往我的个人博客浏览:eyes++的个人空间

    展开全文
  • js生成二维码的几种方法

    万次阅读 2019-11-04 14:34:37
    一:arale-qrcode arale-qrcode GitHub路径 npm i arale-qrcode <html> <body> <div id="share_tools">...script src="qrcode.min.js"></script> </body> ...

    一:arale-qrcode

    arale-qrcode GitHub路径

    npm i arale-qrcode
    
    <html>
      <body>
    	 <div id="share_tools"></div>
        <script src="qrcode.min.js"></script>
      </body>
      <script type="text/javascript">
      	var codeFigure = new AraleQRCode({
      		"render":  "svg",  // 生成的类型 'svg' or 'table'
      		"text":'https://github.com/soldair/node-qrcode', // 需要生成二维码的链接
      		"size": 120 // 生成二维码大小
      	});
    	var share_tools = document.querySelector('#share_tools');
    	share_tools.appendChild(codeFigure);
      </script>
    </html>
    

    二:QRCode.js

    GitHub地址

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<div id="qrcode"></div>
    		<script type="text/javascript" src="qrcode.js"></script>
    		<script type="text/javascript">
    			new QRCode(document.getElementById("qrcode"), "https://github.com/davidshimjs/qrcodejs");
    			var qrcode = new QRCode(document.getElementById("qrcode"), {
    				text: "生成二维码的方法不止一种",
    				width: 128,
    				height: 128,
    				colorDark : "#f60",
    				colorLight : "#ccc",
    				correctLevel : 0 // 二维码结构复杂性 0~3
    			});
    		</script>
    	</body>
    </html>
    
    

    在这里插入图片描述

    三:QR码生成器

    api简介

    <img style="width: 300px;height: 300px;" src="https://api.qrserver.com/v1/create-qr-code?data=http://goqr.me/api/" >
    

    在这里插入图片描述

    展开全文
  • 一、原生js生成二维码(用qrcode) html部分 <div class="main"> <div id="qrcodeHide" class="qrcode-hidden"></div> <div id="qrcode" class="qrcode"></div> </div> js...

    一、原生js生成二维码(用qrcode)

    html部分

    <div class="main">
    	<div id="qrcodeHide" class="qrcode-hidden"></div>
    	<div id="qrcode" class="qrcode"></div>
    </div>
    

    js部分

    //qrcode.min.js的下载地址为https://github.com/1429880240/qrcodejs
    <script src="./js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var url = 'https://www.baidu.com';  //生成的二维码要跳转的地址
        var qrHiddenBox = document.getElementById("qrcodeHide")
        var qrbox = document.getElementById("qrcode")
        new QRCode(qrHiddenBox, url);
        //在小米或者华为手机上生成的二维码是通过canvas展示的,img标签被隐藏,所以需要特殊处理一下,将canvas标签隐藏,拿到生成的url放到img里面再展示出来
        var myCanvas = document.getElementsByTagName('canvas')[0];
        var image = new Image();
        image.src = myCanvas.toDataURL("image/png");
        qrbox.append(image);
    </script>
    

    二、uni-app生成二维码

    1、直接生成二维码(缺点:无法设置图片logo)

    html部分

    <view class="container">
    	<image :src="qr"></image>
    </view>
    

    js部分

    //先引入引入wxqrcode.js,下载地址:链接: https://pan.baidu.com/s/1iEHNl-_F8kGwRDV-enMz5Q 密码: c4hm)
    import Qr from "@/util/wxqrcode.js"
    methods: {
    	getQr(){
    		this.qr = Qr.createQrCodeImg('https://www.baidu.com') //生成二维码的地址,以百度为例
    	},
    }
    

    2、引入uni-app的tki-qrcode插件(可以设置图片logo)

    html部分

    <view class="qrimg">
        <tki-qrcode
        :val="val"
        :size="size"
        :icon="icon"
        :iconSize="iconsize"
        :onval="onval"
        :loadMake="loadMake"/>
    </view>
    

    js部分 (插件的下载地址:https://github.com/q310550690/uni-app-qrcode )

    import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
    export default {
        components: {tkiQrcode},
        data() {
    		return {
    			val: 'https://www.baidu.com',
    			size: 180,
    			loadMake: true,
    			onval: true,
    			icon: '../../static/imgs/ewm-logo.png',
    			iconSize:50
    		};
    	},
    }
    

    属性说明
    在这里插入图片描述
    效果图
    在这里插入图片描述

    展开全文
  • 条形码:JsBarcode 官网:https://lindell.me/JsBarcode/ npm: https://www.npmjs.com/package/jsbarcode 二维码:qrcode npm: https://www.npmjs.com/package/qrcode#qr-code-options
  • 原生 js 生成二维码

    2021-04-22 20:53:11
    js生成二维码 使用kjua生成二维码 官网:https://larsjung.de/kju 使用方法 在官网下载js文件,在页面中引用即可,原生js实现,不需要引用其他依赖。 <!DOCTYPE html> <html> <head> &...
  • js代码里链接生成二维码

    千次阅读 2018-09-21 16:49:08
    html里代码: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&...script type='text/javascript'src='http://cdn.staticfile.org/jquery/2.1.1/jque
  • JS生成带logo的二维码DEMO,带js包,亲自尝试,已适用于项目
  • 1.引入依赖包 2.编写二维码内容 3.qrcode()绑定二维码
  • JS生成二维码图片并下载,二维码可带logo 一 JS生成二维码图片 参考链接:菜鸟教程https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html 这个链接里面的代码可以直接运行,也可以把里面提到的github...
  • js 实现二维码生成

    千次阅读 2019-10-17 11:55:15
    我们可以使用qrcodejs来实现js生成二维码,qrcodejs是用于JavaScript的跨浏览器QRCode生成器,可以十分简单的实现二维码生成 一:下载qrcodejs插件 qrcode的地址:https://github.com/davidshimjs/qrcodejs 下载...
  • 可以使用原生js生成二维码,使用方法简单方便。 $(".model .code").html(""); var qrcode = new QRCode($(".model .code")[0]); qrcode.makeCode($(".top .address").html());
  • 前端动态生成二维码qrcode.js

    千次阅读 2019-06-03 11:32:28
    前端动态生成二维码qrcode.js 参考网址:qrcode.js 以上网址有js文件,下载即可 如何使用: 一、载入文件 <script src="src/jquery-3.3.1.min.js"></script> <script src="src/qrcode.js"><...
  • 最近有个需求,要求每个网页对应一个二维码,搞了几天终于有点眉目了。 留个笔记: 1、首先在页面中加入jquery库文件和qrcode插件 &lt;script src="../../../../static2018/js/qrcode.js" type=&...
  • 主要介绍了如何基于原生javaScript生成带图片的二维码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 微信小程序生成二维码js

    千次阅读 2019-04-24 12:21:53
    微信小程序生成二维码js 参考:https://github.com/tomfriwel/weapp-qrcode 最新的二维码工具:https://github.com/KeeeX/qrcodejs 1、通过canvas的id来绘制二维码: 效果图:(单位是px,所以小程序的rpx要...
  • 利用QRCode.js的new QRCode({})接口定义生成二维码的大小,颜色,背景等属性的设置,通过qrcode.makeCode方法接口,将要生成二位码的信息传入,再生成二维码图片!
  • <!DOCTYPE html> <html> <head>...meta charset="utf-8">...生成二维码</title> <script src="js/JsBarcode.all.js"></script> <script src="js/qrcode.js...
  • react 项目生成二维码

    千次阅读 2020-09-27 11:40:43
    这里提供两种方法: 第一种:使用qrcode.react插件... value={this.state.qrUrl} //value参数为生成二维码的链接 size={200} //二维码的宽高尺寸 fgColor="#000000" //二维码的颜色 /> 后来,我发现这个插件也可
  • 实例:js插件生成二维码手机扫一扫访问 日期:2017-04-15 范围:所有的前端界面 html代码:<script type="text/javascript" src="assets/js/qrcode.min.js"> ; float: left">
  • 微信小程序前端生成二维码直接显示,详情https://blog.csdn.net/qq_27721169/article/details/80435699
  • import uQRCode from "@/components/uqrcode/uqrcode.js" 插件代码下载地址如下: https://github.com/Sansnn/uQRCode 需要定义的数据 data() { return { qrcodeText: '', qrcodeSize: 100, qrcodeSrc...
  • 基于qrcodejs的微信小程序二维码生成

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,365
精华内容 1,746
关键字:

js原生生成二维码