之前写了一篇文章，【不使用插件在网站的任何页面生成二维码】

原文地址：

• http://www.ptbird.cn/typecho-post-qcode-no-plugnis.html

一、问题

使用 jquery.qrcode.js 首先选择使用 canvas 进行图片的渲染，而不是使用table

使用 canvas 有一个致命的问题就是，生成二维码之后， 无法在手机上长按二维码进行识别

二、解决

使用table不会有这个问题，但是显示上兼容性之类的会有问题。

比较好的解决办法就是将 canvas 转成 img

方法参照：https://my.oschina.net/ht896632/blog/737017 （感谢作者）

示例函数：

# 函数将canvas对象转换成img对象
function convertCanvasToImage(canvas) {
    //构建新Image对象
    var image = new Image();
    // canvas.toDataURL 返回的是一串Base64编码的URL
    // 指定格式 jpg
    image.src = canvas.toDataURL("image/jpg");
    return image;
}
// 获取页面上的第一个canvas元素，这个根据实际需要，可以结合ID或者是className来选择
var mycanvas1=document.getElementsByTagName('canvas')[0];
// 转成img
var img=convertCanvasToImage(mycanvas1);
// 将原来的div内容替换掉
 $('#qrcodeContent').html(img); 

三、完整的页面二维码使用

结合之前文章中在网页上生成二维码，给出完整的使用方法，直接copy到要使用的地方即可。

当然前提是已经引入了jquery.qrcode.js：

<div style="text-align:center;">
    <div id="qrcodeContent" >
    
    </div> 
    <div style="padding:10px;">
        <span>扫描二维码,在手机阅读！</span>
    </div>
</div>
<script> 
    var options={
        text     : location.href, //设置二维码内容  
        render   : "canvas",//设置渲染方式  
        width       : 150,     //设置宽度  
        height      : 150,     //设置高度  
        typeNumber  : -1,      //计算模式  
        background      : "#ffffff",//背景颜色  
        foreground      : "#000000" //前景颜色  
    };
jQuery('#qrcodeContent').qrcode(options);  
function convertCanvasToImage(canvas) {
    //新Image对象，可以理解为DOM
    var image = new Image();
    // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持
    // 指定格式 PNG
    image.src = canvas.toDataURL("image/png");
    return image;
}
var mycanvas1=document.getElementsByTagName('canvas')[0];
var img=convertCanvasToImage(mycanvas1);
 $('#qrcodeContent').html(img); 
</script> 

四、效果

换了个前景颜色