基于Jquery的多彩二维码的生成
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/Scripts/PickColor.js"></script>
<style type="text/css">
#iColorPicker {
color: #fff;
background: #333;
border: 1px solid #ccc;
padding: 5px;
z-index: 9999;
}
#colorPreview {
height: 50px;
}
table.pickerTable {
border-collapse: collapse;
}
table.pickerTable td {
width: 12px;
height: 14px;
border: 1px solid #000;
cursor: pointer;
}
.logoClass {
margin: 5px 0;
}
.logoClass img {
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<td>背景颜色：</td>
<td><input name="bgcolor" id="bgcolor" type="text" value="" class="temp" hx="#ccc" /></td>
</tr>
<tr>
<td>前景颜色：</td>
<td><input name="fgcolor" id="fgcolor" type="text" value="" class="temp" hx="#000" /></td>
</tr>
<tr>
<td>渐变颜色：</td>
<td><input name="gccolor" id="gccolor" type="text" value="" class="temp" hx="#ee1d24" /></td>
</tr>
<tr>
<td>纠错等级：</td>
<td>
<select id="el">
<option value="h">高</option>
<option value="q">中等</option>
<option value="m">低</option>
<option value="l">最低</option>
</select>
</td>
</tr>
<tr>
<td>尺寸大小（单位像素）：</td>
<td>
<input type="text" id="wwidth" value="300"/>
</td>
</tr>
<tr>
<td>静区（外边距）:</td>
<td>
<input type="text" id="mwidth" value="30" />
</td>
</tr>
<tr>
<td>定位点颜色（外框）</td>
<td><input name="ptcolor" id="ptcolor" type="text" class="temp" value="" hx="#00bff3" /></td>
</tr>
<tr>
<td>定位点颜色（内点）</td>
<td><input name="inptcolor" id="inptcolor" type="text" class="temp" value="" hx="#197b30" /></td>
</tr>
<tr>
<!--若要将添加的logo导入到二维码，需将图片上传到服务器，这里以静态图片为例-->
<td>logo图片：</td>
<td>
<input type="file" id="logo" name="logo" onchange="previewImage(this.id, 'imgPre');" />
<div class="logoClass">
<img id="imgPre" src="http://yintai.aitoy.com/Images/Presentation/XintiandiOF/stati2.png" width="100" height="100" />
</div>
</td>
</tr>
<tr>
<td>待输入文本：</td>
<td>
<textarea id="txtInfo" name="txtInfo" style="width: 300px;height: 100px"></textarea>
</td>
</tr>
</table>
<hr/>
<input type="button" id="btnOk" name="btnOk" value="提交" />
<hr />
<img id="imgPath" src="" />
</body>
</html>
<script>
function getBrowser() {
if (navigator.userAgent.indexOf("MSIE") >= 1) {
return "ie";
} else if (navigator.userAgent.indexOf("Firefox") > 0) {
return "ff";
} else if (navigator.userAgent.indexOf("Chrome") > 0) {
return "chrome";
}
}
function previewImage(fileId, imgId) {
var url = "";
var b = getBrowser();
switch (b) {
case "ie":
url = document.getElementById(fileId).value;
break;
case "ff":
url = window.URL.createObjectURL(document.getElementById(fileId).files.item(0));
break;
case "chrome":
url = window.URL.createObjectURL(document.getElementById(fileId).files.item(0));
break;
}
document.getElementById(imgId).src = url;
}
$(function () {
$('.temp').iColor(null, { 'x': -175, 'y': 200 });
});
$(function() {
$("#btnOk").click(function() {
var bg = $("#bgcolor").val().split("#")[1];
if (bg.length == 3) {
bg = bg[0] + bg[0] + bg[1] + bg[1] + bg[2] + bg[2];
}
var fg = $("#fgcolor").val().split("#")[1];
if (fg.length == 3) {
fg = fg[0] + fg[0] + fg[1] + fg[1] + fg[2] + fg[2];
}
var gc = $("#gccolor").val().split("#")[1];
if (gc.length == 3) {
gc = gc[0] + gc[0] + gc[1] + gc[1] + gc[2] + gc[2];
}
var el = $("#el").val();
var w = $("#wwidth").val();
var m = $("#mwidth").val();
var pt = $("#ptcolor").val().split("#")[1];
if (pt.length == 3) {
pt = pt[0] + pt[0] + pt[1] + pt[1] + pt[2] + pt[2];
}
var inpt = $("#inptcolor").val().split("#")[1];
if (inpt.length == 3) {
inpt = inpt[0] + inpt[0] + inpt[1] + inpt[1] + inpt[2] + inpt[2];
}
var logo = $("#imgPre").attr("src");
var txtInfo = $("#txtInfo").val();
var html = "http://qr.liantu.com/api.php?bg=" + bg + "&fg=" + fg + "&gc=" + gc + "&el=" + el + "&w=" + w + "&m=" + m + "&pt=" + pt + "&inpt=" + inpt + "&logo=" + logo + "&text=" + txtInfo;
$("#imgPath").attr("src", html);
});
});
</script>
源码下载：链接：http://pan.baidu.com/s/1hq49URi 密码：c043（内含离线生成二维码js文件）
基于Jquery的多彩二维码的生成的更多相关文章
- 基于Metronic的Bootstrap开发框架经验总结（14）--条码和二维码的生成及打印处理
在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...
- 基于canvas的二维码邀请函生成插件
去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...
- 基于jQuery经典扫雷游戏源码
分享一款基于jQuery经典扫雷游戏源码.这是一款网页版扫雷小游戏特效代码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <center> <h1>j ...
- 二维码的生成细节和原理 -- 转http://news.cnblogs.com/n/191671/
二维码又称 QR Code,QR 全称 Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的 Bar Code 条形码能存更多的信息,也能表示更多的数据类型:比如:字 ...
- 【来龙去脉系列】QRCode二维码的生成细节和原理
二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能表示更多的数据类型:比如:字符,数字, ...
- Java 条形码 二维码 的生成与解析
Barcode简介 Barcode是由一组按一定编码规则排列的条,空符号,用以表示一定的字符,数字及符号组成的,一种机器可读的数据表示方式. Barcode的形式多种多样,按照它们的外观分类: Lin ...
- ios-深度解析二维码的生成与使用
利用一个小demo来对二维码进行学习,总共四个界面(主界面,生成二维码界面,识别二维码界面,扫描二维码界面) 一.二维码的介绍 1.什么是二维码? 二维条码/二维码是用某种特定的 ...
- Android zxing 解析二维码，生成二维码极简demo
zxing 官方的代码很多,看起来很费劲,此demo只抽取了有用的部分,实现了相机预览解码,解析本地二维码,生成二维码三个功能. 简化后的结构如下: 废话少说直接上代码: BaseDecodeHand ...
- Swift开发小技巧--扫描二维码,二维码的描边与锁定,设置扫描范围,二维码的生成(高清,无码,你懂得!)
二维码的扫描,二维码的锁定与描边,二维码的扫描范围,二维码的生成(高清,无码,你懂得!),识别相册中的二维码 扫描二维码用到的三个重要对象的关系,如图: 1.懒加载各种类 // MARK: - 懒加载 ...
随机推荐
- Android菜鸟的成长笔记（17）—— 再看Android中的Unbounded Service
原文:Android菜鸟的成长笔记(17)-- 再看Android中的Unbounded Service 前面已经写过关于startService(Unbounded Service)的一篇文章:&l ...
- FTP文件操作之上传文件
上传文件是一个比较常用的功能,前段时间就做了一个上传图片的模块.开始采用的是共享文件夹的方式,后来发现这种方法不太好.于是果断将其毙掉,后来选择采用FTP的方式进行上传.个人感觉FTP的方式还是比较好 ...
- Linux curl使用简单介绍 （转）
Curl是Linux下一个很强大的http命令行工具,其功能十分强大. 1) 二话不说,先从这里开始吧! $ curl http://www.linuxidc.com 回车之后,www.linuxid ...
- 交换A与B值的四种方法
在网上看到了这样一道面试题,"int A=5,int B=2,怎样交换A与B的值",或许这是一道简单到不能再简单的题,但能作为一道面试题,肯定有其独特之处 大多数人会通过定义第三个 ...
- EL与JSTL注意事项汇总
EL使用表达式(5一个 问题) JSTL使用标签(5问题) 什么是EL.它可以用做? EL全名Expression Language在JSP使用页面 格公式${表达式} 样例${requestScop ...
- Nexon由Xsolla全球支付服务
韩国游戏公司纳克森决Nexon定从今年10月1日起,与Xsolla开展Playspan的合作,向全球提供更好的服务. 当Nexon的玩家随时想购买NX点数的时候.Xsolla的服务能够进入程序,让您的 ...
- 查看oracle数据库的连接数以及用户
查看oracle数据库的连接数以及用户 11.查询oracle的连接数2select count(*) from v$session;32.查询oracle的并发连接数4select count(*) ...
- 一个简单的样例看明确怎样利用window.location.hash实现ajax操作时浏览器的前进/后退功能
我们知道JavaScript中非常早就提供了window.history对象,利用history对象的forward().go().back()方法可以方便实现不同页面之间的前进.后退等这样的导航功能 ...
- /dev/shm（转）
引用网上:/dev/shm首先可以看出来/dev/shm是一个设备文件, 可以把/dev/shm看作是系统内存的入口, 可以把它看做是一块物理存储设备,一个tmp filesystem, 你可以通过这 ...
- STL中间set具体用法！！！！
1.关于set C++ STL 之所以得到广泛的赞誉,也被非常多人使用.不仅仅是提供了像vector, string, list等方便的容器,更重要的是STL封装了很多复杂的数据结构算法和大量经常使用 ...