场景：公司最最近在开发二维码支付业务，所以需要做一个html5中的二维码生成和部署！

前天用js生成二维码，节省服务器资源及带宽

原版jquery.qrcode不能生成logo，本文采用的是修改版

1 显示效果

2 页面

<!DOCTYPE HTML>

<html>

<head>

<title>生成带有logo的二维码</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--此处需要引入三个JS文件

  一、jquery-1.8.2.js

  二、excanvas.js

  三、qrcode.js

  顺序要注意，不能乱了顺序；

-->

<script src="js/jquery-1.8.2.js" type="text/javascript"></script>

<script src="js/excanvas.js"></script>

<script src="js/qrcode.js"></script>

<script type="text/javascript">

$(function() {

    $("#bt").bind("click",

        function() {

                $("#qrcode_div").empty();

            var text = $("#text").val();

            $('#qrcode_div').qrcode({

                render: 'canvas',

                text: utf16to8(text),

                height: 200,

                width: 200,

                typeNumber: -1,            //计算模式

                correctLevel: QRErrorCorrectLevel.M,//纠错等级

                background: "#ffffff",    //背景颜色

                foreground: "#000000",    //前景颜色

                //logo图片地址
　　　　　　　　　//src: 'http://pic1.cxtuku.com/00/07/42/b03695caf529.jpg'

                src: 'logo.png'

            });

            //console.info("wwww");

        }

    );

});

function utf16to8(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;

}

</script>

</head>

<body>

<input type="text" id="text" value="甜甜，我爱你！" style="width:200px;"/>

<input type="button" value="生成二维码" id="bt" />

<div id="qrcode_div" style="margin-top:10px;">

</div>

</body>

</html>

纠错等级：

QRErrorCorrectLevel.L 7%的字码可被修正

QRErrorCorrectLevel.M 15%的字码可被修正

QRErrorCorrectLevel.Q 25%的字码可被修正

QRErrorCorrectLevel.H 30%的字码可被修正

jquery-1.8.2.js可采用压缩文件jquery-1.8.2.min.js（自行下载）

excanvas.js可采用压缩文件excanvas.compiled.js（自行下载）

项目资源下载地址：

http://download.csdn.net/detail/cs408/9651615

友情提醒：

如果觉得logo图片有点小，修改qrcode.js的48左右的代码

具体怎么改傻瓜都知道，^_^（建议不要太大，不然二维码识别不了）

（转）js jquery.qrcode生成二维码 带logo 支持中文的更多相关文章

  1. jquery.qrcode 生成二维码带logo

    <div id="container">这里是二维码显示位置</div> <script language="JavaScript" ...

  2. 使用jquery.qrcode生成二维码及常见问题解决方案

    转载文章  使用jquery.qrcode生成二维码及常见问题解决方案 一.jquery.qrcode.js介 jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery ...

  3. 使用jquery.qrcode生成二维码实现微信分享功能

    前言: 最近有个这样的需求,在pc端的商品详情页增加分享功能. 微博分享.QQ好友分享.QQ空间分享这些都很常见.但是微信分享我还没有手动写过(以前改过). 最终效果如下图: 解决方案:使用jquer ...

  4. C# 生成二维码(带Logo)

    C# 生成二维码(带Logo) 第一种方式 我们需要引用 ThoughtWorks.QRCode.dll  生成带logo二维码(framework4.0以上) 下载地址:https://pan.ba ...

  5. jquery动态生成二维码添加自定义logo

    动态生成二维码中间带logo. jquery.qrcode.js 动态生成二维码api很简单. 引入jquer(版本任意),引入jquery.qrcode.js 不需要中间带logo这样就可以了.带l ...

  6. 使用jquery.qrcode生成二维码（转）

    jQuery 的 qrcode 插件就可以在浏览器端生成二维码图片. 这个插件的使用非常简单: 1.首先在页面中加入jquery库文件和qrcode插件. <script type=" ...

  7. jQuery.qrcode 生成二维码，并使用 jszip、FileSaver 下载 zip 压缩包至本地。

    生成二维码 引用 jquery.qrcode.js  :连接:https://files.cnblogs.com/files/kitty-blog/jquery.qrcode.js .https:// ...

  8. 使用jquery.qrcode生成二维码支持logo，和中文

    /* utf.js - UTF-8 <=> UTF-16 convertion * * Copyright (C) 1999 Masanao Izumo <iz@onicos.co. ...

  9. jquery.qrcode生成二维码支持中文

    基本使用方法: 1.首先在页面中加入jquery库文件和qrcode插件. <script type="text/javascript" src="jquery.j ...

随机推荐

  1. java原生实现屏幕设备遍历和屏幕采集（捕获）等功能

    前言:本章中屏幕捕获使用原生java实现,屏幕图像显示采用javacv1.3的CanvasFrame 一.实现的功能 1.屏幕设备遍历 2.本地屏幕图像采集(也叫屏幕图像捕获) 3.播放本地图像(采用 ...

  2. 利用arpspoof和urlsnarf 进行ARP嗅探

    地址解析协议 (ARP, Address Resolution Protocol) 是如何将网络设备的MAC地址和其IP地址关联起来的,这样在同一个局域网内的设备就能相互知道彼此的存在.ARP基本上就 ...

  3. KVM之Live Migration

    1.安装KVM必要的软件包 #sudo apt-get install qemu-kvm bridge-utilus 2.制作虚拟机映像ubuntu-12.04.qcow2 $qemu-img cre ...

  4. SQL 和 .NET Framework 数据类型对应表

    SQL Server data type CLR data type (SQL Server) CLR data type (.NET Framework) varbinary SqlBytes, S ...

  5. django favicon配置

    其实网站加一个图标,在/static/images/里面放置favicon.ico 1. 直接url里修改 from django.views.generic.base import Redirect ...

  6. B. Karen and Coffee

    B. Karen and Coffee time limit per test 2.5 seconds memory limit per test 512 megabytes input standa ...

  7. 使用File、Path和Directory进行常见的操作

    我们偶尔会用到文件操作,其中File.Path和Directory这三个类是比较常见的,今天写了一个测试demo,也是顺便学习一下,记录一二. BTW,使用这几个类的时候需要引用using Syste ...

  8. ps命令注意事项

    1.ps命令由于历史原因,版本比较多,主要分为三种版本 1)Unix风格的版本,命令参数加单横线.比如ps -ef 2)BSD风格的版本,命令参数前不加任何横线.比如ps aux 3)GNU风格的版本 ...

  9. DataTable多线程操作报错情况

    最近在写一个http接口时用了DataTable这个强大的利器,接口用浏览器跑起来没任何问题.当时也没考虑并发问题,后来用一个压力测试工具做大并发测试,1000+/s次速度测试.发现程序报错了.程序报 ...

  10. 错误Fatal error: Call to undefined function mb_strlen()的解决办法

    其实这个就是没有开启php_mbstring模块.Windows下只需要修改安装目录下的php.ini文件把extension=php_mbstring.dll前面的“#”号注释符去掉保存后重启Apa ...