当前位置：织梦楼 > 织梦插件 > 织梦cms页面生成封面海报图片插件(2款)
柔柔柔柔 织梦插件

织梦cms页面生成封面海报图片插件(2款)

第一款 封面图片效果

第一款 封面图片效果

第一款 实现教程

1、下载本文章最后面的所需文件，解压得到poster文件夹，把poster文件夹放进网站根目录的plus文件夹里

织梦cms页面生成封面海报图片插件(2款)1

2、打开内容页模板 例如 article_article.htm 或者 article_article_m.htm 里面的最下面加入代码，最后生成全站即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<link rel="stylesheet" href="{dede:global.cfg_cmspath/}/plus/poster/css/poster.css" type="text/css">
<script src="{dede:global.cfg_cmspath/}/plus/poster/js/jquery.min.js" type="text/javascript"></script>
<script src="{dede:global.cfg_cmspath/}/plus/poster/js/html2canvas.min.js" type="text/javascript"></script>
<script src="{dede:global.cfg_cmspath/}/plus/poster/js/common.js" type="text/javascript"></script>
<script type="text/javascript">
var txt1 = '长按识别二维码查看详情';
var txt2 = '来自「 织梦官方团队 」';
    var comiis_poster_start_wlat = 0;
var comiis_rlmenu =  1;
var comiis_nvscroll =  0;
    var comiis_poster_time_baxt;
    $(document).ready(function(){
        $(document).on('click', '.comiis_poster_a', function(e) {
            show_comiis_poster_ykzn();
        });
    });
    function comiis_poster_rrwz(){
        setTimeout(function(){
            html2canvas(document.querySelector(".comiis_poster_box_img"), {scale:2,useCORS:true}).then(canvas => {
                var img = canvas.toDataURL("image/jpeg", .9);
                document.getElementById('comiis_poster_images').src = img;
                $('.comiis_poster_load').hide();
                $('.comiis_poster_imgshow').show();
            });
        }, 100);
    }
    function show_comiis_poster_ykzn(){
        if(comiis_poster_start_wlat == 0){
            comiis_poster_start_wlat = 1;
            popup.open('<img src="{dede:global.cfg_cmspath/}{dede:global.cfg_cmspath/}/plus/poster/images/imageloading.gif" class="comiis_loading">');
var url = window.location.href.split('#')[0];
url = encodeURIComponent(url);
            var html = '<div id="comiis_poster_box" class="comiis_poster_nchxd">\n' +
                '<div class="comiis_poster_box">\n' +
                '<div class="comiis_poster_okimg">\n' +
                '<div style="padding:150px 0;" class="comiis_poster_load">\n' +
                '<div class="loading_color">\n' +
                '  <span class="loading_color1"></span>\n' +
                '  <span class="loading_color2"></span>\n' +
                '  <span class="loading_color3"></span>\n' +
                '  <span class="loading_color4"></span>\n' +
                '  <span class="loading_color5"></span>\n' +
                '  <span class="loading_color6"></span>\n' +
                '  <span class="loading_color7"></span>\n' +
                '</div>\n' +
                '<div class="comiis_poster_oktit">正在生成海报, 请稍候</div>\n' +
                '</div>\n' +
                '<div class="comiis_poster_imgshow" style="display:none">\n' +
                '<img src="" class="vm" id="comiis_poster_images">\n' +
                '<div class="comiis_poster_oktit">↑长按上图保存图片，分享好友或朋友圈</div>\n' +
                '</div>\n' +
                '</div>\n' +
                '<div class="comiis_poster_okclose"><a href="javascript:;" class="comiis_poster_closekey"><img src="{dede:global.cfg_cmspath/}{dede:global.cfg_cmspath/}/plus/poster/images/poster_okclose.png" class="vm"></a></div>\n' +
                '</div>\n' +
                '<div class="comiis_poster_box_img zibv cl">\n' +
                '<div class="comiis_poster_img"><div class="img_time">{dede:field.pubdate function=MyDate("d",@me)/}<span>{dede:field.pubdate function=MyDate("Y\/m",@me)/}</span></div><img src="{dede:field.litpic/}" class="vm" id="comiis_poster_image"></div>\n' +
                '<div class="comiis_poster_tita">{dede:field.title/}</div>\n' +
                '<div class="comiis_poster_txta">{dede:field.description function=html2text(@me)/} ...</div><div class="comiis_poster_x guig"></div>\n' +
                '<div class="comiis_poster_foot fcym">\n' +
                '<img src="{dede:global.cfg_cmspath/}{dede:global.cfg_cmspath/}/plus/poster/qrcode.php?url='+url+'" class="kmewm fqpl vm">\n' +
                '<img src="{dede:global.cfg_cmspath/}{dede:global.cfg_cmspath/}/plus/poster/images/poster_zw.png" class="kmzw vm"><span class="kmzwtip">'+txt1+'<br>'+txt2+'</span>\n' +
                '</div>\n' +
                '</div>\n' +
                '</div>';
            if(html.indexOf("comiis_poster") >= 0){
                comiis_poster_time_baxt = setTimeout(function(){
                    comiis_poster_rrwz();
                }, 5000);
                $('body').append(html);
                $('#comiis_poster_image').load(function(){
                    clearTimeout(comiis_poster_time_baxt);
                    comiis_poster_rrwz();
                });
                popup.close();
                setTimeout(function() {
                    $('.comiis_poster_box').addClass("comiis_poster_box_show");
                    $('.comiis_poster_closekey').off().on('click', function(e) {
                        $('.comiis_poster_box').removeClass("comiis_poster_box_show").on('webkitTransitionEnd transitionend', function() {
                            $('#comiis_poster_box').remove();
                            comiis_poster_start_wlat = 0;
                        });
                        return false;
                    });
                }, 60);
            }
        }
    }
    var new_comiis_user_share, is_comiis_user_share = 0;
    var as = navigator.appVersion.toLowerCase(), isqws = 0;
    if (as.match(/MicroMessenger/i) == "micromessenger" || as.match(/qq\//i) == "qq/") {
        isqws = 1;
    }
    if(isqws == 1){
        if(typeof comiis_user_share === 'function'){
            new_comiis_user_share = comiis_user_share;
            is_comiis_user_share = 1;
        }
        var comiis_user_share = function(){
            if(is_comiis_user_share == 1){
                isusershare = 0;
                new_comiis_user_share();
                if(isusershare == 1){
                    return false;
                }
            }
            isusershare = 1;
            show_comiis_poster_ykzn();
            return false;
        }
    }
</script>
<div class="comiis_footer_scroll">
<a href="javascript:;" class="comiis_poster_a"><i class="comiis_font"><img src="{dede:global.cfg_cmspath/}/plus/poster/images/ico.png" alt=""></i><span><em>海报</em></span></a>
</div>

3、打开内容页面右下角会多出一个海报按钮

织梦cms页面生成封面海报图片插件(2款)2

点击海报按钮生成封面海报图片即可

第二款 封面图片效果

第二款 封面图片效果

1、下载文章最后面所需文件，解压得到mobileshare文件夹和mobileshare.php文件，把它们放进网站根目录的plus文件夹里

如图

织梦cms页面生成封面海报图片插件(2款)4

2、打开内容页模板 例如 article_article.htm 或者 article_article_m.htm 在合适的位置加入【生成海报】按钮，最后生成全站即可

1
2
3
4
<script type="text/javascript">var shareurl = "{dede:global.cfg_cmspath/}/plus/mobileshare.php";</script>
<link href="{dede:global.cfg_cmspath/}/plus/mobileshare/css/mobileshare.css" rel="stylesheet">
<script src="{dede:global.cfg_cmspath/}/plus/mobileshare/js/jquery.min.js"></script>
<script src="{dede:global.cfg_cmspath/}/plus/mobileshare/js/mobileshare.js"></script>

1
<a class="j-mobile-share" href="javascript:;" data-id="{dede:field.id/}" data-qrcode="{dede:global.cfg_basehost/}{dede:field.id runphp='yes'}$result=GetOneArchive(@me);@me=$result['arcurl'];{/dede:field.id}">生成海报</a>

注意：

class=”j-mobile-share” 不能随意更改

data-id 不能随意更改

data-qrcode 不能随意更改

3、打开内容页面查看【生成海报】按钮

打开内容页面查看【生成海报】按钮

点击海报按钮生成封面海报图片即可

2款插件下载地址：

VIP价 5 折 永久VIP免费

已有17人支付

①本站所有织梦模板资源均来自用户分享和网络收集，如果侵犯了您的权益，请联系网站客服处理
②本站提供的织梦源码，均带数据及演示地址。可以在任一源码详情页查看演示地址。
③由于博主时间紧缺，所有模板源码不提供技术支持。仅部分收费原创源码提供售后
④如遇模板源码下载链接打不开或者有错误，请联系网站客服QQ指出纠正。
⑤人民币与金币汇率为1比1,即1元=1金币
织梦楼 » 织梦cms页面生成封面海报图片插件(2款)

柔柔 VIP

分享到：

1 评论

  1. 这个不错！

发表回复

加入织梦楼永久VIP 海量资源免费下载

目前为止共有 3653 位会员加入