Support comment

README.md

@@ -10,10 +10,9 @@
 
 ### 更新记录
 
-#### TODO
+#### 2019.6.8
 
-* 添加评论
+还是根据 [Issue #4](https://github.com/TransparentLC/WechatMomentScreenshot/issues/4)，增加了在生成的截图中设定评论的功能～ฅ•̀∀•́ฅ
-* ~~7.x 版微信的白色界面~~什么时候张小龙学会做产品了就考虑加上(　ﾟ 3ﾟ)
 
 #### 2019.6.6
 

avatarURL.js

@@ -348,5 +348,55 @@ var avatarURL = [
 'https://ae01.alicdn.com/kf/HTB1f.Q9N3HqK1RjSZFEq6AGMXXaA.jpg',
 'https://ae01.alicdn.com/kf/HTB1ZBQ9NZbpK1RjSZFyq6x_qFXaD.jpg',
 'https://ae01.alicdn.com/kf/HTB1GaI1N9zqK1RjSZFLq6An2XXaN.jpg',
-'https://ae01.alicdn.com/kf/HTB1zpc7N7voK1RjSZFDq6xY3pXa5.jpg'
+'https://ae01.alicdn.com/kf/HTB1zpc7N7voK1RjSZFDq6xY3pXa5.jpg',
+'https://ae01.alicdn.com/kf/HTB1axxiXvBj_uVjSZFpq6A0SXXaR.jpg',
+'https://ae01.alicdn.com/kf/HTB1lC3bb8Kw3KVjSZFOq6yrDVXal.jpg',
+'https://ae01.alicdn.com/kf/HTB158LUaQxz61VjSZFrq6xeLFXay.jpg',
+'https://ae01.alicdn.com/kf/HTB1SVdjXvxj_uVjSZFqq6yboFXas.jpg',
+'https://ae01.alicdn.com/kf/HTB1.XL_b8OD3KVjSZFFq6An9pXau.jpg',
+'https://ae01.alicdn.com/kf/HTB195cdb8Cw3KVjSZFuq6AAOpXaz.jpg',
+'https://ae01.alicdn.com/kf/HTB1EVscb8Cw3KVjSZFlq6AJkFXak.jpg',
+'https://ae01.alicdn.com/kf/HTB1kusgbYys3KVjSZFnq6xFzpXaX.jpg',
+'https://ae01.alicdn.com/kf/HTB1XIn9b2WG3KVjSZPcq6zkbXXas.jpg',
+'https://ae01.alicdn.com/kf/HTB1kf3fbW5s3KVjSZFNq6AD3FXaZ.jpg',
+'https://ae01.alicdn.com/kf/HTB1DXz.b81D3KVjSZFyq6zuFpXab.jpg',
+'https://ae01.alicdn.com/kf/HTB1g9RjXvxj_uVjSZFqq6yboFXai.jpg',
+'https://ae01.alicdn.com/kf/HTB1DKUeb8Cw3KVjSZFuq6AAOpXa7.jpg',
+'https://ae01.alicdn.com/kf/HTB1bKfWaQxz61VjSZFtq6yDSVXaZ.jpg',
+'https://ae01.alicdn.com/kf/HTB1J9H8b4iH3KVjSZPfq6xBiVXab.jpg',
+'https://ae01.alicdn.com/kf/HTB13g29b.WF3KVjSZPhq6xclXXan.jpg',
+'https://ae01.alicdn.com/kf/HTB1nvj9b.CF3KVjSZJnq6znHFXaC.jpg',
+'https://ae01.alicdn.com/kf/HTB1P.28b4iH3KVjSZPfq6xBiVXa0.jpg',
+'https://ae01.alicdn.com/kf/HTB1M6ZfbW5s3KVjSZFNq6AD3FXaj.jpg',
+'https://ae01.alicdn.com/kf/HTB1Kmb_b9SD3KVjSZFKq6z10VXaF.jpg',
+'https://ae01.alicdn.com/kf/HTB1Enn_b8WD3KVjSZFsq6AqkpXaa.jpg',
+'https://ae01.alicdn.com/kf/HTB1xKY9b3KG3KVjSZFLq6yMvXXaR.jpg',
+'https://ae01.alicdn.com/kf/HTB1V8ofbW5s3KVjSZFNq6AD3FXaK.jpg',
+'https://ae01.alicdn.com/kf/HTB1s8n9b.WF3KVjSZPhq6xclXXa6.jpg',
+'https://ae01.alicdn.com/kf/HTB14IUeb8Cw3KVjSZR0q6zcUpXag.jpg',
+'https://ae01.alicdn.com/kf/HTB1b6kcb8Gw3KVjSZFwq6zQ2FXau.jpg',
+'https://ae01.alicdn.com/kf/HTB190Meb8Cw3KVjSZR0q6zcUpXat.jpg',
+'https://ae01.alicdn.com/kf/HTB1uD_9b.GF3KVjSZFoq6zmpFXaw.jpg',
+'https://ae01.alicdn.com/kf/HTB1FzH9b3KG3KVjSZFLq6yMvXXas.jpg',
+'https://ae01.alicdn.com/kf/HTB1KfY.b8OD3KVjSZFFq6An9pXaX.jpg',
+'https://ae01.alicdn.com/kf/HTB1d8gfbWSs3KVjSZPiq6AsiVXa6.jpg',
+'https://ae01.alicdn.com/kf/HTB1iGQXb8GE3KVjSZFhq6AkaFXau.jpg',
+'https://ae01.alicdn.com/kf/HTB1QBQfbWSs3KVjSZPiq6AsiVXab.jpg',
+'https://ae01.alicdn.com/kf/HTB1atn.b75E3KVjSZFCq6zuzXXaC.jpg',
+'https://ae01.alicdn.com/kf/HTB1QkchbYys3KVjSZFnq6xFzpXaW.jpg',
+'https://ae01.alicdn.com/kf/HTB11JY.b75E3KVjSZFCq6zuzXXa1.jpg',
+'https://ae01.alicdn.com/kf/HTB1BXv.b21G3KVjSZFkq6yK4XXan.jpg',
+'https://ae01.alicdn.com/kf/HTB1LyD.b8OD3KVjSZFFq6An9pXaA.jpg',
+'https://ae01.alicdn.com/kf/HTB1PQQXb7WE3KVjSZSyq6xocXXag.jpg',
+'https://ae01.alicdn.com/kf/HTB1locfbWSs3KVjSZPiq6AsiVXaL.jpg',
+'https://ae01.alicdn.com/kf/HTB1PqD_b.CF3KVjSZJnq6znHFXaF.jpg',
+'https://ae01.alicdn.com/kf/HTB1dyT.b.uF3KVjSZK9q6zVtXXaq.jpg',
+'https://ae01.alicdn.com/kf/HTB11_MhbYys3KVjSZFnq6xFzpXas.jpg',
+'https://ae01.alicdn.com/kf/HTB1zSH_b79E3KVjSZFGq6A19XXaN.jpg',
+'https://ae01.alicdn.com/kf/HTB16j_9b2WG3KVjSZFgq6zTspXao.jpg',
+'https://ae01.alicdn.com/kf/HTB18cb_b.GF3KVjSZFmq6zqPXXav.jpg',
+'https://ae01.alicdn.com/kf/HTB1izD.b.GF3KVjSZFvq6z_nXXaB.jpg',
+'https://ae01.alicdn.com/kf/HTB160f_b.GF3KVjSZFmq6zqPXXas.jpg',
+'https://ae01.alicdn.com/kf/HTB1OPD.b75E3KVjSZFCq6zuzXXaG.jpg',
+'https://ae01.alicdn.com/kf/HTB1TOsgbWWs3KVjSZFxq6yWUXXav.jpg'
 ]

commentlist.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="33.156px" height="30.566px" viewBox="0 0 33.156 30.566" style="enable-background:new 0 0 33.156 30.566;"
+	 xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#576B95;stroke-width:4;}
+</style>
+<path class="st0" d="M2,2.492V20.82c0,0.272,0.22,0.492,0.492,0.492h4.57v4.813l5.438-4.812h18.164c0.272,0,0.492-0.22,0.492-0.492
+	V2.492C31.156,2.22,30.936,2,30.664,2H2.492C2.22,2,2,2.22,2,2.492z"/>
+</svg>

index.html

@@ -209,6 +209,35 @@
             height: 36px;
         }
 
