使用jquery.qrcode生成彩色二维码实例

2024-04-18 14:07:58

jquery.qrcode.js 是居于jquery类库的绘制二维码的插件，用它来实现二维码图形渲染支持canvas和table两种绘图方式。（jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形，这个需要注意。）

下面为测试代码（增加了颜色控制，可以设置4个区块的颜色值，需要指定render为table。），效果如下:

代码如下：

<html>
<head>
<title>JS生成二维码</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<style>
 #output{
 margin-left:300px;
 margin-top:100px;
 }
</style>
</head>
<body>
<div id="output"></div>
<script>
 window.onload = function () {
 var trs = $('#output').qrcode({
  width: 100,
  height: 100,
  render: "canvas", //设置渲染方式 table canvas
  text: utf16to8("javascript生成二维码"),
  background: "#ffffff", //背景颜色
  foreground: "red" //前景颜色
 }).find('tr'), trLen = Math.floor(trs.size() / 2), tdLen = Math.floor(trs.eq(0).find('td').size() / 2), tds, bgColor;
 var colors = [['#ff0000', '#0100e2'], ['#00ed01', '#9f4d95']];
 trs.each(function (j) {
  tds = $(this).find('td');
  tds.each(function (i) {
  bgColor = this.style.backgroundColor;
  if (bgColor == 'red') {
   this.style.backgroundColor = colors[j < trLen ? 0 : 1][i < tdLen ? 0 : 1];
  }
  });
 });
 }
 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>

</body>
</html>

jquery-qrcode这个库是采用 charCodeAt这个方式进行编码转换的，而这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式，英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。

解决方式：在二维码编码前把字符串转换成UTF-8，具体代码如上utf16to8函数

PS：本站还提供了一个功能非常强大的二维码生成工具，感兴趣的朋友可以参考一下：

http://tools.jb51.net/transcoding/jb51qrcode

JavaScript动态生成二维码图片

