使用kjua生成二维码

官网：https://larsjung.de/kju

使用方法

在官网下载js文件，在页面中引用即可，原生js实现，不需要引用其他依赖。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="test"></div><script src="kjua-0.9.0.min.js"></script><script>// text:二维码内容var el = kjua({text: 'http://www.baidu.com'});document.querySelector('#test').appendChild(el);</script></body>
</html>

效果如下：

也可用jQuery方式生成（需要引入jQuery）。

$('#test').kjua({text: 'http://www.baidu.com'});

当然也可以在二维码中间加入图片logo或文字，下面是所有可选参数（不必设置所有参数，设置需要的即可）。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#img-buffer {display: none;}</style></head><body><div id="test"></div><!-- 用于保存二维码中间图片 --><img src="icon5.png" id="img-buffer"><script src="kjua-0.9.0.min.js"></script><script>// 二维码中间的图片var img=window.document.getElementById("img-buffer")var el = kjua({// render method: 'canvas', 'image' or 'svg'// 绘制方式render: 'image',// render pixel-perfect linescrisp: true,// minimum version: 1..40minVersion: 1,// error correction level: 'L', 'M', 'Q' or 'H'ecLevel: 'L',// size in pixel// 大小size: 200,// pixel-ratio, null for devicePixelRatioratio: null,// code colorfill: '#333',// background colorback: '#fff',// contenttext: 'http://www.baidu.com',// roundend corners in pc: 0..100// 二维码圆角rounded: 100,// quiet zone in modules：二维码周围空白大小quiet: 0,// modes: 'plain', 'label' or 'image'// 样式：plain：默认//label：中间显示文字，需要设置label参数//image:中间显示图片，需要设置image参数mode: 'image',// label/image size and pos in pc: 0..100// 中间图片或文字大小mSize: 10,// 中间图片或文字位置mPosX: 50,mPosY: 50,// label 字体中间的文字label: 'label',// 字体fontname: 'sans',fontcolor: '#333',// image elementimage: img});document.querySelector('#test').appendChild(el);</script></body>
</html>

效果如下：

图片样式

文字样式

兼容ie

由于ie不支持Object.assign(),所有需要在使用插件之前声明如下方法：

参考文章：https://my.oschina.net/u/3828418/blog/2056310

if (typeof Object.assign != 'function') {Object.assign = function(target) {'use strict';if (target == null) {throw new TypeError('Cannot convert undefined or null to object');}target = Object(target);for (var index = 1; index < arguments.length; index++) {var source = arguments[index];if (source != null) {for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}}return target;};
}

原生 js 生成二维码相关推荐

JS生成二维码(兼容各种浏览器及中文）
本文将介绍如何使用JS生成二维码,兼容各种浏览器及手机端,支持中文. 代码如下: <!DOCTYPE html> <html> <head> <meta ch ...
js生成二维码以及插入图片
js生成二维码以及插入图片先根据qrcode官网demo,不同属性值的变化,二维码的变化效果:https://larsjung.de/jquery-qrcode/latest/demo/ 进入dem ...
JS生成二维码以及点击下载二维码
JS生成二维码效果扫描二维码可访问指定链接或当前网站链接,内容可以自己更改 "复制链接",点击按钮复制当前网站链接如何获取当前网站链接源码 textarea{opacity ...
qrcode.js使用js生成二维码（并下载）的实践
知识点 base64数据形式 Base64是一种用64个字符来表示任意二进制数据的方法. – 廖雪峰官方网站 Base64编码有哪些情景需求? – 知乎案例场景后台生成邀请链接,前端拿到链接之后处 ...
qrcode——js生成二维码
1.引入 qrcode.min.js(点击下载demo) 2.html: <div id="qrcode"></div> js: var qrcode = ...
HTML5 使用 JS 生成二维码，带头像
一般在项目开发中,前端显示给用户扫描的二维码基本都是由后端代码生成的,那么这个高大上的功能能不能用 JS 来绘制呢? 答案是肯定的首先我们需要一个插件 jquery.qrcode.js,该插件基于 ...
js 生成二维码_js 生成二维码
qrcode.min.js 下载地址: jeromeetienne/jquery-qrcodegithub.com 页面中: <div class="page"> & ...
js 生成二维码_Node for Max 二维码生成器
"Node for Max"是 Max8 的新功能,通过它可以在 Max 中方便的调用 NodeJS.充分利用 NodeJS 海量的 NPM 库,能大大扩展 Max 的可能性. 官 ...
qrcode.js 生成二维码包含logo和背景图片及IE下载二维码
思路: 1. 通过qrcode.js 生成带logo的二维码 2. 将背景图片.logo与生成的二维码图通过canvas 绘制在一起形成一个新的canvas 3. 将canvas 转成base64的u ...
JS 生成二维码实现（qrcode.js）
qrcode.js源码地址: https://github.com/jeromeetienne/jquery-qrcode 使用页面引入QRCode.js和JQuery.js <script ...

原生 js 生成二维码

使用kjua生成二维码

使用方法

兼容ie

原生 js 生成二维码相关推荐

最新文章

热门文章