基于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: - 懒加载 ...
随机推荐
- C++习题 对象数组求最大值
Description 建立一个对象数组,内放n(<10)个学生的数据(学号.成绩),设立一个函数max,用指向对象的指针作函数参数,在max函数中找出n个学生中成绩最高者,并输出其学号. In ...
- WebxFrameworkFilter 请求响应过程
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTFRpYW5jaGFv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...
- 无奈而又苦逼的二分版本号回退法定位新引入的bug！！！
昨天測试人员和开发者都发现, 某新版本号有严重的bug. 群里已经開始嚷嚷了, 但没有谁知道是谁引入的问题.本来呢, 这个问题不应该是由我去定位, 但主管让我帮定位一下, 毕竟时间太紧急, 必须尽快 ...
- Android - 和其他APP交互 - 获得activity的返回值
启用另一个activity不一定是单向的.也可以启用另一个activity并且获得返回值.要获得返回值的话,调用startActivityForResult()(而不是startActivity()) ...
- JListDemo
Tips: (1)JList不能自动滚动,要想为列表框加上滚动条,必须将JList插入到一个JScrollPane中,然后将JScollPane而不是JList,插入到外围JPanel上 (2)Lis ...
- Following unknown configure options were used:--enable-fpm
跑cd php-5.2.13安装时间 ./configure --prefix=/usr/local/php/ --with-config-file-path=/usr/local/php/etc ...
- struts详细解释拦截器
1.拦截器:Struts2拦截器将一个Action要么Action的方法.之前或截取后场,和Struts2拦截器是可插拔,拦截器AOP一种实现． WebWork:拦截器是动态拦截Action调用的对象 ...
- hadoop-HBase-observer的一个样例
hbase(main):021:0> describe 'users' DESCRIPTION ...
- jquery经常使用事件（整理）
Jquery事件 (一).事件列表. 1.blur() 当失去焦点时触发.包含鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触发. 3.click() 当鼠标单 ...
- 如何对 GIT 分支进行规划? （转）
项目背景: 该项目是在2011年11月份使用Asp.net三层帮荷兰某个客户开发的机票预定系统 该客户主要是做中国与欧洲的旅行社业务,特别是最近两年由于中国的发展因此客户也越来越重视机票业务 于是他们 ...