Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>链接转二维码生成</title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<script src="./js/alert.js" charset="utf-8"></script>
<script src="./js/jquery.min.js"></script>
<style type="text/css">
.qrcode{
min-width: 260px;
padding: 10px;
background-color: #f0f0f0;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.js"></script>
</head>
<body class="indexbody">
<!--QQ/微信分享标题图-->
<div><img src="./images/qr_logo.jpg" alt="QQ/微信分享标题图" style="display:none;"></div>
<div class="container">
<div class="panel panel-sm">
<div class="panel-heading clearfix">
<label><i class="fa fa-bookmark"></i>二维码生成器</label>
</div>
<div class="form-group form-group-sm">
<div class="col-md-10 ">
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-md-10 ">
</div>
</div>
<form action="" class="form-horizontal panel-body" id="form1" method="post">
<ul class="nav nav-tabs nav-tabs-sm" role="tablist" id="mytabs">
<li role="presentation" class="active">
<a href="http://gz.offcn.com/" role="tab" data-toggle="tab" id="tab1" aria-controls="pane1"><strong>链接及二维码生成工具</strong></a>
</li>
</ul>
<div class="tab-content" style="padding-top: 15px;">
<div role="tabpanel" class="tab-pane fade in active" id="pane1" aria-labelledby="tab1">
<div class="form-group form-group-sm">
<label class="control-label col-md-2">活动链接</label>
<div class="col-md-10 ">
<input name="txtContent" id="txtContent" class="form-control input-normal" placeholder="请输入宣传活动链接">
</div>
</div>
<div class="form-group form-group-sm">
<label class="control-label col-md-2">logo</label>
<div class="col-md-10">
<input type="file" name="Getlogo" title="上传logo" value="上传logo" id="getLogo" multiple="multiple" class="btn btn-default"
style="display: inline-block;" onchange="docImgUrl(event)" />
<button name="closelogo" class="btn btn-default" type="button" onclick="closeLogo()" title="close_logo">去除logo</button>
</div>
</div>
<div class="form-group form-group-sm">
<label class="control-label col-md-2">二维码大小</label>
<div class="col-md-10">
<label><input name="codeSize" type="radio" checked="checked" value="260" />小(260)</label>   
<label><input name="codeSize" type="radio" value="350" />中(350)</label>   
<label><input name="codeSize" type="radio" value="500" />大(500)</label>   
<label><input name="codeSize" type="radio" value="800" />特大(800)</label>
</div>
</div>
<div class="form-group form-group-sm">
<label class="control-label col-md-2">二维码图像</label>
<div class="col-md-10">
<div id="qrcode" class="qrcode"></div>
<!-- <div class="qrcode-box">
<canvas id="myCanvas" width="260" height="260"></canvas>
</div> -->
<p class="m-top-10 text-muted">右键另存为本地~ 使用手机扫一扫检查下下</p>
</div>
</div>
<div class="form-group form-group-sm">
<div class="col-md-10 col-md-offset-2">
<p class="form-control-static text-danger" id="tips"></p>
</div>
</div>
</div>
</div>
<hr class="sm">
<div class="btn-footer">
<button name="btnCreate" class="btn btn-success" type="button" onclick="f_onCreateQrcode();" title="将根据您填写的内容生成二维码图像">开始生成</button>
<button name="btnClear" class="btn btn-default" type="button" onclick="f_onClearQrcode();" title="清除">清除</button>
</div>
<hr class="sm">
<div class="btn-footer">
<button name="btnCreate" class="btn btn-danger dropdown-toggle" type="button" id="save" title="将根据您填写的内容生成二维码图像">下载并保存</button>
</div>
</form>
</div>
</div>
<script src="./js/modernizr-2.8.3.js" type="text/javascript"></script>
<script src="./js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="./js/jquery.qrcode.js"></script>
<script type="text/javascript">
$(function(){ })
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
//设置 qrcode 参数
var makeQrcode = function(url, qrSize, ImgData, logoSize) {
$("#qrcode").qrcode({
render: "canvas",
text: url,
width: qrSize, //二维码的宽度
height: qrSize,
background: "#ffffff", //二维码的后景色
foreground: "#000000", //二维码的前景色
src: ImgData,
imgWidth: logoSize,
imgHeight: logoSize
});
}
/*默认状态*/
var nowUrl = '';
var imgURl = "./images/qr_logo.png";
var nowSize = 260;
var nowSizeRulse = function() {
if (nowSize == 260) {
nowLogoSize = 60;
} else if (nowSize == 350) {
nowLogoSize = 80;
} else if (nowSize == 500) {
nowLogoSize = 110;
} else if (nowSize == 800) {
nowLogoSize = 180;
};
}
nowSizeRulse();
makeQrcode(nowUrl, nowSize, imgURl, nowLogoSize);
/*二维码大小*/
var codeSize = document.getElementsByName("codeSize");
function getQrSize() {
for (var i = 0; i < codeSize.length; i++) { //遍历Radio
if (codeSize[i].checked) {
nowSize = codeSize[i].value;
}
}
nowSizeRulse();
}
/*Logo上传*/
function docImgUrl(e) {
for (var i = 0; i < e.target.files.length; i++) {
var file = e.target.files[i];
//console.log(file);
if (!(/^image\/.*$/i.test(file.type))) {
continue; //不是图片 就跳出这一次循环
}
//实例化FileReader API
var freader = new FileReader();
freader.readAsDataURL(file);
freader.onload = function(e) {
//console.log(e);
//console.log( e.target.result);
imgURl = e.target.result;
$("#qrcode").empty();
makeQrcode(nowUrl, nowSize, imgURl, nowLogoSize);
}
}
}
//生成二维码图像
function f_onCreateQrcode() {
if ($("#txtContent").val() == '') {
popup({
'content': '请输入链接哦'
});
return false;
}else{
nowUrl = $("#txtContent").val()
}
$('#urltxt').val(nowUrl)
$("#qrcode").empty();
getQrSize();
makeQrcode(nowUrl, nowSize, imgURl, nowLogoSize);
}
var closeLogo = function() {
$("#getLogo").val("");
$("#qrcode").empty();
imgURl = "";
makeQrcode(nowUrl, nowSize, imgURl, 0);
};
//清除二维码内容
function f_onClearQrcode() {
if (txtContent) {
$("#txtContent").val('')
$('#urltxt').val('')
// 使用 API
$("#qrcode").empty();
nowSize = 260;
nowSizeRulse();
popup({
'content': '页面信息已清除~'
});
setTimeout(function() {
tips.html("");
}, 3000)
nowUrl = 'http://gz.offcn.com/';
imgURl = "./images/qr_logo.png";
makeQrcode(nowUrl, nowSize, imgURl, nowLogoSize);
}
}
var imgId = document.getElementById("imgId");
document.getElementById("save").onclick = function (){
downLoad(saveAsPNG(canvas));
}
// 保存成png格式的图片
function saveAsPNG(canvas) {
return canvas.toDataURL("image/png");
}
// 保存成jpg格式的图片
function saveAsJPG(canvas) {
return canvas.toDataURL("image/jpeg");
}
// 保存成bmp格式的图片 目前浏览器支持性不好
function saveAsBMP(canvas) {
return canvas.toDataURL("image/bmp");
}
function downLoad(url){
var oA = document.createElement("a");
oA.download = '二维码';// 设置下载的文件名，默认是'下载'
oA.href = url;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
}
</script>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )