觅分类原版海报下载样式
觅分类原版海报下载样式代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{$t['title']} - 生成海报</title>
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
<script src="/public/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src='/public/js/qrcode.min.js'></script>
<script src="/public/js/html2canvas.js"></script>
<script src='/public/layer/layer.js'></script>
<style type="text/css" media="all">
::-webkit-scrollbar{display:none}
::-moz-placeholder{color:#aaa}
::-webkit-input-placeholder{color:#aaa}
:-ms-input-placeholder{color:#aaa}
::selection{background:#111;color:#fff;font-weight:700}
select{appearance:none;-moz-appearance:none;-webkit-appearance:none;outline:0;background:0 0;border:none;width:100%}
body,html{color:#333;margin:0;height:100%;font-family:myriad set pro,helvetica neue,Helvetica,Arial,Verdana,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
a{text-decoration:none;color:#000}
a,button,input,label,select{-webkit-tap-highlight-color:transparent}
img{width:100%;height:auto;display:block;border:0}
body{background-color:#fff;color:#373b4e}
blockquote,body,button,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,html,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
a{text-decoration:none;color:#08acee}
button{outline:0}
img{border:0}
button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;outline:0}
li{list-style:none}
a{color:#666}
h2{font-size:16px}
body{margin:0 auto;max-width:800px}
.mifenlei{background-color:#ff5722;padding:10px}
.mifenlei .shang{background-color:#fff;padding:10px;border-radius:10px}
.mifenlei .shang .logo{text-align:center}
.mifenlei .shang .logo img{width:120px}
.mifenlei .shang .title{font-size:18px;font-weight:700;color:#ff5722;margin-top:20px}
.mifenlei .shang .tag{margin-top:20px}
.mifenlei .shang .tag span{background-color:#ff5722;margin-right:10px;padding:2px 10px 2px 10px;color:#f0f8ff}
.mifenlei .shang .com{margin-top:20px}
.mifenlei .shang .img{display:flex;align-items:center;flex-wrap:wrap;background-color:#fff;margin-top:20px;max-height:100px;overflow:auto}
.mifenlei .shang .img img{box-sizing:border-box;width:calc(100% / 4);text-align:center;padding:2px;position:relative}
.mifenlei .xia{height:140px}
.mifenlei .xia .ma{padding:10px;position:absolute;border:2px solid #000;background-color:#f0f8ff;border-radius:10px}
.mifenlei .xia .ma img{width:100px;height:100px}
.mifenlei .xia .text{margin-left:140px;margin-top:20px}
.mifenlei .xia .text p{line-height:31px;color:#f0f8ff}
.an{margin-top:20px;text-align:center}
.an a{background-color:#ff5722;padding:5px 10px 5px 10px;color:#f0f8ff}
.footer{bottom:0;width:100%;height:52px;cursor:pointer}
.footer>div{width:100%;height:52px;background-color:#008e06;width:100%;line-height:52px;color:#f0f8ff}
</style>
</head>
<body>
<section class="mifenlei-flexView">
<div class="mifenlei" id="mifenlei">
<div class="shang">
<div class="logo">
<img src="{:set('logo')}">
</div>
<div class="title">
{$t['title']}
</div>
<div class="tag">
<span>{:fun_cate_diqu($t.sid, 'name')}</span>
<span>{:fun_cate_m($t.tid, 'name')}</span>
{foreach name=":json_model(fun_model(input('m'), 'config'))" item="v" key="k"}
<!-- 有2就是内容显示 -->
{if socha(json_model_v($v,'dingyi'), 2) == 1}
<span>{$t[json_model_v($v,'zhiduan')]}</span>
{/if}
{/foreach}
</div>
<div class="com">
{:cut_c(htmlspecialchars_decode($t['content']))}
</div>
<div class="img">
{volist name=":skujson($t.pics)" id="vo" length='4'}
<img src="{$vo.name}" alt="{$vo.name}">
{/volist}
</div>
</div>
<div class="xia">
<div class="ma">
<div align="center" id="qrcode"></div>
<script>
(function() {
var qrcode = new QRCode('qrcode', {
text: '{:http().$_SERVER['HTTP_HOST'].url("index/index/html",array("m"=>$t.m,"id"=>$t.id))}',
width: 100,
height: 100,
colorDark : '#000000',
colorLight : '#ffffff',
correctLevel : QRCode.CorrectLevel.H
}
);
}
)()
</script>
</div>
<div class="text">
<p>电话:{$t.phone}</p>
<p>长按识别二维码</p>
<p>{:set('title')}</p>
<p>{:http().$_SERVER['HTTP_HOST']}</p>
</div>
</div>
</div>
<div class="an">
<a href="javascript:;" class="set" color="#FF5722">1</a>
<a href="javascript:;" class="set" style="background-color: #000000;" color="#000000">2</a>
<a href="javascript:;" class="set" style="background-color: #2196F3;" color="#2196F3">3</a>
<a href="javascript:;" class="set" style="background-color: #e91e63;" color="#e91e63">4</a>
<a href="javascript:;" class="set" style="background-color: #673ab7;" color="#673ab7">5</a>
<a href="javascript:;" class="set" style="background-color: #00bcd4;" color="#00bcd4">6</a>
<a href="javascript:;" class="set" style="background-color: #4caf50;" color="#4caf50">7</a>
<a href="javascript:;" class="set" style="background-color: #086d9a;" color="#086d9a">8</a>
<a href="javascript:;" class="set" style="background-color: #ff9800;" color="#ff9800">9</a>
<a href="javascript:;" class="set" style="background-color: #795548;" color="#795548">10</a>
</div>
<div style="height: 70px;"></div>
<div class="an footer" style="text-align: center;">
<div href="javascript:;" class="ok" style="background-color: #008e06;">保存海报</div>
</div>
</section>
</section>
<script>
$(function () {
//将Base64转成Blob的形式
function dataURLtoBlob(dataurl) {
let arr = dataurl.split(',')
let mime = arr[0].match(/:(.*?);/)[1]
let bstr = atob(arr[1])
let n = bstr.length
let u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
//将blob转换为file
function blobToFile(theBlob, fileName){
theBlob.lastModifiedDate = new Date();
theBlob.name = fileName;
return theBlob;
}
function sumitImageFile(base64Codes,myURL){
var form=document.forms[0];
var formData = new FormData();
formData.append("file",dataURLtoBlob(base64Codes),myURL);
//ajax 提交form
$.ajax({
url : '/index.php/index/api/up.html?m={$t.m}&id={$t.id}', //上传的接口
type : "POST",
data : formData,
dataType:"text",
processData : false, // 告诉jQuery不要去处理发送的数据
contentType : false, // 告诉jQuery不要去设置Content-Type请求头
success:function(res){
obj = JSON.parse(res);
if (obj.code == '1') {
location.href="?img="+obj.path;
} else {
return layer.msg('生成失败');
}
}
});
}
$(".set").click(function(){
$(".mifenlei").css("background-color",$(this).attr("color"));
$(".title").css("color",$(this).attr("color"));
$(".tag span").css("background-color",$(this).attr("color"));
});
$(".ok").click(function(){
html2canvas($(".mifenlei")[0], {
backgroundColor: "transparent",
useCORS: true
}).then(function(canvas){
imgUri = canvas.toDataURL();
console.log(imgUri);//生成base64的编码图片
sumitImageFile(imgUri,'xiazai.jpg')
})
});
});
</script>
</body>
</html>