+        .commentItem {
+            padding: 22px 0;
+        }
+
+        .commentName {
+            color: #576b95;
+            font-size: 34px;
+        }
+
+        .commentTime {
+            color: #808080;
+            font-size: 34px;
+            float: right;
+            margin-right: 25px;
+        }
+
+        .commentText {
+            font-size: 39px;
+            line-height: 1.25em;
+            color: #454545;
+            margin-top: 15px;
+        }
+
+        .commentAvatar {
+            width: 88px;
+            height: 88px;
+            display: inline-block;
+        }
+
         .heimu{
             background-color: #000000;
             color: #000000;
@@ -242,7 +271,7 @@
         <div class="mdui-row">
             <div class="mdui-col-xs-8 mdui-col-sm-10">
                 <div class="mdui-textfield">
-                    <label class="mdui-textfield-label">名字</label>
+                    <label class="mdui-textfield-label">用户名</label>
                     <input id="configName" class="mdui-textfield-input" type="text" value="A 营销号免费广告姬" />
                 </div>
             </div>
@@ -271,7 +300,7 @@
             <div class="mdui-col-xs-6">
                 <label class="mdui-radio">
                     <input id="configTypeWebsite" type="radio" name="group" />
-                    <i class="mdui-radio-icon"></i>分享网页
+                    <i class="mdui-radio-icon"></i>分享网页/公众号文章
                 </label>
             </div>
             <div class="mdui-col-xs-6">
@@ -405,6 +434,43 @@
             </div>
         </div>
 
+        <div class="mdui-textfield">
+            <label class="mdui-textfield-label">评论区</label>
+        </div>
+        <div class="mdui-row">
+            <div class="mdui-col-xs-12">
+                <label class="mdui-checkbox">
+                    <input id="configShowComment" type="checkbox" name="configShowComment" onclick="document.getElementById('configCommentPreview').classList.toggle('mdui-hidden');" />
+                    <i class="mdui-checkbox-icon"></i>
+                    显示评论区
+                </label>
+            </div>
+            <div id="configCommentPreview" class="mdui-col-xs-12 mdui-hidden">
+                <div class="mdui-table-fluid mdui-m-y-2">
+                    <table class="mdui-table">
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>用户名</th>
+                                <th>评论内容</th>
+                                <th>时间</th>
+                            </tr>
+                        </thead>
+                        <tbody id="configCommentList">
+                        </tbody>
+                    </table>
+                </div>
+                <div class="mdui-row">
+                    <div class="mdui-col-xs-6">
+                        <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" mdui-dialog="{target: '#addComment'}">添加评论</button>
+                    </div>
+                    <div class="mdui-col-xs-6">
+                        <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="removeComment();">删除评论</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="mdui-textfield">
             <label class="mdui-textfield-label">通知栏</label>
         </div>
@@ -427,7 +493,7 @@
 
         <button id="generate" class="mdui-btn mdui-ripple mdui-color-theme-accent mdui-btn-block mdui-m-t-2">生成</button>
         <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" mdui-dialog="{target: '#donate'}">请小透明喝一瓶肥宅快乐水～(*´∀`)</button>
-        <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="copyGitLink()">复制链接，分享给有需要的人～(`ヮ´ )</button>
+        <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent mdui-m-t-1" onclick="copyGitLink()">复制本工具的链接，分享给有需要的人(`ヮ´ )</button>
         <div id="gitLink" style="display: none;">https://git.io/WMS</div>
 
         <div id="fakeWechatMoment">
@@ -491,6 +557,10 @@
                     <div id="likeAvatarList" class="likeAvatarList"></div>
                     <div style="height: 17px;"></div>
                 </div>
+                <div id="comment" class="like" style="margin-top: 1px;">
+                    <img src="commentlist.svg" width="32" height="32" style="position: relative; left: 30px; top: 45px; display: inline-block; vertical-align: top;" />
+                    <div id="commentList" class="likeAvatarList"></div>
+                </div>
             </div>
             <div id="footer" class="footer">
                 <div style="border: none; border-bottom: 2px solid #5ec838; font-size: 40px; color: #bbbbbb; width:760px; height: 88px; padding-left: 24px; padding-right: 24px; display: flex; align-items: center;">评论</div>
@@ -507,6 +577,49 @@
             <span class="mdui-typo-caption-opacity">©&nbsp;2019&nbsp;✨小透明・宸✨</span>
         </div>
 
+        <div id="addComment" class="mdui-dialog">
+            <div class="mdui-dialog-title">添加评论</div>
+            <div class="mdui-dialog-content mdui-typo">
+                <div class="mdui-row">
+                    <div class="mdui-col-xs-8 mdui-col-sm-10">
+                        <div class="mdui-textfield">
+                            <label class="mdui-textfield-label">用户名</label>
+                            <input id="configCommentName" class="mdui-textfield-input" type="text" value="" />
+                        </div>
+                    </div>
+                    <div class="mdui-col-xs-4 mdui-col-sm-2">
+                        <div class="mdui-textfield">
+                            <label class="mdui-textfield-label">&nbsp;</label>
+                            <button class="mdui-btn mdui-ripple mdui-btn-block mdui-text-color-theme-accent" onclick="javascript: document.getElementById('configCommentAvatar').click();">上传头像</button>
+                            <input id="configCommentAvatar" type="file" style="display: none;" />
+                        </div>
+                    </div>
+                    <div class="mdui-col-xs-12">
+                        <div class="mdui-textfield">
+                            <label class="mdui-textfield-label">评论内容</label>
+                            <textarea id="configCommentText" class="mdui-textfield-input"></textarea>
+                        </div>
+                    </div>
+                    <div class="mdui-textfield mdui-col-xs-6">
+                        <label class="mdui-textfield-label">评论日期</label>
+                        <input id="configCommentDate" class="mdui-textfield-input" type="date" />
+                    </div>
+                    <div class="mdui-textfield mdui-col-xs-3">
+                        <label class="mdui-textfield-label">评论时间</label>
+                        <input id="configCommentTimeHour" class="mdui-textfield-input" type="number" min="0" max="23" />
+                    </div>
+                    <div class="mdui-textfield mdui-col-xs-3">
+                        <label class="mdui-textfield-label">&nbsp;</label>
+                        <input id="configCommentTimeMinute" class="mdui-textfield-input" type="number" min="0" max="59" />
+                    </div>
+                </div>
+            </div>
+            <div class="mdui-dialog-actions">
+                <button class="mdui-btn mdui-ripple" mdui-dialog-close>CANCEL</button>
+                <button class="mdui-btn mdui-ripple" mdui-dialog-close onclick="if (typeof (document.getElementById('configCommentAvatar').files[0]) == 'undefined') { mdui.alert('还没有设定头像啦⊂彡☆))∀`)'); } else { var configCommentDate = document.getElementById('configCommentDate').valueAsDate; configCommentDate.setHours(document.getElementById('configCommentTimeHour').value); configCommentDate.setMinutes(document.getElementById('configCommentTimeMinute').value); addComment(window.URL.createObjectURL(document.getElementById('configCommentAvatar').files[0]), document.getElementById('configCommentName').value, document.getElementById('configCommentText').value, configCommentDate); }">OK</button>
+            </div>
+        </div>
+
         <div id="generatedPopup" class="mdui-dialog">
             <div class="mdui-dialog-title">生成完毕| ω・`)</div>
             <img id="generated" />
@@ -571,7 +684,7 @@
             <div class="mdui-dialog-content mdui-typo">
                 <div style="text-align: center;">
                     <div>
-                    <img style="width: 50%;" src="https://ae01.alicdn.com/kf/HTB1DpS1VMHqK1RjSZFE763GMXXac.png" /><img style="width: 50%;" src="https://ae01.alicdn.com/kf/HTB1.nuUVHvpK1RjSZPi762mwXXat.png" />
+                        <img style="width: 50%;" src="https://ae01.alicdn.com/kf/HTB1DpS1VMHqK1RjSZFE763GMXXac.png" /><img style="width: 50%;" src="https://ae01.alicdn.com/kf/HTB1.nuUVHvpK1RjSZPi762mwXXat.png" />
                     </div>
                     <span class="mdui-typo-caption-opacity">扫一扫(`ε´ )<br />左：微信 右：支付宝</span>
                 </div>
@@ -631,27 +744,75 @@
             }, function () { });
         }
 
+        //删除所有发表的九宫格图片
         function clearMultiImage() {
             for (var i = 1; i <= 9; i++) {
                 document.getElementById('image' + i).style.backgroundImage = '';
             }
         }
 
+        //将时间转换为微信中显示的格式
+        function getTimeString(currentDate, specificDate) {
+            var cd = new Date(currentDate.getTime() - currentDate.getTimezoneOffset() * 60 * 1000 - (currentDate.getTime() - currentDate.getTimezoneOffset() * 60 * 1000) % (60 * 60 * 24 * 1000));
+            var sd = new Date(specificDate.getTime() - specificDate.getTimezoneOffset() * 60 * 1000 - (specificDate.getTime() - specificDate.getTimezoneOffset() * 60 * 1000) % (60 * 60 * 24 * 1000));
+            if (cd.getTime() == sd.getTime()) {
+                return ((specificDate.getHours() < 10) ? ('0' + specificDate.getHours()) : specificDate.getHours()) + ':' + ((specificDate.getMinutes() < 10) ? ('0' + specificDate.getMinutes()) : specificDate.getMinutes());
+            } else if (cd.getTime() - sd.getTime() == 60 * 60 * 24 * 1000) {
+                return '昨天 ' + ((specificDate.getHours() < 10) ? ('0' + specificDate.getHours()) : specificDate.getHours()) + ':' + ((specificDate.getMinutes() < 10) ? ('0' + specificDate.getMinutes()) : specificDate.getMinutes());
+            } else {
+                return specificDate.getFullYear() + '年' + (specificDate.getMonth() + 1) + '月' + specificDate.getDate() + '日 ' + ((specificDate.getHours() < 10) ? ('0' + specificDate.getHours()) : specificDate.getHours()) + ':' + ((specificDate.getMinutes() < 10) ? ('0' + specificDate.getMinutes()) : specificDate.getMinutes());
+            }
+        }
+
+        //复制短链接
         function copyGitLink() {
             document.getElementById('gitLink').style.display = 'block';
-            var range = document.createRange();
+            var range = document.createRange();
-            range.selectNodeContents(document.getElementById('gitLink'));
+            range.selectNodeContents(document.getElementById('gitLink'));
-            var selection = document.getSelection();
+            var selection = document.getSelection();
-            selection.removeAllRanges();
+            selection.removeAllRanges();
-            selection.addRange(range);
+            selection.addRange(range);
-            document.execCommand('Copy');
+            document.execCommand('Copy');
-            selection.removeAllRanges();
+            selection.removeAllRanges();
             mdui.snackbar({
                 message: '已复制到剪贴板～( っ*\'ω\'*c)'
-            });
+            });
             document.getElementById('gitLink').style.display = 'none';
         }
 
