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

原文地址:

一、问题

使用 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> 

四、效果

换了个前景颜色
QQ截图20170510155108.jpg