帝国CMS利用html2canvas为内容页生成海报通用版

此次发布的这个功能就是单独的通用版本(适合所有PHP的网站,改第三步的参数即可)。适合几乎所有的帝国CMS做成的内容页面，已经做了各种容错。包含无标题图自动获取一个默认图片等！
简单介绍一下功能：点击按钮生成一个海报图片，本功能用于微信等社交软件快速分享传播。主要使用了JS的html2canvas库和二维码生成库，配合JS脚本和样式制作，不用修改帝国CMS核心文件，只在原内容模板增加代码即可！（安全稳定高效）
再放个图小伙伴们看下：

具体依赖文件和制作方法代码如下，教程开始：
第一步：内容模板内</head>标签前引入：

<link rel="stylesheet" type="text/css" href="<?=$public_r[newsurl]?>skin/canvas/css/canvas.css"> 

第二步：内容模板合适的地方加入点击生成的按钮

<div class="tab-share-box">   
  <div class="tab-share-btn">分享海报</div>   
</div>   

第三步：内容模板最底部</body>标签前加入

<div class="bj-fixed-area">  
  <div class="previw-area">  
    <div class="close-area tabclose-area"></div>  
    <img src="<?=$public_r[newsurl]?>skin/canvas/img/t.png" class="previw-img-area" />  
    <div class="show-text-area">长按图片保存到手机</div>  
  </div>  
</div>  
<div class="areaShareWrap">  
      <div class="taplist-area">  
        <div class="bg"></div>  
        <p class="thumb"><img src="<?=$navinfor[titlepic]?$navinfor[titlepic]:"/uploads/images/1595.jpg"?>"/></p>  
        <!-- 上面这里判断了无图的情况 -->  
        <p class="title">[!--title--]</p><!-- 内容标题 -->  
        <div class="contents"><p><?=esub($navinfor[smalltext],206,'...')?></p></div><!-- 摘要 -->  
        <div class="ewm">  
        <img src="<?=$public_r[newsurl]?>e/extend/qrcode/index.php?str=[!--titleurl--]" class="cover-pic" /></div><!-- 利用二维码函数生成二维码实体图片文件 -->  
        <div class="taplist_footer">  
        <p class="ewm_more">长按图片识别二维码阅读更多</p>  
        </div>  
      </div>  
  </div>  
<div class="areaShareLoading">  
  <p class="text"><span>正在为您获取最新数据</span></p>  
</div>   
<script src="<?=$public_r[newsurl]?>skin/canvas/js/html2canvas.js" charset="utf-8"></script>  
<script src="<?=$public_r[newsurl]?>skin/canvas/js/canvas.js" charset="utf-8"></script>  

注：里面16行是qrcode二维码生成函数，[!–titleurl–]是你的内容页地址，如果是手机端请自行更换，11行的外链图片是当内容没有标题图片的情况下调用，换成自己的
第四步：下载上传压缩包里的文件到根目录

暂无评论