Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>在线生成二维码</title>
<link rel="stylesheet" href="https://ui.junyouyun.com/wmlh/layui/css/layui.css" media="all"/>
<style>
* { margin: 0; padding: 0;}
html,body{ width:100%;height:100%;background-color: #FFFFFF;display:flex; }
.left{ width:60%;height:100%; }
.right {width:40%;height:100%;background-color:#FAFAFA;display: flex;align-items: center;justify-content: center;}
.qrcode_neirong {margin-left: 10%;width: 80%;margin-top: 5%;}
.qrcode_neirong textarea {width: 100%;}
.qrcode_color {margin-left: 10%;margin-top: 5%;width: 80%;}
.qrcode_margin {margin-left: 10%;margin-top: 5%;width: 80%;}
.mabianju,.rongcuolv {width:100%;margin-top: 2%;}
.layui-form-label { font-weight:bold; }
.layui-icon-tips { margin-left:5%; }
.text_align_left { text-align:left; }
.file {position: relative;display: inline-flex;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;margin-top: .5%;cursor: pointer;}
.file input { position: absolute; font-size: 100px; right: 0; top: 0; opacity: 0;}.file:hover { background: #AADFFD; border-color: #78C3F3; color: #004974; text-decoration: none;}
.qrcode_logo_div { position:relative;width:60px;height:60px;margin-left: 5%;display:none; }
.qrcode_logo { width:100%;height:100%;border: 1px solid #CCCCCC;border-radius: 2px;}
.upload_image { display: flex;align-items: center; }
.qrcode_logo_delete {position:absolute;top: -15%;right: -15%;background-color: #FFFFFF;border-radius: 999px;cursor: pointer;}
.layui-form-radio {margin: 2px 15px 0 0;}
#zdycc {width: 15%;display: none;margin-left: -3%;}
.tips_text {position: absolute;top: 40%;font-weight: bold;}
.right_qrcode_div {text-align: center;width: 200px;height: 200px;background-color: #FFFFFF;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;position: relative;}
.right_qrcode_div img {width: 100%;}
.right_save_div {width: 100%;margin-top: 5%;text-align: center;}
</style>
</head>
<body>
<div class="left layui-form">
<div class="layui-input-block qrcode_neirong">
<textarea placeholder="请输入二维码内容" id="qrcode_neirong" class="layui-textarea"></textarea>
</div>
<div class="layui-form-item qrcode_margin">
<div class="layui-inline" style="width: 100%;height:60px;">
<label class="layui-form-label text_align_left" style="height: 100%; display: flex; align-items: center;padding: 0 15px;">Logo:</label>
<div class="layui-input-block" style="height: 100%;display: flex;">
<div class="upload_image">
<a href="javascript:;" class="file">上传logo <input type="file" id="upload_image"></a>
</div>
<div class="qrcode_logo_div">
<img class="qrcode_logo" src="">
<i class="layui-icon layui-icon-delete qrcode_logo_delete"></i>
</div>
</div>
</div>
</div>
<div class="layui-form-item qrcode_margin">
<div class="layui-inline" style="width: 100%;">
<label class="layui-form-label text_align_left">尺寸<small>px</small>:</label>
<div class="layui-input-block">
<input type="radio" name="chicun" value="200" title="200×200" lay-filter="chicun" checked="checked">
<input type="radio" name="chicun" value="300" title="300×300" lay-filter="chicun">
<input type="radio" name="chicun" value="400" title="400×400" lay-filter="chicun">
<input type="radio" name="chicun" value="500" title="500×500" lay-filter="chicun">
<input type="radio" name="chicun" value="zdy" title="自定义尺寸" lay-filter="chicun">
<input type="number" id="zdycc" step="1" class="layui-input" placeholder="填写数字">
</div>
</div>
</div>
<div class="layui-form-item qrcode_color">
<div class="layui-inline" style="width:48%;">
<label class="layui-form-label text_align_left">码颜色:</label>
<div class="layui-input-block">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="#000000" placeholder="请选择码颜色" class="layui-input" id="colorDark" readonly="readonly">
</div>
<div class="layui-inline" style="left: -11px;">
<div class="colorDark"></div>
</div>
</div>
</div>
<div class="layui-inline" style="width:48%;">
<label class="layui-form-label text_align_left">背景色:</label>
<div class="layui-input-block">
<div class="layui-input-inline" style="width: 120px;">
<input type="text" value="#FFFFFF" placeholder="请选择背景色" class="layui-input" id="colorLight" readonly="readonly">
</div>
<div class="layui-inline" style="left: -11px;">
<div class="colorLight"></div>
</div>
</div>
</div>
</div>
<div class="layui-form-item qrcode_margin">
<div class="layui-inline" style="width: 100%;">
<label class="layui-form-label text_align_left tips mabianju_" data-tips_="mabianju_" data-tips='二维码图案距离四周的边距'>码边距<i class="layui-icon layui-icon-tips"></i>:</label>
<div class="layui-input-block" style="position: relative;">
<div class="demo-slider mabianju"></div>
<div class="tips_text" style="left: 14%;">当前页边距<span class="mabianju__">10</span>px</div>
<input type="hidden" id="mabianju" value="20">
</div>
</div>
</div>
<div class="layui-form-item qrcode_margin">
<div class="layui-inline" style="width: 100%;">
<label class="layui-form-label text_align_left tips rongcuolv_" data-tips_="rongcuolv_" data-tips="容错率设置越高，可在遮挡越多的情况下被扫描出来。">容错率<i class="layui-icon layui-icon-tips"></i>:</label>
<div class="layui-input-block" style="position: relative;">
<div class="demo-slider rongcuolv"></div>
<div class="tips_text" style="left: 86%;">当前容错率:<span class="rongcuolv__">H 30%</span></div>
<input type="hidden" id="rongcuolv" value="H">
</div>
</div>
</div>
<div class="right_save_div"><div class="right_save layui-btn layui-btn-normal">下载二维码</div></div>
</div>
<div class="right">
<div class="right_qrcode_div" id="qrcode"></div>
</div>
<script type="text/javascript" src="https://ui.junyouyun.com/wmlh/jquery-3.2.0.min.js"></script>
<script type="text/javascript" src="https://ui.junyouyun.com/wmlh/layui/layui.js"></script>
<script type="text/javascript" src="qrcode.js"></script>
<script>
layui.use(['colorpicker','slider','form'], function(){
var $ = layui.$
,form = layui.form
,slider = layui.slider
,colorpicker = layui.colorpicker
,tip_index = 0
,qrcode;
// 提示语
$(document).on('mouseenter', '.tips', function () {
tip_index = layer.tips($(this).data('tips'), '.'+$(this).data('tips_'), { time: 0, tips: 3 });
}).on('mouseleave', '.tips' , function () {
layer.close(tip_index);
});
qrcode = new QRCode(document.getElementById("qrcode"), {
width : 200,
height : 200,
colorDark : "#000000", // 码颜色
colorLight : "#FFFFFF", // 背景色
margin : "0",
correctLevel : QRCode.CorrectLevel.H
});
// 统一生成二维码
function shengcheng(){
qrcode.clear();
$('#qrcode').empty();
var elText = document.getElementById("qrcode_neirong");
if (!elText.value) {
layer.msg('请输入二维码内容',{icon:0,time:2000});
// elText.focus();
return false;
}
// 获取尺寸
var chicun = $('input[type=radio][name=chicun]:checked').val();
if( chicun == 'zdy' ){
chicun = $('#zdycc').val();
}
if( !chicun ){
chicun = 200;
}
// 容错率
var rongcuolv = $('#rongcuolv').val(),correctLevel;
if( rongcuolv == 'L' ){
correctLevel = QRCode.CorrectLevel.L;
} else if( rongcuolv == 'M' ){
correctLevel = QRCode.CorrectLevel.M;
} else if( rongcuolv == 'Q' ){
correctLevel = QRCode.CorrectLevel.Q;
} else if( rongcuolv == 'H' ){
correctLevel = QRCode.CorrectLevel.H;
}
// 生成二维码
qrcode = new QRCode(document.getElementById("qrcode"), {
text: elText.value,
width : chicun,
height : chicun,
colorDark : $('#colorDark').val(), // 码颜色
colorLight : $('#colorLight').val(), // 背景色
margin : $('#mabianju').val(), // 码边距
correctLevel : correctLevel, // 容错率
});
if( chicun > 500 ){
chicun = 500;
layer.msg('页面有限,图片是'+chicun+'X'+chicun,{icon:0,time:2000});
}
// 码边距
var margin = parseInt( $('#mabianju').val() );
if( margin > 0 ){
$('#qrcode').css( { width : ( parseInt(chicun) + margin ) , height : ( parseInt(chicun) + margin ) } );
$('#qrcode img').css( { width : chicun , height : chicun , padding : margin/2 } );
} else {
$('#qrcode').css( { width : chicun , height : chicun } );
}
// logo
var qrcode_logo = $('.qrcode_logo').attr( 'src' );
if( qrcode_logo ){
qrcode.logo(qrcode_logo);
}
}
// 二维码内容 当元素失去焦点时触发 blur 事件。
$("#qrcode_neirong").on("blur", function () {
shengcheng();
}).on("keydown", function (e) { // 当键盘或按钮被按下时
if (e.keyCode == 13) {
shengcheng();
}
});
// 监听选择尺寸
form.on('radio(chicun)', function(data){
if( data.value == 'zdy'){
$('#zdycc').css( 'display' , 'inline-block' );
} else {
$('#zdycc').val( '' );
$('#zdycc').css( 'display' , 'none' );
shengcheng();
}
});
// 自定义尺寸
$("#zdycc").on("blur",function(e){
if( e.delegateTarget.value > 1000 ){
layer.msg("尺寸最大可设为1000px!",{icon: 2,time:1000});
$(this).val( 1000 );
return false;
}
shengcheng();
});
// 选择码颜色
colorpicker.render({
elem: '.colorDark'
,color: '#000000'
,done: function(color){
$('#colorDark').val(color);
shengcheng();
}
});
// 选择背景色
colorpicker.render({
elem: '.colorLight'
,color: '#FFFFFF'
,done: function(color){
$('#colorLight').val(color);
shengcheng();
}
});
// 选择码边距
slider.render({
elem: '.mabianju'
,step: 20 //步长
,showstep: true //开启间隔点
,value: 20 //初始值
,change: function(value){
$('#mabianju').val(value);
$('.mabianju__').html(value/2);
var mabianju__ = $('.mabianju__').parent();
if( value == 0 ){
mabianju__.css( 'left' , '0%' );
} else if( value == 20 ){
mabianju__.css( 'left' , '14%' );
} else if( value == 40 ){
mabianju__.css( 'left' , '34%' );
} else if( value == 60 ){
mabianju__.css( 'left' , '54%' );
} else if( value == 80 ){
mabianju__.css( 'left' , '74%' );
} else if( value == 100 ){
mabianju__.css( 'left' , '88%' );
}
shengcheng();
}
,setTips: function(value){ //自定义提示文本
return '码边距:' + value/2 + 'px';
}
});
// 选择容错率
slider.render({
elem: '.rongcuolv'
,step: 25 //步长
,showstep: true //开启间隔点
,value: 100 //初始值
,change: function(value){
var rongcuolv = $('#rongcuolv');
var rongcuolv_ = $('.rongcuolv__');
var rongcuolv__ = $('.rongcuolv__').parent();
if( value == 0 ){
rongcuolv.val('H');
rongcuolv_.html('H 30%');
rongcuolv__.css( 'left' , '0%' );
} else if( value == 25 ){
rongcuolv.val('L');
rongcuolv_.html('L 7%');
rongcuolv__.css( 'left' , '18%' );
} else if( value == 50 ){
rongcuolv.val('M');
rongcuolv_.html('M 15%');
rongcuolv__.css( 'left' , '43%' );
} else if( value == 75 ){
rongcuolv.val('Q');
rongcuolv_.html('Q 25%');
rongcuolv__.css( 'left' , '68%' );
} else if( value == 100 ){
rongcuolv.val('H');
rongcuolv_.html('H 30%');
rongcuolv__.css( 'left' , '86%' );
}
shengcheng();
}
,setTips: function(value){ //自定义提示文本
if( value == 25 ){
return '容错率 : L 7%';
} else if( value == 50 ){
return '容错率 : M 15%';
} else if( value == 75 ){
return '容错率 : Q 25%';
} else {
return '容错率 : H 30%';
}
}
});
// 上传logo
$("#upload_image").change(function (event){
var files = event.target.files,file;
var filePath = $(this).val(),
fileFormat = filePath
.substring(filePath.lastIndexOf("."))
.toLowerCase(); //获取文件格式
if (files && files.length > 0) {
file = files[0];
if (file.size > 1024 * 1024 * 10) {
layer.msg("图片大小不能超过 10MB!",{icon: 2,time:1000});
return false;
}
if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
layer.msg("上传错误,文件格式必须为：png/jpg/jpeg",{icon: 2,time:1000});
return false;
}
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
$('.qrcode_logo').attr( 'src' , reader.result );
$('.qrcode_logo_div').show();
qrcode.logo(reader.result);
};
}
});
// 删除logo
$(".qrcode_logo_delete").click(function() {
layer.confirm('确定删除logo吗？', {icon: 3, title: '提示信息'}, function (index) {
$('.qrcode_logo').attr( 'src' , '' );
$('.qrcode_logo_div').hide();
$('.qrcode_add_logo').remove();
layer.close(index);
shengcheng();
})
});
// 保存二维码
$(".right_save").click(function() {
if( !$('#qrcode_neirong').val() ){
layer.msg('请输入二维码内容',{icon:0,time:2000});return false;
}
qrcode.save();
});
});
</script>
</body>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )