jquery.qrcode生成二维码并解决canvas在IE8的兼容性问题

最新推荐文章于 2024-04-11 18:11:09 发布

瑶少

最新推荐文章于 2024-04-11 18:11:09 发布

阅读量2.9k

点赞数 3

分类专栏： JavaScript 前端开发文章标签： js 二维码 qrcode excanvas jquery

本文链接：https://blog.csdn.net/dante_feng/article/details/103144297

版权

前端开发同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

前言

如今二维码在生活中十分常用，支付扫一扫，长按可识别。那么在项目可能就会遇到需要有编号、链接等需要生成二维码的场景，这里我的项目里就有遇到编号需要生成二维码并打印的场景出现，这里介绍一下我使用js生成二维码并解决IE8浏览器下canvas控件的兼容性处理问题。

导入的生成二维码的js插件：jquery.qrcode.min.js

该插件其实是通过使用jQuery实现图形渲染，画图，支持canvas（HTML5）和table两种方式。

GitHub地址：https://github.com/jeromeetienne/jquery-qrcode

下面介绍怎么使用这个插件：

一、jquery.qrcode.min.js的使用

1、在页面中引用jquery.js和jquery.qrcode.min.js

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

2、页面中需要显示二维码的地方加上div

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

3、在js中调用控件显示二维码在div中

//canvas 模式
var qrcode = $('#qrcode').qrcode({
    render: 'canvas',    //canvas模式
    width: 90,    //宽度
    height: 90,    //高度
    text: "生成二维码的内容，可为变量"    //生成二维码的内容
});

要注意canvas控件是HTML5特有的控件，需在IE9及以上浏览器或谷歌内核浏览器内才能正常显示，若是使用IE8及以下浏览器，则不能使用canvas控件，需使用table模式生成二维码。

//table 模式兼容 IE低版本
$('#qrcode').qrcode({
    render: 'table',    //table模式
    width: 90,    //宽度
    height: 90,    //高度
    text: "生成二维码的内容，可为变量"    //生成二维码的内容
});

注意，使用table模式在老版本浏览器下生成二维码存在一个问题，在需要打印页面的时候，打印预览页面无法显示二维码，打印出来的纸张上也不显示二维码，如果你在使用老版本的浏览器并且需要打印该二维码，请往下看。

二、canvas在IE8的兼容性问题

上面说到了使用jquery.qrcode.min.js以table模式生成二维码在打印的时候无法正常显示，而canvas模式又仅支持高版本的IE浏览器和谷歌浏览器，那么如果在特定的时候只能使用低版本的IE浏览器生成二维码又需要打印的时候该怎么办呢？

我们首先来研究一下canvas控件，canvas是HTML5的一种画板组件，在IE8下使用canvas进行图片渲染时，js会报错，提示不支持getContext方法。也就是说如果想已这种模式生成二维码，必须要能支持HTML5，那么可以让低版本的浏览器兼容HTML5吗？答案是肯定的。所以我们首先需要让IE8浏览器兼容HTML5。

这里需要用到另一个强大的插件：excanvas.compiled.js

解压缩excanvas_r3.zip得到，这个插件可以直接让IE8等IE浏览器支持canvas控件，提供了低版本ie浏览器不支持canvas的解决方案。

插件的下载地址：http://explorercanvas.googlecode.com/files/excanvas_r3.zip

这个插件由于在墙外，可能需要自行翻墙下载，没办法翻墙的小伙伴可以直接下载我混合好的js文件。

excanvas.qrcode.mix.js

下载地址：https://download.csdn.net/download/dante_feng/11985412

使用方法与上述jquery.qrcode.min.js类似，使用这个我混合好的插件可以直接在低版本IE浏览器下使用canvas模式生成二维码，解决打印不出二维码的问题。

注意：之前说无法使用的童鞋们，请注意一定按照如下说明进行使用，IE8亲测可用，二维码完美支持打印。

excanvas.qrcode.mix.js使用方法：

1、引用文件

<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="excanvas.qrcode.mix.js"></script>

注意：

(1) jQuery为必须引用的js文件，仅2.0以下版本的jQuery支持IE8浏览器；

jQuery-1.11.3.min.js下载地址：https://download.csdn.net/download/dante_feng/19899362

(2) 引用js需在head内引用，不要在body内引用。

2、页面中需要显示二维码的地方加上div

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

3、在js中调用控件显示二维码在div中

    //设置二维码
    function setQrcode(){

        //canvas 模式，兼容低版本浏览器
        var qrcode = $('#qrcode').qrcode({
            render: 'canvas',
            width: 90,
            height: 90,
            text: "转为二维码的内容，可为变量"
        });

    }

注意：

setQrcode方法需在页面加载完毕后的方法内执行，如放在 $(document).ready(function(){ }); 方法内执行。

页面demo代码如下：

<%@ page contentType="text/html; charset=UTF-8"%>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>qrcode</title>

    <script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./js/excanvas.qrcode.mix.js"></script>

</head>

<body>

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

<script type="text/javascript">

    //页面加载完成后执行
    $(document).ready(function(){
        setQrcode();
    });

    //设置二维码
    function setQrcode(){

        //canvas 模式，兼容低版本浏览器
        var qrcode = $('#qrcode').qrcode({
            render: 'canvas',
            width: 90,
            height: 90,
            text: "转为二维码的内容，可为变量"
        });

    }

</script>

</body>
</html>

注意：

HTML头部使用 <%@ page contentType="text/html; charset=UTF-8"%>

这样即使在低版本IE浏览器下也可以使用canvas模式生成二维码了，解决了低版本浏览器打印不显示二维码的问题。

IE8浏览器下二维码显示效果如下：

瑶少

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
4
评论
jquery.qrcode生成二维码并解决canvas在IE8的兼容性问题

如今二维码在生活中十分常用，支付扫一扫，长按可识别。那么在项目可能就会遇到需要有编号、链接等需要生成二维码的场景，这里我的项目里就有遇到编号需要生成二维码并打印的场景出现，这里介绍一下我使用js生成二维码并解决IE8浏览器下canvas控件的兼容性处理问题。导入的生成二维码的js插件：jquery.qrcode.min.js该插件其实是通过使用jQuery实现图形渲染，画图，支持canva...
复制链接

扫一扫