HTML⽹址⽣成⼆维码图⽚合成宣传图⽚⽰例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<!-- 引⽤css -->
<link rel="stylesheet" type="text/css" href="css/style.css?y=1242343"/>
<!-- 引⽤js -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js"></script>
<script>
$(function () {
$('.box-4 dl').each(function () {
$(this).dragging({
move: 'both',
randomPosition: true
});
});
});
</script>
</head>
<body>
<div class="conetn">
<div class='box box-4' id="box">
<dl><img src="" ></dl>
<dl><div id = "qrid" ></div></dl>
<!--<dl><span>测试代码</span></dl>-->
<!--<dl><span>测试代码123</span></dl>-->
</div>
<div class="fileBox">
<div class="warp">
<div class="warp-content">点击上传背景图⽚</div>
<input type="file" id="file"/>
</div>
<p></p>
<!--<img src="" />-->
</div>
<div class="txt">
<br>
<div>
标题：<input class="Txttitle" type="text" maxlength="20" size="30"/><br><br>
⽂字⼤⼩：  <input class="TxtSize" type="text" maxlength="20" size="30"/><br><br>
字体：<select class="fontTxt">
<option value="Arial">Arial</option>
<option value="仿宋">仿宋</option>
<option value="微软雅⿊">微软雅⿊</option>
<option value="Helvetica">Helvetica</option>
<option value="audi" selected="selected" >Audi</option>
</select>
<span class="btn .Txttitle" onclick="addTxt();">添加标题⽂字</span></div>
<br>
<div><input class="ewmInput" type="text" maxlength="60" size="60"/>
<span class="btn" onclick="ewmPT();">添加⼆维码</span></div>
<br>
</div>
</div>
<div >
<div class="btn" id="btn">截取屏幕</div>
<p >先点击截取屏幕后再点击截图下载</p>
<div >
<a href="javascript:;" rel="external nofollow" class="btn" id="download">截图下载</a>
</div>
</div>
<script type="text/javascript">
var txtID = 0;
//设置dl标签为可拖动属性
function rund(){
$('.box-4 dl').each(function () {
$(this).dragging({
move: 'both',
randomPosition: false
});
});
}
//    添加标题⽂字⾄页⾯
function addTxt(txt){
txtID =txtID + 1;
var txt_title = $('.Txttitle').val();
var txt_size = $('.TxtSize').val();
var txt_family = $('.fontTxt').val();
var html = '<dl ><span class="Txttitle_'+ txtID +'" onclick="onck(this)" >'+ txt_title  +'</span></dl>';        $(".box-4").append(html);
$('.Txttitle').val("");
$('.TxtSize').val("");
rund();
}
function updateTxt(_this){
console.log($(_this).css('font-size'));
}
//上传图⽚设置
var file = ElementById('file');
var image = document.querySelector("img");
var fileData = this.files[0];//获取到⼀个FileList对象中的第⼀个⽂件( File 对象)，是我们上传的⽂件，未见为电脑内存中图⽚ base64图⽚
var pettern = /^image/;
console.pe)
if (!pe)) {
alert("图⽚格式不正确");
return;
}
var reader = new FileReader();
/*当读取操作成功完成时调⽤*/
console.log(e); //查看对象
console.sult);//要的数据这⾥的this指向FileReader（）对象的实例reader
image.setAttribute("src", sult)
}
}
//点击获取标题⽂字值
function onck(_this){
console.log($(_this).html());
var txt = $(_this).html()
$('.Txttitle').val(txt);
updateTxt(_this);
}
//插⼊⼆维码⾄页⾯，并下载
$("#btn").click(function(){
html2canvas($("#box"), {
onrendered: function(canvas) {
//把截取到的图⽚替换到a标签的路径下载
$("#download").attr('href',DataURL());
//下载下来的图⽚名字
$("#download").attr('download','share.png') ;
document.body.appendChild(canvas);
}
/
/可以带上宽⾼截取你所需要的部分内容
//    ,
//    width: 300,
//    height: 300
});
});
//⽣成⼆维码
function ewmPT(){
var qrstr = $('.ewmInput').val();
//        $('#qrid').qrcode(qrstr);//不指定⼆维码⼤⼩
$('#qrid').qrcode({width: 65,height: 65,text: qrstr});//指定⼆维码⼤⼩
}
</script>
</body>
</html>
======================================css（其实没啥⽤）================
body, dl, dt, dd, ul, ul li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, button {
-webkit-font-smoothing: antialiased;
padding: 0;
margin: 0;
font-family: "Microsoft Yahei", "微软雅⿊", Arial, Helvetica, sans-serif;
font-size: 12px;
}
img, input, select, textarea, button, object {
vertical-align: middle;
}
html {
_overflow-x: hidden;
font-size: 62.5%;
/*overflow: hidden;*/
/*⼀般的，各⼤主流浏览器的font-size默认值为16px，此时1rem=16px。如果此时将rem与px进⾏换算很⿇烦，⽐如0.75rem=12px。为了更⽅便的进⾏换算（⽐如1：10），就可以加样式：*/ }
html, body {
margin: 0 auto;
width: 100%;
left: 0;
top: 0;
padding: 0;
/*overflow: hidden;*/
_overflow-x: hidden;
box-sizing: border-box;
}
img {
border: 0;
width: 100%;
height: 100%;
}
table {
border-collapse: collapse
}
ul, ul li {
list-style: none;
margin: 0px;
padding: 0px;
list-style-type: none;
}
dt, dd {
list-style: none;
margin: 0px;
padding: 0px;
}
hr {
height: 1px;
border: none;
border-top: 1px dotted #ccc;
overflow: hidden
}
hr.c2 {
border: 0px;
border-top: 2px solid #ddd;
}
hr.dashed {
border-top: 1px dashed #e4e4e4
}
.clear {
clear: both;
line-height: 0;
font-size: 0;
height: 0
}
.clearfix:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: "."
}
input{
border: 1px solid #ccc;
padding: 7px 0px;
border-radius: 3px;
padding-left:5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}
input:focus{
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
span{
font-family: 仿宋;
font-size: 12px;/*设置字体的⼤⼩*/
font-style: italic;/*斜体*/
font-weight: bold;/*加粗*/
background: #ff7956;
}
* {
margin: 0;
padding: 0;
overflow-x: hidden;
}
li {
list-style: none outside none;
}
body {
width: 100%;
background: url(../images/rbg.jpg) repeat scroll 0 0 #aaa;
font-family: "宋体";
padding: 50px 0 300px;
}
.conetn{
width: 100%;
height:auto;
}
.box {
max-width: 320px;
max-height: 568px;
width: 320px;borderbox
/*height: 568px;*/
height: 800px;
margin: 0 auto ;
background: #3bb3e0;
border: 1px solid #2561b4;
}
.box img{
width: 100%;
height: auto;
}
p {
font-size: 20px;
color: #333;
text-align: center;
margin: 0 0 20px;
}
.box.box-1 {
height: 200px
}
.box-1 dl {
/*top: 25px;*/
}
.box.box-2 {
height: 500px
}
margin-left: -75px;
}
i.hander {
display: block;
width: 100%;
height: 25px;
background: #ccc;
text-align: center;
font-size: 12px;
color: #333;
line-height: 25px;
font-style: normal;
}
.txt {
position: relative;
text-align: center;
}
/*按钮样式*/
.btn {
width: 100px;
height: 30px;
line-height: 30px;
background: green;
color: #fff;
border-radius: 10px;
-webkit-border-radius: 10px;    text-align:center;
/*display: block;*/
/*text-decoration: none;*/    padding: 5px 5px;
}
/*上传按钮样式*/
.fileBox{
margin: 0 auto;
top: 10px;
position: relative;
width: 320px;
}
.warp {
display: inline-block;
vertical-align: bottom;
position: relative;
}
.warp-content {
border: 1px solid red;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.warp input {
position: absolute;
top: 0;
left: 0;
border: 1px solid red;
width: 100px;
height: 100px;
opacity: 0;
cursor: pointer;
}
img {
width: 300px;
height: 300px;
/*border: 1px solid red;*/
/*margin-top: 50px;*/
vertical-align: bottom;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。