1.html代码 <div id="qrcode" style="width:200px; height:200px;position: fixed;bottom: 40%; right: 20%;"></div> 2.引入外部js文件 <script src="QRCode.js"></script> 3.方法调用 var qrcode = new QRCode(document.getEleme
微信QQ的二维码登录原理js代码解析

在很多地方就是都出现了使用二维码登录,二维码付款,二维码账户等应用(这里的二维码种马,诈骗就不说了),二维码验证,多终端辅助授权应用开始多起来,这里先说下啥是二维码,其实二维码就是存了二进制数据的黑白图片,当出现要求二维码登录的时候,服务器会生成一条临时的唯一的二维码信息,发送到客户端以二维码(图片)的形式写入到网页,然后你就会看到统一的四个方形的二维码,如果做的好这个二维码信息应该是有时效的,这里暂且不考虑这些,就简单的微信登录作为例子看看吧: 首先说下整个授权流程: 在客户端网页中会不断向服
JS生成和下载二维码的代码

废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8
JavaScript生成二维码图片小结

摘要: 百度百科上是这样介绍二维码的:二维码(Quick Response Code),又称二维条码,它是用特定的几何图形按一定规律在平面(二维方向)上分布的黑白相间的图形,是所有信息数据的一把钥匙.在现代商业活动中,可实现的应用十分广泛,如:产品防伪/溯源.广告推送.网站链接.数据下载.商品交易.定位/导航.电子商务应用.车辆管理.信息传递等.如今智能手机扫一扫(简称313)功能的应用使得二维码更加普遍,随着国内物联网产业的蓬勃发展,更多的二维码技术应用解决方案被开发,二维码成为移动互联网入口
JavaScript纯色二维码变成彩色二维码

本文章主要讨论的是如何将一个纯色二维码变成彩色的. 前段时间公司业务上有这么一个需求,客户不喜欢后台生成的纯色二维码,纯蓝,纯紫,纯绿都不行,想要彩色二维码.然后这个任务都落到我头上了,因为是图片处理,那主要思路就是靠canvas,canvas可以进行像素操作,所以我进行了一些尝试,也踩了一点小坑,具体记录如下. 前置知识 drawImage方法可以把图片画到canvas上,getImageData方法可以获得一个矩形区域所有像素点的信息,返回值的data属性是一个一维数组,储存了所有像素点的信
使用jquery.qrcode.min.js实现中文转化二维码

今天还是要讲一下关于二维码的知识,前几篇讲解中有讲到我使用的可以生成二维码的js是qrcode.js,然后结合Cordovad的插件$cordovaBarcodeScanner插件可以扫描二维码,这样就基本完成了简单的扫一扫功能.后来在项目进行,开始要调用后台数据和传参数到接口的时候发现qrcode.js它只能解析英文或者数字,并且只能解析一个字符串! 而我所需要的是将一个对象转化成二维码,然后在扫描的时候取出对象中的数据,显然qrcode.js不能实现,经过查找,找到另一个jquery.qrc
基于JavaScript实现生成名片、链接等二维码

废话不多说,直接贴代码了,具体内容如下: <div id = "qrcodeid"></div> //生成的二维码放在此 div 中 <script type="text/javascript" src="js/jquery.qrcode.min.js"></script>//引入qrcode.js(到https://github.com/jeromeetienne/jquery-qrcode 下载
使用jquery.qrcode生成彩色二维码实例

jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式.(jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形,这个需要注意.) 下面为测试代码(增加了颜色控制,可以设置4个区块的颜色值,需要指定render为table.),效果如下: 代码如下: <html> <head> <title>JS生成二维码</title>
PHP QRCODE生成彩色二维码的方法

本文实例讲述了PHP QRCODE生成彩色二维码的方法.分享给大家供大家参考,具体如下: 这里重写了下PHPQRCODE,精简了部分代码,合并PNG GIF JPEG的输出. 参数说明: 调用方式: 复制代码代码如下: QRcode::IMGout($text, $outfile = false, $level = QR_ECLEVEL_L, $size = 3, $col=array(array(255,255,255),array(0,0,0)),$margin =2, $saveandp
jquery canvas生成带有二维码的海报

本文实例为大家分享了jquery canvas生成带有二维码海报的具体代码,供大家参考,具体内容如下需求:点击图片弹窗生成带有二维码的海报. 遇到相关问题: 1.生成的图片会模糊.不清晰. 2. 苹果手机和安卓手机文字位置和字体大小有差异. 引入所需要的文件 //jquery.js <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js&qu
Python qrcode 生成一个二维码的实例详解

借助第三方库qrcode实现. 二维码图片生成借助pillow qrcode的安装在命令行中输入 pip install qrcode[pil] 用法: 1.在命令行中输入 qr "Some text" > test.png 2.在python中输入 import qrcode img = qrcode.make('Some data here') 高级用法: 使用QRCode类 import qrcode qr = qrcode.QRCode( version=1, erro
IOS 创建彩色二维码实例详解

IOS 创建彩色二维码因为系统创建的二维码默认都是黑色的,所以突然想改变一下二维码颜色,具体操作有点复杂,而且其中用到了好多C语言的语法,Swift不好写,所以默认用了OC.只贴了.m文件的代码,.h文件就是几个类函数的声明. #import "UIImage+CreateQRCode.h" @implementation UIImage (CreateQRCode) + (UIImage *)createQRCode:(NSString *)string andSize:(CGSi
php实现生成带二维码图片并强制下载功能

本文主要和大家分享php生成带二维码图片并强制下载实现代码,希望能帮助到大家实现一个自己的二维码. /* 下载二维码 */ public function 测试(){ // 接收传递的参数 $data['keys'] = [ 'b01id'=>trim(I('get.b01id')), 'b02id'=>trim(I('get.b02id')), 'b03id'=>trim(I('get.b03id')), 'brid'=>trim(I('get.brid')), 'unicon'
用python生成(动态彩色)二维码的方法(使用myqr库实现)

最近真的感觉到了python生态的强大(倒吸一口凉气) 现在介绍一个可以生成动态二维码的库(myqr) 效果如图: 第一步要安装myqr库在cmd中直接用pip安装 pip install myqr 第二步 from MyQR import myqr import os version, level, qr_name = myqr.run( words="https://www.baidu.com", # 可以是字符串,也可以是网址(前面要加http(s)://) version=1
C#基于QRCode实现动态生成自定义二维码图片功能示例

本文实例讲述了C#基于QRCode实现动态生成自定义二维码图片功能.分享给大家供大家参考,具体如下: 二维码早就传遍大江南北了,总以为它是个神奇的东西,其实细细研究之后发现也没想象的那么神秘,碰巧最近项目中需要动态生成二维码,解决完实际问题之后,简单总结整理一下.项目中除了动态生成二维码之外,还实现了动态生成自定义图片,二维码可以是其中的元素. 设置图片的数据源为动态图片 <body> <form id="form1" runat="server"
Python使用MyQR制作专属动态彩色二维码功能

Python中有一个非常有趣好玩的库MyQR,不仅可以制作各种漂亮的二维码,还可以生成动态彩色二维码. MyQR是一个能够生成自定义二维码的第三方库,你可以根据需要生成普通二维码.带图片的艺术二维码,也可以生成动态二维码. 生成动态二维码效果图如下: 二维码扫描上图看看我们首先要安装MyQR库,直接用pip3 install myqr(or MyQR).需要注意的是MyQR依赖于Python3,在Python2的环境下可能无法正常运行. 这个库提供了两种使用方法,一种是直接使用命令行的方式,
基于Python生成个性二维码过程详解

一.问题描述通过调用MyQR模块来实现生成个人所需二维码. 安装: pip install myqr 二.代码实现 1.普通二维码 from MyQR import myqr # 普通二维码 myqr.run( words='http://www.cnblogs.com/mayi0312', save_name='qrcode.png' ) 效果图: 2.带图片的艺术二维码光是二维码,太单调了点.我们可以加上我们想要的图片,使二维码更具辨识度! 准备的Logo图片: 当然,也可以选择其他个人

使用jquery.qrcode生成彩色二维码实例

相关推荐

随机推荐