HTML網址生成二維碼圖片合成宣傳圖片示例
阿新 • • 發佈：2020-12-04
<!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="" style="z-index: -99;"></dl>
<dl><div id = "qrid" style="z-index: 99;"></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="" style="width: 100%;height: auto" />-->
</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" style="margin: 5px 5px;" onclick="addTxt();">新增標題文字</span></div>
<br>
<div><input class="ewmInput" type="text" maxlength="60" size="60"/>
<span class="btn" style="margin: 5px 5px;" onclick="ewmPT();">新增二維碼</span></div>
<br>
</div>
</div>
<div style="padding:10px 0">
<div class="btn" id="btn">擷取螢幕</div>
<p style="color:red; text-align:center;">先點選擷取屏幕後再點選截圖下載</p>
<div style="margin-top:10px">
<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 style="position: absolute; cursor: move; top: 0px; left: 0px; z-index: 0;"><span class="Txttitle_'+ txtID +'" onclick="onck(this)" style="font-size:'+ txt_size +'px; font-family:'+ txt_family +';">'+ txt_title +'</span></dl>';
$(".box-4").append(html);
$('.Txttitle').val("");
$('.TxtSize').val("");
rund();
}
//更新標題文字
function updateTxt(_this){
console.log($(_this).css('font-size'));
}
//上傳圖片設定
var file = document.getElementById('file');
var image = document.querySelector("img");
file.onchange = function () {
var fileData = this.files[0];//獲取到一個FileList物件中的第一個檔案( File 物件),是我們上傳的檔案，未見為電腦記憶體中圖片 base64圖片
var pettern = /^image/;
console.info(fileData.type)
if (!pettern.test(fileData.type)) {
alert("圖片格式不正確");
return;
}
var reader = new FileReader();
reader.readAsDataURL(fileData);//非同步讀取檔案內容，結果用data:url的字串形式表示
/*當讀取操作成功完成時呼叫*/
reader.onload = function (e) {
console.log(e); //檢視物件
console.log(this.result);//要的資料 這裡的this指向FileReader（）物件的例項reader
image.setAttribute("src", this.result)
}
}
//點選獲取標題文字值
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',canvas.toDataURL());
//下載下來的圖片名字
$("#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;
list-style-type: none;
}
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;
/*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
}
.box-2 dl {
left: 50%;
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;
}