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

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

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

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

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

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

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

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

 注：里面16行是qrcode二维码生成函数，[!--titleurl--]是你的内容页地址，如果是手机端请自行更换，11行的外链图片是当内容没有标题图片的情况下调用，换成自己的
第四步：下载上传压缩包里的文件到根目录
PS：美文苑手机版（m.meiweny.cn）不是采用的此教程，上面有弊端（1，跨域问题致使只有响应式网站移动端电脑端才正常生成海报图片。2，内容源代码沉积过多，美文苑手机版是采用AJAX输出弹出层生成海报，只需要引入一段JS即可）