+        var commentList = Array();
+
+        //添加评论
+        function addComment(avatar, name, content, date) {
+            commentList.push({
+                'avatar': avatar,
+                'name': name,
+                'content': content,
+                'date': date
+            });
+
+            var tr = document.createElement('tr');
+            tr.innerHTML = '<th>' + (document.getElementById('configCommentList').childElementCount + 1) + '</th><th>' + name + '</th><th>' + content + '</th><th>' + date.toLocaleString() + '</th>';
+            document.getElementById('configCommentList').append(tr);
+        }
+
+        //删除（最后一条）评论
+        function removeComment() {
+            if (commentList.length) {
+                commentList.pop();
+                document.getElementById('configCommentList').removeChild(document.getElementById('configCommentList').childNodes[document.getElementById('configCommentList').childElementCount]);
+            }
+        }
+
+        //替换表情文字和换行符为对应的HTML标签
+        function emoticonReplace(text) {
+            text = text.replace(/\r\n/g, '<br />').replace(/\n/g, '<br />');
+            for (var i = 0; i < emoticon.length; i++) {
+                text = text.replace(new RegExp(emoticon[i].name, 'g'), '<img class="emoticon" src="' + emoticon[i].URL + '" />');
+            }
+            return text;
+        }
+
         //设置界面显示
         document.getElementById('configTypeText').onclick = function () {
             document.getElementById('configWebsite').style.display = 'none';
@@ -694,6 +855,9 @@
         document.getElementById('configPostDate').valueAsDate = date;
         document.getElementById('configPostTimeHour').value = date.getHours();
         document.getElementById('configPostTimeMinute').value = date.getMinutes();
+        document.getElementById('configCommentDate').valueAsDate = date;
+        document.getElementById('configCommentTimeHour').value = date.getHours();
+        document.getElementById('configCommentTimeMinute').value = date.getMinutes();
         document.getElementById('configLike').value = Math.floor(20 * Math.random());
 
         //检验数值是否合法
@@ -725,6 +889,20 @@
                 document.getElementById('configScreenshotTimeMinute').value = 0;
             }
         })
