标签 qrcode 下的文章

最近在研究二维码的生成，目前找到了javascript版本和php版本。

先来说说javascript版吧，其实就是一个jquery插件——jquery.qrcode，看了源码之后发现jquery.qrcode.js里面提供了2种生成二维码的机制：使用canvas或table。对于支持html5的浏览器使用canvas效率是非常高的，并且不会对服务器产生任何压力，客户端也不会有太多压力；可是如果为了兼容像IE8等浏览器，还是需要使用table方式。

判断浏览器是否支持canvas的代码：

function canvasSupport() {
    return !!document.createElement('canvas').getContext;
}

于是，写了这么一个在线生成二维码的demo，下载即用，如果将table改为canvas将会得到一个质的提升。

$('#qrcodeTable').qrcode({
    render  : "table",
    text    : utf16to8(str),
    width:"400",
    height:"400"
});

jquery二维码插件下载地址：

使用jquery.qrcode生成二维码(支持中文).zip

来说说php中怎样实现二维码，主要使用phpqrcode这个开源库：http://phpqrcode.sourceforge.net/

官方给的项目库比较大，个人只使用了phpqrcode.php这一个文件：
php生成不带logo的二维码.zip

可惜是phpqrcode.php并未实现生成带有logo的二维码，但是使用php的GD库函数在《php利用PHP QR Code生成二维码(带logo)》中已经实现了。

源码下载：
php生成带logo的二维码.zip

以上转载：http://blog.zhengshuiguang.com/php/qrcode.html

如何用jquery.qrcode.js插件在线生成二维码

在之前的一篇文章中我介绍了用php怎么生成二维码，今天我要说的是用jquery.qrcode.js前端生成二维码。

jquery.qrcode.js是一个纯浏览器生成QRcode的jQuery插件，它使用非常简单，生成的QRcode无需下载图片，并且不依赖第三方服务。实在是挺好用的。

官网地址：https://larsjung.de/jquery-qrcode/

其实在官方的API已经说的很清楚了，我这里只是做个简单的案例。

<div id="container"></div>
<script>
    $('#container').qrcode({
        // 渲染的方式 : 'canvas', 'image' or 'div'
        render: 'canvas',
        // 容错率 L-H 递增 level: 'L', 'M', 'Q' or 'H'
        ecLevel: 'H',
        // 大小
        size: 200,
// 圆角
radius: 0.5,
        // 背景色
        background: '#ffffff',
        // 内容
        text: 'https://m69w.com',
    });
</script>

效果如下：略

在线生成二维码 http://www.hehaibao.com/qr && https://github.com/hehaibao/php-qrcode
https://github.com/lrsjng/jquery-qrcode && demo源码
使用jquery.qrcode，在线生成二维码，支持中文，可设置LOGO版！【JS版】
使用PHPqrcode类库，在线生成二维码【PHP版】

来自老赵茶馆的使用jQuery.qrcode为WordPress文章动态生成二维码

jQuery.qrcode地址：link
在线生成器：link

网上流传的方法是采用外网的API方式生成，好处是简单粗暴，缺点是自定义不够；我主题使用的是jQuery.qrcode，好处是自定义功能丰富，缺点是要加载额外js。
首先是载入jQuery，载入jQuery.qrcode，然后在single.php里加入以下代码：

<script>
jQuery(window).load(function() {
    jQuery("#qrcode").qrcode({
        text: "<?php the_permalink(); ?>"
    });
});
</script>

当然，这是最简单的配置，再加些css美化下就OK了，下面说说所有配置的，可按需添加。

{
    // 渲染方式默认有html5的画布canvas，还有image、div
    render: 'canvas',
 
    // 版本version范围为1到40，就是格子的密度
    minVersion: 1,
    maxVersion: 40,
 
    // 容错率从低到高四种模式: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',
 
    // 如果画布渲染时的上像素偏移
    left: 0,
    top: 0,
 
    // 像素大小
    size: 200,
 
    // 填充颜色
    fill: '#000',
 
    // 背景颜色
    background: null,
 
    // 内容，可以使文本或者网址
    text: 'no text',
 
    // 圆角: 0.0 到 0.5
    radius: 0,
 
    // 空白的边界
    quiet: 0,
 
    //模式
    // 0: normal，正常模式即最简洁模式
    // 1: label strip，可插入标签条
    // 2: label box，可插入标签盒子
    // 3: image strip，可插入图像条
    // 4: image box，可插入图像盒子
    mode: 0,
 
    // 分别是标签或图像的缩放，x偏移，y偏移
    mSize: 0.1,
    mPosX: 0.5,
    mPosY: 0.5,
 
    // 标签文字、字体、颜色
    label: 'no label',
    fontname: 'sans',
    fontcolor: '#000',
 
    // 图像的地址
    image: null
}

就这么简单，就是有一个难点，就是模式3和模式4的插入图像问题，你不能直接在image选项后面直接填入图像地址，那样会报错。作者解释说道，在运行生成二维码之前，图像必须先载入，然后通过选择器填入image选项。
就是说，图像必须在二维码之前载入，那就简单，我把图像载入但是通过css把它隐藏掉

<div id="qrcode">
     <img id="qrcode_img" style="display:none" src="/images/qr-img.png">
</div>
 
 
...
 
<script>
jQuery(window).load(function() {
    jQuery("#qrcode").qrcode({
        mode: 4,
    image: jQuery('#qrcode_img')[0],
        text: "<?php the_permalink(); ?>"
    });
});
</script>
 
...