基于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: - 懒加载 ...
随机推荐
- 公钥\私人 ssh避password登陆
相关概念以前见过,决不要注意,使用公共密钥管理之前,腾讯云主机的备案机,非常头发的感觉,查了一下相关资料,这里总结下: 字符a:192.168.7.188 (ubuntu) 字符b:192.168.7 ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
- windows 设置脚本IP
毫无疑问,在windows设置IP非常方便,因为有操作简单,直观的界面.通过图形用户界面设置IP在一般情况下是足够.但是,对于那些谁经常出差,由人产生的转换工作,这样的变化IP无疑耗时且不方便.假设一 ...
- Unity 3D使用GameObject创建一个简单的可移动物体
于Unity 3D游戏的开发.游戏脚本需要3D模拟组合,该脚本将被写入阻力3D为了达到效果对象. 以下是一个小实例,使用Unity 3D实现一个可控制移动的小人.小人能够向前.向后.向左和向右移动. ...
- SDL2来源分析7：演出（SDL_RenderPresent()）
===================================================== SDL源代码分析系列文章上市: SDL2源码分析1:初始化(SDL_Init()) SDL2 ...
- 键盘enter事件时间页面绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Sizzle.selectors.relative [ 源代码分析 ]
1 jQuery 对象Sizzle.selectors.relative中存放了块间关系符和相应的块间关系过滤函数,称为"块间关系过滤函数集" 块间关系符共同拥有4种,其含义和过滤 ...
- remine chart2安装
http://blog.csdn.net/kufeiyun/article/details/9213911
- Webx相框：RequestContext详细说明
RequestContext RequestContext它可以被看作是request和response飞度.多于RequestContext还可以串起来.喜欢Filter像链条. 每个外Reques ...
- 试图加载格式不正确的程序。 (Exception from HRESULT: 0x8007000B)
原文:试图加载格式不正确的程序. (Exception from HRESULT: 0x8007000B) 今天在电脑上部署公司的项目,出现这个错误.Bing后,找到原来是因为项目是32位的,而我的系 ...