准备工作

页面设计代码：

需要创建一个div存放生成二维码，其中id命名为qrcode的div不可缺少。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--此处为显示二维码的div--><div style="width: 100%;height: 350px;text-align: center"><div id="qrcode" style="width: 100%;height: 350px;background-repeat: no-repeat;text-align: center"></div></div><input type="button"  value="运行生成二维码" onclick="creatQrcode()"/></body>
</html>

引入资源

<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>

注：必须先引入jquery再引入qrcode

准备工作完成，开始生成。

非中文生成二维码

 function creatQrcode(){var qr=$("#qrcode").qrcode({render: "canvas",//渲染方式，只是canvas、tabletext: "csdn yyds",//二维码的内容width: "300",//二维码宽度height: "300",//二维码高度background: "white",//二维码背景色foreground: "black"//二维码前景色});}

直接调用方法即可在页面对应div生成二维码；

如果二维码中含有中文，直接调用上述方法将会产生乱码，此时需要对中文进行转换。

含中文生成二维码

//中文支持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 mkqr(){var congtent=Base.getValue("name");console.log(congtent);var qr=$("#qrcode").qrcode({render: "canvas",//渲染方式，只是canvas、tabletext: utf16to8(congtent),//二维码的内容width: "300",//二维码宽度height: "300",//二维码高度background: "white",//二维码背景色foreground: "black"//二维码前景色});}

生成二维码的text参数中调用中文转换即可实现。

运用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编码有哪些情景需求? – 知乎案例场景后台生成邀请链接,前端拿到链接之后处 ...
JS生成二维码以及保存页面为图片的解决方案:html2Canvas+file-saver+qrcodejs2的使用心得以及解决图片失真，保存不完整的解决办法
前言最近因为工作需求,需要前端根据后端传过来的链接生成二维码,并且要使用JS保存页面为图片.然后网上搜了很多解决办法.最终都是用h5的canvas进行绘制然后保存为图片.其中,又以html2Canv ...
js生成二维码的插件
插件下载地址: dist/arale-qrcode/3.0.5/index.js · master · mirrors / aralejs / qrcode · GitCode 引入js文件,测试下面 ...
js生成二维码和解析二维码
这个整了好久,用的包换了好几次,所以记录一下生成二维码 <div class="container"><div class="row"> ...
qrcode——js生成二维码
1.引入 qrcode.min.js(点击下载demo) 2.html: <div id="qrcode"></div> js: var qrcode = ...
HTML5 使用 JS 生成二维码，带头像
一般在项目开发中,前端显示给用户扫描的二维码基本都是由后端代码生成的,那么这个高大上的功能能不能用 JS 来绘制呢? 答案是肯定的首先我们需要一个插件 jquery.qrcode.js,该插件基于 ...

运用js生成二维码（工作记录）

准备工作

非中文生成二维码

含中文生成二维码

运用js生成二维码（工作记录）相关推荐

最新文章

热门文章