js生成带logo的二维码
作为一名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的二维码的更多相关文章
- jQuery-qrcode.js 生成带Logo 的二维码
引入文件 jQuery-qrcode.js 地址:https://blog-static.cnblogs.com/files/kitty-blog/jquery-qrcode.js https:// ...
- js生成带log的二维码(qrcodejs)
github: qrcodejs cdn: http://static.runoob.com/assets/qrcode/qrcode.min.js #qrcode #qrcode margin: 2 ...
- C#生成带logo的二维码
带logo的二维码生成分为两步骤:首先根据输入的内容生成二维码图片,然后读取本地的logo图片,通过图片处理生成带logo的二维码. 生成的二维码效果如下: 下面直接贴出二维码生成类 QRCode ...
- .NET生成带Logo的二维码
使用ThoughtWorks.QRCode生成,利用这个库来生成带Logo的二维码(就是中间嵌了一个图片的二维码),直接见代码: HttpContext context = HttpContext.C ...
- C# ZXing.Net生成二维码、识别二维码、生成带Logo的二维码(二)
1.使用ZXint.Net生成带logo的二维码 /// <summary> /// 生成带Logo的二维码 /// </summary> /// <param name ...
- 涛哥的Python脚本工具箱之生成带Logo的二维码
近期须要在二维码上加Logo,网上没有找到好用的,于是自己用python写了一个. 须要安装qrcode,PIL库 二维码简称 QR Code(Quick Response Code),学名为高速响应 ...
- phpqrcode生成带logo的二维码图片及带文字的二维码图片
<?php require_once "./phpqrcode/phpqrcode.php"; /** * 这样就可以生成二维码了,实际上在png这个方法里还有几个参数需要使 ...
- PHP生成带logo图像二维码的两种方法
本文主要和大家分享PHP生成带logo图像二维码的两种方法,主要以文字和代码的形式和大家分享,希望能帮助到大家. 一.利用Google API生成二维码Google提供了较为完善的二维码生成接口,调用 ...
- js生成带参的二维码
最近项目中有需求生成带参的二维码,考虑过用JAVA后台生成返回前端展示,后面了解到用jquery的qrcode.js插件可以很好现实 引入js: require.config({ baseUrl : ...
随机推荐
- WebDriver元素等待机制
能否构建健壮和可靠的测试是UI自动化测试能否成功的关键因素之一.但实际情况是当一个测试接着一个测试执行的时候,常会遇到各种不同的状况.比如脚本去定位元素或去验证程序的运行状态时,有时会发现找不到元素, ...
- asp.net 调试与iis部署的问题
第一个问题:编译器错误信息: CS0016: 未能写入输出文件"c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET ...
- 实现Redhat Linux 6和Windows通过Windows Server AD统一认证并共享访问Oracle ZS存储系统
Windows Server 2012 AD设置 1. 建立新的组织单位OU 为用户提前建立好OU,是为了AD用户管理简单清晰. 2. 建立新的用户和用户组 建立新的用户的时候,要同时将用户归属到 ...
- AngularJS学习笔记之directive——scope选项与绑定策略
开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细 ...
- Java—SSH(MVC)
Java-SSH(MVC) JAVA三大框架的各自作用 hibernate是底层基于jdbc的orm(对象关系映射)持久化框架,即:表与类的映射,字段与属性的映射,记录与对象的映射 数据库模型 也就是 ...
- 关于mysql保存数据的时候报问题分析 普通的字符串或者表情都是占位3个字节,所以utf8足够用了,但是移动端的表情符号占位是4个字节,普通的utf8就不够用了,为了应对无线互联网的机遇和挑战、避免 emoji 表情符号带来的问题、涉及无线相关的 MySQL 数据库建议都提前采用 utstring value:'\xF0\x9F\x98\x82\xF0\x9F...' for ...
问题分析 普通的字符串或者表情都是占位3个字节,所以utf8足够用了,但是移动端的表情符号占位是4个字节,普通的utf8就不够用了,为了应对无线互联网的机遇和挑战.避免 emoji 表情符号带来的问题 ...
- Colossus: Successor to the Google File System (GFS)
Colossus is the successor to the Google File System (GFS) as mentioned in the recent paper on Spanne ...
- Android 路由框架ARouter最佳实践
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/76165252 本文出自[赵彦军的博客] 一:什么是路由? 说简单点就是映射页面跳转 ...
- Apache 流框架 Flink,Spark Streaming,Storm对比分析(一)
本文由 网易云发布. 1.Flink架构及特性分析 Flink是个相当早的项目,开始于2008年,但只在最近才得到注意.Flink是原生的流处理系统,提供high level的API.Flink也提 ...
- php 微信JS-SDK封装类
JSSDK使用步骤: 步骤一:绑定域名 步骤二:引入JS文件 步骤三:通过config接口注入权限验证配置 步骤四:通过ready接口处理成功验证 步骤五:通过error接口处理失败验证 具体步骤方法 ...