觅分类原版海报下载样式代码如下:
<!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>