利用前端生成二维码常见问题及解决方案

最近做一个活动，需要前端生成截图，用到了html2canvas，但是其中有个致命的问题是，活动生成的图片中要求需要一个动态的二维码

最初的活动是固定的二维码，所以生成没有问题，动态的二维码涉及到跨域等问题，无法在生成的图片中呈现

于是想到了利用前端canvas方式方式构建一个二维码画布，html2canvas也是画布的方式理论上可以完美契合

在网上搜索一番之后发现还真有这样的工具，选择了比较常见的方式，jquery.qrcode

插件

前提引入了jquery，在引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

一个纯浏览器 生成 QRcode 的 jQuery 插件，使用非常简单，生成的 QRcode 无需下载图片，并且不依赖第三方服务，插件压缩之后大小小于 4K。

参数

text     : "xxxxx"  //设置二维码内容    
render   : "canvas",//设置渲染方式 （有两种方式 table和canvas，默认是canvas）   
width       : 256,     //设置宽度    
height      : 256,     //设置高度    
typeNumber  : -1,      //计算模式    
correctLevel    : 0,//纠错等级    
background      : "#ffffff",//背景颜色    
foreground      : "#000000" //前景颜色   

使用

1.创建一个用于包含 QRcode 图片的 DOM 元素，比如 div：<div id="qrcode"></div> 

2.通过下面代码生成 QRcode：

最简单方式：jQuery('#qrcode').qrcode("xxxxxxxxxx");    

自定义方式：jQuery('#qrcode').qrcode({render:canvas,width: 64,height: 64,correctLevel:0,text: "xxxxxxxxxxxx"}); 

常见问题

1.在chorme浏览器中二维码生成成功后无法扫描解决方法：

//改成使用table的渲染方式，亲测支持各种各版本的浏览器
jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,render: "table",text: "xxxxxxxxxxxx"}); 

 

 2.在微信或手机浏览器中生成的二维码无法扫描解决方法；

//改成使用默认的渲染方式，支持微信和QQ内置浏览器及其它手机浏览器  
jQuery('#qrcode').qrcode({width: 200,height: 200,correctLevel:0,text: "xxxxxxxxxxxx"}); 

 

作者：旧旧的 <393210556@qq.com> 解决问题的方式，就是解决它一次