海报生成及长按保存(新)

分享交流 未结
收藏
1 161
梦雨
梦雨 旗舰授权 05月11日 10:32
点赞:1 点赞

这个海报之前的生成海报下载图片

由于让图片下载部分浏览器兼容问题这里将改为长按保存 

生成更快 保存更方便

海报的模板路径是/template/当前启动的模板/index/haibao.html

例如默认模板/template/mifenlei/index/haibao.html

复制如下代码替换即可 

<!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>
                </div>
                <div class="com">{:cut_c(htmlspecialchars_decode($t['content']),50)}</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>
    </section>
    </section>
    <script>
        $(function() {
            setTimeout(function () {
                mifenlei()
            }, 200);
            $(".set").click(function() {
                $(".mifenlei").css("background-color", $(this).attr("color"));
                $(".title").css("color", $(this).attr("color"));
                $(".tag span").css("background-color", $(this).attr("color"));
                mifenlei()
            });
            function mifenlei(){
            	html2canvas($(".mifenlei")[0], {
                    backgroundColor: "transparent",
                    useCORS: true
                }).then(function(canvas) {
                    imgUri = canvas.toDataURL();
                    console.log(imgUri); //生成base64的编码图片
                    layer.open({
                        type: 1,
                        title: '',
                        closeBtn: 0, //不显示关闭按钮
                        anim: 5,
                        shade: 0.8,
                        shadeClose: true, //开启遮罩关闭
                        area: ['100%', ''],
                        offset: 't',
                        content: '<img src="' + imgUri + '" style="display: block;">'
                    });
                    layer.alert('海报已自动生成,长按图片即可保存', {
                        closeBtn: 0, //不显示关闭按钮
                        title: '温馨提示',
                        anim: 2,
                        shade: 0.3,
                    })
                })
            }
        });
    </script>
</body>

</html>


回帖
  • 梦雨 旗舰授权
    05月12日 14:59

    新增弹出提示保存海报

    回复