用jquery.qrcode.js生成高大尚的二维码

二维码的作用

1)  移动设备扫一扫,方便“带走”阅读(即把URL生成二维码)

2)  可以传递信息(单纯的把字符串生成二维码)

第三方开源库

项目源码:https://github.com/jeromeetienne/jquery-qrcode

qrcode.js  实现二维码的核心函数库

jquery.qrcode.js  用jquery把核心函数库封装起来。用它来实现图形渲染,其实就是画图(支持canvas和table两种方式)。

使用方法

1)  引入jquery库

2)  引入qrcode.js

3)  引入jquery.qrcode.js

4)  开写

var str = “http://www.baidu.com”;
// var str = “Hello World”;
// var str = “中文要加一个函数”;
// var str = toUtf8(str); // 些函数是为解决中文乱码
$("#qrcode").qrcode({
render: "canvas", // 设置渲染方式,值为"canvas"或"table",省略为"canvas"
text: str, // 唯一一个必填项,二维码信息
width: 200, // 宽,省略为256px
height: 200, // 高,省略为256px
background: "#fff", // 二维码背景色,省略为#fff
foreground: "#0f0" // 二维码前景色,省略为#000

解决中文乱码

jquery.qrcode.js这个库是采用 charCodeAt() 这个方式进行编码转换的,这个方法默认会获取它的 Unicode 编码。所以中文会乱码,解决方法是将下面的函数放在qrcode.js最后。

function toUtf8(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
    c = str.charCodeAt(i);
    if ((c >= 0x0001) && (c <= 0x007F)) {
        out += str.charAt(i);
    } else if (c > 0x07FF) {
        out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
        out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
    } else {
        out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
        out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
    }
    }
    return out;
}

时间: 2024-10-15 12:44:05

用jquery.qrcode.js生成高大尚的二维码的相关文章

使用 jquery.qrcode.js生成二维码

技术开发人员如何快速生成二维码,下面介绍使用 jquery.qrcode.js生成二维码方式 jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码. 此插件是能够独立使用的,体积也比较小,使用gzip压缩后才不到4kb. 第一种生成没有图片的二维码: 准备环境: jquery-1.8.3.min.js,jquery.qrcode.min.js jquery.qrcode.min.js不好找,我就直接把代码贴出

js实现生成中间带图片的二维码

之前需要实现生成中间带图片的二维码,所以找了半天终于找到一个可以用的.于是在这里记录一下. 下面是需要注意的几点: 1.使用的js为jquery-qrcode 但是已经经过别人的修改,和网上原来的那些不一样,所以网上的js不能用. 2.生成的图片大小可以调整 3.我尽可能保留了原作者的所有代码,都没有动过. 4.更多的方法和参数还是要参考官方的github和文档. http://files.cnblogs.com/files/linkstar/%E7%94%9F%E6%88%90%E4%B8%A

使用 Qrcode 生成中间带 logo 的二维码!

可以自由定义生成的二维码中间是否带 logo ! package com.controller; import java.awt.Color; import java.awt.Graphics2D; import java.awt.Image; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.text.SimpleDateFormat; import

生成带logo的二维码

一,生成带log的二维码 1)生成的二维码是流返回,或者是直接写到指定文件夹 二,准备资料 1)引入jar包 <!-- https://mvnrepository.com/artifact/com.google.zxing/core --> <!-- 二维码生成器 --> <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</artifactId&g

微信公众平台功能开发(生成带参数的二维码)

为了满足用户渠道推广分析的需要,公众平台提供了生成带参数二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送. 目前有2种类型的二维码,分别是临时二维码和永久二维码,前者有过期时间,最大为1800秒,但能够生成较多数量,后者无过期时间,数量较少(目前参数只支持1--100000).两种二维码分别适用于帐号绑定.用户来源统计等场景. 用户扫描带场景值二维码时,可能推送以下两种事件: 如果用户还未关注公众号,则用户可以关注公众号,关注后微信会将带场景值关注事

Java生成带小图标的二维码-google zxing 工具类

近期一直忙于开发微信商城项目,应客户要求,要开发个有图标的二维码.经过两次改版,终于实现了该功能(第一次没有小图标,这次才整合好的),如下是完整代码 . 该代码使用Java7开发,另外使用 core-2.2.jar jar[http://pan.baidu.com/s/1skTwHQ1] 包 . 1 package com.rick.common.utils; 2 3 4 import java.awt.Color; 5 import java.awt.Graphics2D; 6 import

.NET使用ZXing.NET生成中间带图片的二维码

很久之前就有写这样的代码了,只是一直没记录下来,偶然想写成博客. 把之前的代码封装成函数,以方便理解以及调用. 基于开源的 ZXing.NET 组件,代码如下: 先添加对ZXing.NET的引用,然后添加相应的命名空间: using System; using System.Collections.Generic; using System.Drawing; using ZXing; using ZXing.Common; using ZXing.QrCode; using ZXing.QrCo

C#微信开发之旅(六):生成带参数的二维码

主要用来推广并统计数据,当用户扫描带参数二维码时,微信会推送消息到我们的服务器,此时可以根据参数了解到用户是从哪个渠道关注的.话不多少,先来代码: 1 #region 生成二维码 2 3 /// <summary> 4 /// 获取Ticket 5 /// </summary> 6 /// <returns></returns> 7 private static string CreateTicket(string scene_id) 8 { 9 var t

微信公众号开发(三)生成带参数的二维码

微信公众号开发之生成带参数的二维码 做微信公众号开发的人员都知道用户海报作为公众号吸引用户是常见的渠道,那么我就说说这个海报的生成. 看了好多公众号发现他们的海报都是大同小异,一个漂亮的背景+自己的头像+专属二维码. 背景就不阐述了,用户的头像可以由公众号开发文档提供的方式获取(根据用户的openId),今天主要讲用户的专属二维码 所谓专属即便是一对一的. 二维码分为两种,临时二维码和永久二维码 /*生成永久二维码*/ public static String getPerpetualQR(St