Demo效果图:
源代码:
@{
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文件）
时间： 2024-11-09 21:46:20