原生 js 生成二维码
生活随笔
收集整理的這篇文章主要介紹了
原生 js 生成二维码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用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 生成二维码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android 自定义Switch，仿微
- 下一篇： ceph学习之pool