+        document.getElementById('configCommentTimeHour').addEventListener('input', function () {
+            if (document.getElementById('configCommentTimeHour').value > 23) {
+                document.getElementById('configCommentTimeHour').value = 23;
+            } else if (document.getElementById('configCommentTimeHour').value < 0) {
+                document.getElementById('configCommentTimeHour').value = 0;
+            }
+        })
+        document.getElementById('configCommentTimeMinute').addEventListener('input', function () {
+            if (document.getElementById('configCommentTimeMinute').value > 59) {
+                document.getElementById('configCommentTimeMinute').value = 59;
+            } else if (document.getElementById('configCommentTimeMinute').value < 0) {
+                document.getElementById('configCommentTimeMinute').value = 0;
+            }
+        })
         document.getElementById('configLike').addEventListener('input', function () {
             if (document.getElementById('configLike').value < 0) {
                 document.getElementById('configLike').value = 0;
@@ -788,12 +966,7 @@
             }
 
             //表情替换
-            document.getElementById('text').innerText = document.getElementById('text').innerText.replace(/\r\n/g, '<br />');
+            document.getElementById('text').innerHTML = emoticonReplace(document.getElementById('text').innerText);
-            document.getElementById('text').innerText = document.getElementById('text').innerText.replace(/\n/g, '<br />');
-            for (var i = 0; i < emoticon.length; i++) {
-                document.getElementById('text').innerText = document.getElementById('text').innerText.replace(new RegExp(emoticon[i].name, 'g'), '<img class="emoticon" src="' + emoticon[i].URL + '" />');
-            }
-            document.getElementById('text').innerHTML = document.getElementById('text').innerText;
 
             //九宫格模式设定
             if (document.getElementById('configTypeMultiImage').checked) {
@@ -850,14 +1023,7 @@
             configScreenshotDate.setHours(document.getElementById('configScreenshotTimeHour').value);
             configScreenshotDate.setMinutes(document.getElementById('configScreenshotTimeMinute').value);
 
-            if (document.getElementById('configScreenshotDate').valueAsDate.getTime() == document.getElementById('configPostDate').valueAsDate.getTime()) {
+            document.getElementById('time').innerText = getTimeString(configScreenshotDate, configPostDate);
-                document.getElementById('time').innerText = ((configPostDate.getHours() < 10) ? ('0' + configPostDate.getHours()) : configPostDate.getHours()) + ':' + ((configPostDate.getMinutes() < 10) ? ('0' + configPostDate.getMinutes()) : configPostDate.getMinutes());
-            } else if (document.getElementById('configScreenshotDate').valueAsDate.getTime() - document.getElementById('configPostDate').valueAsDate.getTime() == 60 * 60 * 24 * 1000) {
-                document.getElementById('time').innerText = '昨天 ' + ((configPostDate.getHours() < 10) ? ('0' + configPostDate.getHours()) : configPostDate.getHours()) + ':' + ((configPostDate.getMinutes() < 10) ? ('0' + configPostDate.getMinutes()) : configPostDate.getMinutes());
-            } else {
-                document.getElementById('time').innerText = configPostDate.getFullYear() + '年' + (configPostDate.getMonth() + 1) + '月' + configPostDate.getDate() + '日 ' + ((configPostDate.getHours() < 10) ? ('0' + configPostDate.getHours()) : configPostDate.getHours()) + ':' + ((configPostDate.getMinutes() < 10) ? ('0' + configPostDate.getMinutes()) : configPostDate.getMinutes());
-            }
-
             document.getElementById('topBarTime').innerText = ((document.getElementById('configScreenshotTimeHour').value < 10) ? ('0' + document.getElementById('configScreenshotTimeHour').value) : document.getElementById('configScreenshotTimeHour').value) + ':' + ((document.getElementById('configScreenshotTimeMinute').value < 10) ? ('0' + document.getElementById('configScreenshotTimeMinute').value) : document.getElementById('configScreenshotTimeMinute').value);
 
             if (document.getElementById('configApp') != '') {
@@ -881,6 +1047,26 @@
                 avatarSource.splice(avatarUsedIndex, 1)
             }
 
+            //加入评论区
+            document.getElementById('commentList').innerHTML = '';
+            if (document.getElementById('configShowComment').checked && commentList.length) {
+                document.getElementById('comment').style.display = 'block';
+                for (var i = 0; i < commentList.length; i++) {
+                    document.getElementById('commentList').innerHTML += [
+                        '<div class="commentItem">',
+                        '    <div class="commentAvatar squareImage" style="background-image: url(' + commentList[i].avatar + ');"></div>',
+                        '    <div class="content">',
+                        '        <span class="commentName">' + commentList[i].name + '</span>',
+                        '        <span class="commentTime">' + getTimeString(configScreenshotDate, commentList[i].date) + '</span>',
+                        '        <div class="commentText">' + emoticonReplace(commentList[i].content) + '</div>',
+                        '    </div>',
+                        '</div>'
+                    ].join('');
+                }
+            } else {
+                document.getElementById('comment').style.display = 'none';
+            }
+
             //显示用于生成图片的div
             var height = Number(document.getElementById('configHeight').value);
             document.getElementById('fakeWechatMoment').style.display = 'block';