使用jQuery.qrcode为WordPress文章动态生成二维码

  • 内容
  • 评论
  • 相关

davymai.com

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了,下面说说所有配置的,可按需添加。

jQuery("#qrcode").qrcode({
    // 渲染方式默认有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>
...

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注