<script src="/UploadFiles/2021-04-02/jquery-1.8.3.js">

html部分


<div id="qrcode"></div>


js部分


// 设置要生成二维码的链接
new QRCode(document.getElementById("qrcode"), codeUrl); 



或者


var qrcode = new QRCode("qrcode", {
 text: codeUrl,
 width: 128,
 height: 128,
 colorDark : "#000000",
 colorLight : "#ffffff",
 correctLevel : QRCode.CorrectLevel.H //容错级别
});



容错级别，可设置为：

QRCode.CorrectLevel.L

QRCode.CorrectLevel.M

QRCode.CorrectLevel.Q

QRCode.CorrectLevel.H
清除重新生成


qrcode.clear(); // clear the code.
qrcode.makeCode("http://naver.com"); // make another code.



浏览器支持
IE6~10, Chrome, Firefox, Safari, Opera, Mobile Safari, Android, Windows Mobile, ETC.


长按识别方式


解决思路是从canvas中提取图片base64自己生成图片


html部分


<div id="codeDiv" style="display: none;"></div>
<div id="qrcode"></div> 



js部分


var qrcode = new QRCode("codeDiv", {
  text: codeUrl,
  render: "canvas", //渲染方式指定canvas方式
  width: 128,
  height: 128,
  typeNumber:-1,//计算模式
  colorDark : "#000000", 
  colorLight : "#ffffff", 
  correctLevel : QRCode.CorrectLevel.H 
 });
 var canvas=document.getElementsByTagName('canvas')[0];
 var img = convertCanvasToImage(canvas);
 $('#qrcode').append(img);// 添加DOM
 //从 canvas 提取图片 image 
 function convertCanvasToImage(canvas) { 
  //新建Image对象
  var image = new Image(); 
  // canvas.toDataURL 返回的是一串Base64编码的URL
  image.src = canvas.toDataURL("image/png"); 
  return image; 
 }  



参考


QRCode.js 二维码生成并能够长按识别 

GitHub 


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。