基于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: - 懒加载 ...
随机推荐
- poj 1384 Piggy-Bank（全然背包）
http://poj.org/problem?id=1384 Piggy-Bank Time Limit: 1000MS Memory Limit: 10000K Total Submissions: ...
- 新手学Unity3d的一些网站及相应学习路线
一.unity3d有什么优势 如果您对开发游戏感兴趣,而又没有决定选择哪一个游戏引擎,别犹豫了 unity3d是一个很好的选择! 就我来看unity3d优势主要有以下几方面:首先部署简单,自带了一个I ...
- flask+gevent+gunicorn+nginx 初试
1.安装flask pip install flask 2.安装gevent pip install gevent 3.安装gunicorn pip install gunicorn 版本信息例如以下 ...
- 在SQL Server引用dll的流程
原文:在SQL Server引用dll的流程 在SQL Server中引用dll分为两个步骤 1.创建一个dll文件 2.把dll文件放进SQL Server的程序集中.然后定义一个Function, ...
- Webots入门(二)-build up a controller
A simple controller 控制器程序读取传感器的值,然后改动行走速度来避开障碍物. 以下是控制器源码mybot_simple.c: #include<webots/robot.h& ...
- Html5用Canvas制作画图板
需求: 绘制多边形 可填充颜色 可设置文字 可移动,可删除 鼠标按住后,抬起之前线段应该尾随鼠标当前位置 可与后台方便的进行数据交互,保存到后台,或将数据从后台取到前台显示对应的图形 思考: 第一想到 ...
- 真实故事：网站遭遇DOS攻击
网站遭遇DOS攻击 一个.事件背景 长假对于IT人员来说是个短暂的休整时期,可IT系统却一时也不能停.越是节假日,越可能出大问题,以下要讲述的就是一起遭受DOS攻击的案例. 春节长假刚过完,小李 ...
- 【翻译自mos文章】rman 备份时报：ORA-02396: exceeded maximum idle time
rman 备份时报:ORA-02396: exceeded maximum idle time 參考原文: RMAN backup faling with ORA-02396: exceeded ma ...
- What is Observer and Observable and when we used these?
转会:http://stackoverflow.com/questions/13744450/interview-when-do-we-use-observer-and-observable
- 使用live delegate on解决js后装html故障问题
今天写一个前端的东西.每学到更多的知识.几下就能写几行代码.代码行数十个.代码几个文件量--这是真的.一直以来研究的前端遇到的问题仍然在实践百度谷歌问答. 我今天遇到这样的问题:已经写js代码,正确a ...