使用jquery在页面直接生成二维码，不依赖服务端
2018-10-12 本文已影响14人
菜菜___
今天发现了一个jquery插件直接在页面生成二维码，这样就不需要服务端生成二维码图片并保存到服务器了。
需求是在一个网页上可复制列表的url,或者查看该url对应的二维码方便推广，最开始是想使用java生成二维码保存到服务器每次取出来用就好了，但是现在canvas的兼容性在各个浏览器表现良好，为了不浪费服务器资源，因此在前端页面每次预览的时候根据将url作为参数传入生成图片就行了，效果图如下：
image
github源码地址：
https://github.com/jeromeetienne/jquery-qrcode
前7个参数是插件自带的，后2个参数是我想调整中间logo大小自己加的，大家也可以自己拓展，用起来很简单，其中需要一个转码的utf.js
html代码：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>使用jquery在页面直接生成二维码，不依赖服务端</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/utf.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#qrcodeCanvas").qrcode({
render : "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
text : "http://www.baidu.com", //扫描二维码后显示的内容,可以直接填一个网址，扫描二维码后自动跳向该链接
width : "200", //二维码的宽度
height : "200", //二维码的高度
background : "#ffffff", //二维码的后景色
foreground : "#000000", //二维码的前景色
src: 'logo.png', //二维码中间的图片
logoWidthRatio:3, //二维码中间logo宽占二维码比例系数，为3则占1/3宽，
logoHeightRatio:3 //二维码中间logo高占二维码比例系数，为3则占1/3宽，
});
});
</script>
</head>
<body>
<div style="text-align: center">
<h2>该二维码支持跳转url,中文和LOGO</h2>
<div id="qrcodeCanvas"></div>
</div>
</body>
</html>
utf.js:
/* utf.js - UTF-8 <=> UTF-16 convertion
*
* Copyright (C) 1999 Masanao Izumo <iz@onicos.co.jp>
* Version: 1.0
* LastModified: Dec 25 1999
* This library is free. You can redistribute it and/or modify it.
*/
/*
* Interfaces:
* utf8 = utf16to8(utf16);
* utf16 = utf16to8(utf8);
*/
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
function utf8to16(str) {
var out, i, len, c;
var char2, char3;
out = "";
len = str.length;
i = 0;
while(i < len) {
c = str.charCodeAt(i++);
switch(c >> 4)
{
case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
// 0xxxxxxx
out += str.charAt(i-1);
break;
case 12: case 13:
// 110x xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
char3 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
}
至于插入中间的图片大家自己将所要上传的图片放在目录下就可以了。
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
