作为一名java程序员,一直以来都是使用服务端生成二维码,最近接触前端的设计,感觉二维码这块如果放到前端去生成,一方面可以减轻服务端的压力,访问带宽,另一方面,前端页面控制比较顺畅

闲话少叙,说下我的思路,先使用jquery.qrcode.js生成一个二维码(关于中文问题接下来讨论),由于此插件本身不支持带自定义logo的,所以差强人意吧,但是已经为我们省去不少工作,接下来的工作我们自己搞

简述下思路

先页面上准备一个logo图的img标签

用插件生成一个二维码,(canvas标签)

通过画笔将logo图片画到二维码上即可,

是不是很简单?

上代码

 //计算宽,高,中心坐标,logo大小
var width = 200;
var height = 200;
var x = width * 0.4;
var y = height * 0.4;
var lw = width * 0.2;
var lh = height * 0.2;
//生成二维码
$("#qrcodeDiv").qrcode({
width: width,
height:height,
text: "http://www.baidu.com"
});
//画logo
$("#qrcodeDiv canvas")[0].getContext('2d').drawImage($("#logoImg")[0], x, y, lx, ly);

上效果图

接着刚才的中文的问题在说两句,

中文一直是程序员永久的痛,不要问怎么知道的,时间久了就会知道,关于这个可以自己进行字符转码,将utf8编码转为

     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;
}
转换之后就可以用了

js生成带logo的二维码的更多相关文章

  1. jQuery-qrcode.js 生成带Logo 的二维码

    引入文件  jQuery-qrcode.js 地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https:// ...

  2. js生成带log的二维码(qrcodejs)

    github: qrcodejs cdn: http://static.runoob.com/assets/qrcode/qrcode.min.js #qrcode #qrcode margin: 2 ...

  3. C#生成带logo的二维码

    带logo的二维码生成分为两步骤:首先根据输入的内容生成二维码图片,然后读取本地的logo图片,通过图片处理生成带logo的二维码. 生成的二维码效果如下: 下面直接贴出二维码生成类   QRCode ...

  4. .NET生成带Logo的二维码

    使用ThoughtWorks.QRCode生成,利用这个库来生成带Logo的二维码(就是中间嵌了一个图片的二维码),直接见代码: HttpContext context = HttpContext.C ...

  5. C# ZXing.Net生成二维码、识别二维码、生成带Logo的二维码(二)

    1.使用ZXint.Net生成带logo的二维码 /// <summary> /// 生成带Logo的二维码 /// </summary> /// <param name ...

  6. 涛哥的Python脚本工具箱之生成带Logo的二维码

    近期须要在二维码上加Logo,网上没有找到好用的,于是自己用python写了一个. 须要安装qrcode,PIL库 二维码简称 QR Code(Quick Response Code),学名为高速响应 ...

  7. phpqrcode生成带logo的二维码图片及带文字的二维码图片

    <?php require_once "./phpqrcode/phpqrcode.php"; /** * 这样就可以生成二维码了,实际上在png这个方法里还有几个参数需要使 ...

  8. PHP生成带logo图像二维码的两种方法

    本文主要和大家分享PHP生成带logo图像二维码的两种方法,主要以文字和代码的形式和大家分享,希望能帮助到大家. 一.利用Google API生成二维码Google提供了较为完善的二维码生成接口,调用 ...

  9. js生成带参的二维码

    最近项目中有需求生成带参的二维码,考虑过用JAVA后台生成返回前端展示,后面了解到用jquery的qrcode.js插件可以很好现实 引入js: require.config({ baseUrl : ...

随机推荐

  1. ARP 协议抓包分析

    ARP(Address Resolution Protocol)- 地址解析分析 ARP 协议是根据IP地址获取物理地址的一个TCP/IP协议. 当PC1 想与 PC2 进行通信时,需要同时知道PC2 ...

  2. C#编译器优化那点事

    使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的. 优化代码开关即optimize开 ...

  3. happens-before规则和指令重排

                                                                                                         ...

  4. RESTful小拓展

    RESTful 即Resource Representation State Transfer 相对应Resource 资源层,Representation 表现层,State Transfer状态转 ...

  5. Spring,@Controller,@RequestMapping, @ResponseBody,@RequestParam

    1.@Controller,放在类的上方,使类生效; 2.@RequestMapping,,指定一个映射,method为访问方式,headers为含有指定请求头 3. @ResponseBody将返回 ...

  6. Java面试与回答技巧(1.如何正确的面试)

    在IT行业中,大部分公司很难用有效的方式招到合适的人.直接暴露出来的问题是:・花重金招了一个人,但实际的战斗力还比不上应届毕业生.・招聘了一个知名企业的高管,引入了一些高大上的技术,结果本来稳定的生产 ...

  7. Greenplum测试部署笔记

    按照官方Readme文档在Ubunut16.04上成功编译安装Greenplum最新代码(now:2017-11-12 21:40) 按照文档安装的过程中主要出现两个问题: 1.Root用户安装会卡在 ...

  8. PYTHON练习题 二. 使用random中的randint函数随机生成一个1~100之间的预设整数让用户键盘输入所猜的数。

    Python 练习 标签: Python Python练习题 Python知识点 二. 使用random中的randint函数随机生成一个1~100之间的预设整数让用户键盘输入所猜的数,如果大于预设的 ...

  9. Node笔记四

    异步操作 -Node采用chrome v8 引擎处理javascript脚本 --v8最大特点就是单线程运行,一次只能运行一个任务 -Node大量采用异步操作 --任务不是马上执行,而是插在任务队列的 ...

  10. Hive中Join的原理和机制

    转自:http://lxw1234.com/archives/2015/06/313.htm 笼统的说,Hive中的Join可分为Common Join(Reduce阶段完成join)和Map Joi ...