Emoticon support

2019-03-15 15:45:21 +08:00
parent 982e87f9a4
commit dce1a2451c
2 changed files with 118 additions and 7 deletions
--- a/emoticon.js
+++ b/emoticon.js
@@ -0,0 +1,89 @@
+var emoticon = [
+{"name":"\\[微笑\\]","URL":"https://ae01.alicdn.com/kf/HTB1yyhdMgHqK1RjSZFk760.WFXaN.png"},
+{"name":"\\[撇嘴\\]","URL":"https://ae01.alicdn.com/kf/HTB1Yr7.LZbpK1RjSZFy760_qFXaF.png"},
+{"name":"\\[色\\]","URL":"https://ae01.alicdn.com/kf/HTB1zck8L9zqK1RjSZFj762lCFXaX.png"},
+{"name":"\\[发呆\\]","URL":"https://ae01.alicdn.com/kf/HTB1kioyL9zqK1RjSZPc762TepXa9.png"},
+{"name":"\\[得意\\]","URL":"https://ae01.alicdn.com/kf/HTB11U4kMhYaK1RjSZFn76180pXar.png"},
+{"name":"\\[流泪\\]","URL":"https://ae01.alicdn.com/kf/HTB1ZLI9L4TpK1RjSZR0762EwXXaf.png"},
+{"name":"\\[害羞\\]","URL":"https://ae01.alicdn.com/kf/HTB1yvVaMXzqK1RjSZFo762fcXXaw.png"},
+{"name":"\\[闭嘴\\]","URL":"https://ae01.alicdn.com/kf/HTB1lTsBL9zqK1RjSZPc762TepXak.png"},
+{"name":"\\[睡\\]","URL":"https://ae01.alicdn.com/kf/HTB1UTdvMhnaK1RjSZFB763W7VXaT.png"},
+{"name":"\\[大哭\\]","URL":"https://ae01.alicdn.com/kf/HTB10wpyMhjaK1RjSZKz760VwXXaG.png"},
+{"name":"\\[尴尬\\]","URL":"https://ae01.alicdn.com/kf/HTB196lXMhTpK1RjSZFM762G_VXaD.png"},
+{"name":"\\[发怒\\]","URL":"https://ae01.alicdn.com/kf/HTB1K3XdMgHqK1RjSZFE763GMXXar.png"},
+{"name":"\\[调皮\\]","URL":"https://ae01.alicdn.com/kf/HTB1e57_LVYqK1RjSZLe762XppXaI.png"},
+{"name":"\\[呲牙\\]","URL":"https://ae01.alicdn.com/kf/HTB13GpcMcbpK1RjSZFy760_qFXaK.png"},
+{"name":"\\[惊讶\\]","URL":"https://ae01.alicdn.com/kf/HTB1RMxwMhnaK1RjSZFB763W7VXag.png"},
+{"name":"\\[难过\\]","URL":"https://ae01.alicdn.com/kf/HTB1bfdaMhTpK1RjSZFK7612wXXan.png"},
+{"name":"\\[囧\\]","URL":"https://ae01.alicdn.com/kf/HTB1bRpkMhjaK1RjSZFA762dLFXa9.png"},
+{"name":"\\[抓狂\\]","URL":"https://ae01.alicdn.com/kf/HTB1FCtcMa6qK1RjSZFm7600PFXaY.png"},
+{"name":"\\[吐\\]","URL":"https://ae01.alicdn.com/kf/HTB1PcVjMkvoK1RjSZFw763iCFXaj.png"},
+{"name":"\\[偷笑\\]","URL":"https://ae01.alicdn.com/kf/HTB1u30aMhTpK1RjSZFK7612wXXai.png"},
+{"name":"\\[愉快\\]","URL":"https://ae01.alicdn.com/kf/HTB1tlZ.L7voK1RjSZPf760PKFXaL.png"},
+{"name":"\\[白眼\\]","URL":"https://ae01.alicdn.com/kf/HTB1E9o.L7voK1RjSZPf760PKFXaA.png"},
+{"name":"\\[傲慢\\]","URL":"https://ae01.alicdn.com/kf/HTB1i3JjMkvoK1RjSZFw763iCFXaB.png"},
+{"name":"\\[困\\]","URL":"https://ae01.alicdn.com/kf/HTB16cpeMXzqK1RjSZFC762bxVXaD.png"},
+{"name":"\\[惊恐\\]","URL":"https://ae01.alicdn.com/kf/HTB14Lk9LYPpK1RjSZFF7615PpXaI.png"},
+{"name":"\\[流汗\\]","URL":"https://ae01.alicdn.com/kf/HTB1ZNhcMkvoK1RjSZFN763xMVXaj.png"},
+{"name":"\\[憨笑\\]","URL":"https://ae01.alicdn.com/kf/HTB1E_c7L9zqK1RjSZFL763n2XXa4.png"},
+{"name":"\\[悠闲\\]","URL":"https://ae01.alicdn.com/kf/HTB1lAdaMgHqK1RjSZFg7617JXXaK.png"},
+{"name":"\\[奋斗\\]","URL":"https://ae01.alicdn.com/kf/HTB1T1VlMcfpK1RjSZFO7616nFXad.png"},
+{"name":"\\[咒骂\\]","URL":"https://ae01.alicdn.com/kf/HTB1aIdXMkvoK1RjSZPf760PKFXao.png"},
+{"name":"\\[疑问\\]","URL":"https://ae01.alicdn.com/kf/HTB1WN..LVYqK1RjSZLe762XppXaA.png"},
+{"name":"\\[嘘\\]","URL":"https://ae01.alicdn.com/kf/HTB14e0cMXzqK1RjSZFo762fcXXay.png"},
+{"name":"\\[晕\\]","URL":"https://ae01.alicdn.com/kf/HTB1w0lXMkvoK1RjSZPf760PKFXaB.png"},
+{"name":"\\[衰\\]","URL":"https://ae01.alicdn.com/kf/HTB1kdZDL9zqK1RjSZPc762TepXaF.png"},
+{"name":"\\[骷髅\\]","URL":"https://ae01.alicdn.com/kf/HTB1R2txMhnaK1RjSZFB763W7VXaV.png"},
+{"name":"\\[敲打\\]","URL":"https://ae01.alicdn.com/kf/HTB1iUE7L9zqK1RjSZPx7634tVXaQ.png"},
+{"name":"\\[再见\\]","URL":"https://ae01.alicdn.com/kf/HTB1kEKaXe3tHKVjSZSg7604QFXas.png"},
+{"name":"\\[擦汗\\]","URL":"https://ae01.alicdn.com/kf/HTB1N5xdMbrpK1RjSZTE763WAVXa5.png"},
+{"name":"\\[抠鼻\\]","URL":"https://ae01.alicdn.com/kf/HTB1f3o8L9zqK1RjSZFL763n2XXaD.png"},
+{"name":"\\[鼓掌\\]","URL":"https://ae01.alicdn.com/kf/HTB1EpNAMhjaK1RjSZKz760VwXXa2.png"},
+{"name":"\\[坏笑\\]","URL":"https://ae01.alicdn.com/kf/HTB1LUlbMkvoK1RjSZFD760Y3pXaw.png"},
+{"name":"\\[左哼哼\\]","URL":"https://ae01.alicdn.com/kf/HTB14EJlMhjaK1RjSZFA762dLFXaY.png"},
+{"name":"\\[右哼哼\\]","URL":"https://ae01.alicdn.com/kf/HTB1miQ.LYvpK1RjSZPi762mwXXan.png"},
+{"name":"\\[哈欠\\]","URL":"https://ae01.alicdn.com/kf/HTB1a3XkMkvoK1RjSZFw763iCFXaM.png"},
+{"name":"\\[鄙视\\]","URL":"https://ae01.alicdn.com/kf/HTB12PldMcbpK1RjSZFy760_qFXa7.png"},
+{"name":"\\[委屈\\]","URL":"https://ae01.alicdn.com/kf/HTB1GJljMgHqK1RjSZFk760.WFXa9.png"},
+{"name":"\\[快哭了\\]","URL":"https://ae01.alicdn.com/kf/HTB1BkVaMmzqK1RjSZFH7623CpXae.png"},
+{"name":"\\[阴险\\]","URL":"https://ae01.alicdn.com/kf/HTB1tMxbMhTpK1RjSZFM762G_VXaL.png"},
+{"name":"\\[亲亲\\]","URL":"https://ae01.alicdn.com/kf/HTB1VDRbMhTpK1RjSZFK7612wXXam.png"},
+{"name":"\\[可怜\\]","URL":"https://ae01.alicdn.com/kf/HTB1bDpdMcbpK1RjSZFy760_qFXax.png"},
+{"name":"\\[菜刀\\]","URL":"https://ae01.alicdn.com/kf/HTB1gjVbMgHqK1RjSZFg7617JXXaF.png"},
+{"name":"\\[西瓜\\]","URL":"https://ae01.alicdn.com/kf/HTB1CU8bMhTpK1RjSZFK7612wXXaE.png"},
+{"name":"\\[啤酒\\]","URL":"https://ae01.alicdn.com/kf/HTB1P00dMXzqK1RjSZFo762fcXXaE.png"},
+{"name":"\\[咖啡\\]","URL":"https://ae01.alicdn.com/kf/HTB1uwleMa6qK1RjSZFm7600PFXad.png"},
+{"name":"\\[猪头\\]","URL":"https://ae01.alicdn.com/kf/HTB19lJbMhTpK1RjSZFM762G_VXan.png"},
+{"name":"\\[玫瑰\\]","URL":"https://ae01.alicdn.com/kf/HTB1j9._LYPpK1RjSZFF7615PpXax.png"},
+{"name":"\\[凋谢\\]","URL":"https://ae01.alicdn.com/kf/HTB1eMgEL9zqK1RjSZPc762TepXa0.png"},
+{"name":"\\[嘴唇\\]","URL":"https://ae01.alicdn.com/kf/HTB1MJloMhYaK1RjSZFn76180pXa0.png"},
+{"name":"\\[爱心\\]","URL":"https://ae01.alicdn.com/kf/HTB1uiheMbrpK1RjSZTE763WAVXaJ.png"},
+{"name":"\\[心碎\\]","URL":"https://ae01.alicdn.com/kf/HTB1eARcMkvoK1RjSZFD760Y3pXaG.png"},
+{"name":"\\[蛋糕\\]","URL":"https://ae01.alicdn.com/kf/HTB1Fz8aMkvoK1RjSZPf760PKFXa8.png"},
+{"name":"\\[炸弹\\]","URL":"https://ae01.alicdn.com/kf/HTB1VtBeMkvoK1RjSZFN763xMVXah.png"},
+{"name":"\\[便便\\]","URL":"https://ae01.alicdn.com/kf/HTB13NpeMcbpK1RjSZFy760_qFXa1.png"},
+{"name":"\\[月亮\\]","URL":"https://ae01.alicdn.com/kf/HTB1aRwEL9zqK1RjSZPc762TepXae.png"},
+{"name":"\\[太阳\\]","URL":"https://ae01.alicdn.com/kf/HTB1LEtbMirpK1RjSZFh760SdXXaG.png"},
+{"name":"\\[拥抱\\]","URL":"https://ae01.alicdn.com/kf/HTB1.FtdMkvoK1RjSZFD760Y3pXa1.png"},
+{"name":"\\[强\\]","URL":"https://ae01.alicdn.com/kf/HTB1fPdeMcbpK1RjSZFy760_qFXam.png"},
+{"name":"\\[弱\\]","URL":"https://ae01.alicdn.com/kf/HTB181tgMXzqK1RjSZFC762bxVXaa.png"},
+{"name":"\\[握手\\]","URL":"https://ae01.alicdn.com/kf/HTB1R3teMjTpK1RjSZKP7613UpXaZ.png"},
+{"name":"\\[胜利\\]","URL":"https://ae01.alicdn.com/kf/HTB1b_pcMhTpK1RjSZFK7612wXXaC.png"},
+{"name":"\\[抱拳\\]","URL":"https://ae01.alicdn.com/kf/HTB1glhbMmzqK1RjSZFj762lCFXaZ.png"},
+{"name":"\\[勾引\\]","URL":"https://ae01.alicdn.com/kf/HTB1lxxeMjTpK1RjSZKP7613UpXaw.png"},
+{"name":"\\[拳头\\]","URL":"https://ae01.alicdn.com/kf/HTB1UsJgMgHqK1RjSZJn762NLpXaY.png"},
+{"name":"\\[OK\\]","URL":"https://ae01.alicdn.com/kf/HTB14i7.LYPpK1RjSZFF7615PpXat.png"},
+{"name":"\\[跳跳\\]","URL":"https://ae01.alicdn.com/kf/HTB1sB9cXe3tHKVjSZSg7604QFXax.png"},
+{"name":"\\[发抖\\]","URL":"https://ae01.alicdn.com/kf/HTB1DKUFL9zqK1RjSZPc762TepXa3.png"},
+{"name":"\\[怄火\\]","URL":"https://ae01.alicdn.com/kf/HTB1hQRaMXYqK1RjSZLe762XppXaJ.png"},
+{"name":"\\[转圈\\]","URL":"https://ae01.alicdn.com/kf/HTB1y4FeMXzqK1RjSZFo762fcXXah.png"},
+{"name":"\\[嘿哈\\]","URL":"https://ae01.alicdn.com/kf/HTB1vm.7L3TqK1RjSZPh760fOFXaF.png"},
+{"name":"\\[捂脸\\]","URL":"https://ae01.alicdn.com/kf/HTB1DsRoMhjaK1RjSZFA762dLFXaU.png"},
+{"name":"\\[奸笑\\]","URL":"https://ae01.alicdn.com/kf/HTB1i7JbMbvpK1RjSZFq763XUVXas.png"},
+{"name":"\\[机智\\]","URL":"https://ae01.alicdn.com/kf/HTB1lt8oMhjaK1RjSZFA762dLFXaH.png"},
+{"name":"\\[皱眉\\]","URL":"https://ae01.alicdn.com/kf/HTB1a9XbMbvpK1RjSZFq763XUVXaM.png"},
+{"name":"\\[耶\\]","URL":"https://ae01.alicdn.com/kf/HTB1AxFhMgHqK1RjSZFE763GMXXal.png"},
+{"name":"\\[红包\\]","URL":"https://ae01.alicdn.com/kf/HTB1hA4eMXzqK1RjSZFo762fcXXaY.png"},
+{"name":"\\[發\\]","URL":"https://ae01.alicdn.com/kf/HTB1yZtfMkvoK1RjSZFN763xMVXaf.png"},
+{"name":"\\[福\\]","URL":"https://ae01.alicdn.com/kf/HTB1dYGdXe3tHKVjSZSg7604QFXaY.png"}
+]
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE HTML>
+<!DOCTYPE HTML>
 <html>
 <head>
    <title>朋友圈转发截图生成工具</title>
@@ -15,9 +15,9 @@

        #fakeWechatMoment {
            background-color: #ffffff;
-            display: none;
+            /*display: none;*/
            position: fixed;
-            /*display: block;*/
+            display: block;
            left: 100%;
            top: 0;
        }
@@ -188,6 +188,13 @@
            background-repeat: no-repeat;
        }

+        .emoticon {
+            width: 1.25em;
+            height: 1.25em;
+            display: inline-block;
+            vertical-align: text-top;
+        }
+
        .heimu{
            background-color: #000000;
            color: #000000;
@@ -222,7 +229,7 @@
            <div class="mdui-col-xs-8 mdui-col-sm-10">
                <div class="mdui-textfield">
                    <label class="mdui-textfield-label">名字</label>
-                    <input id="configName" class="mdui-textfield-input" type="text" value="营销号免费广告姬" />
+                    <input id="configName" class="mdui-textfield-input" type="text" value="A 营销号免费广告姬" />
                </div>
            </div>
            <div class="mdui-col-xs-4 mdui-col-sm-2">
@@ -235,7 +242,7 @@
        </div>
        <div class="mdui-textfield">
            <label class="mdui-textfield-label">正文</label>
-            <textarea id="configText" class="mdui-textfield-input">很实用的教程&#10;需要收集五个赞&nbsp;谢谢大家啦～(　^ω^)</textarea>
+            <textarea id="configText" class="mdui-textfield-input">很实用的教程[微笑]&#10;需要收集五个赞&nbsp;谢谢大家啦～(　^ω^)</textarea>
        </div>
        <div class="mdui-textfield">
            <label class="mdui-textfield-label">截图类型</label>
@@ -390,7 +397,7 @@
            <div id="main" class="main">
                <div style="height: 30px;"></div>
                <div class="avatarOut">
-                    <div id="avatar" class="avatarIn squareImage" style="background-image: url(https://ae01.alicdn.com/kf/HTB1sqJDa.LrK1Rjy1zbq6AenFXaf.jpg);"></div>
+                    <div id="avatar" class="avatarIn squareImage" style="background-image: url(https://ae01.alicdn.com/kf/HTB1yE4fMmzqK1RjSZFp761kSXXal.png);"></div>
                </div>
                <div class="content">
                    <div id="name" class="name"></div>
@@ -446,7 +453,7 @@
        <div class="mdui-m-y-4" style="text-align: center;">
            <iframe src="https://ghbtns.com/github-btn.html?user=TransparentLC&repo=WechatMomentScreenshot&type=star&count=true" frameborder="0" scrolling="no" width="90" height="30"></iframe>
            <br />
-            <span class="mdui-typo-caption-opacity ">©&nbsp;2019&nbsp;✨小透明・宸✨</span>
+            <span class="mdui-typo-caption-opacity">©&nbsp;2019&nbsp;✨小透明・宸✨</span>
        </div>

        <div id="generatedPopup" class="mdui-dialog">
@@ -508,6 +515,12 @@
                        <a href="https://www.mdui.org/">MDUI</a>&nbsp;开源许可：<a href="https://github.com/zdhxiong/mdui/blob/master/LICENSE">The MIT License</a>
                    </li>
                </ul>
+                <h4>请小透明喝一瓶肥宅快乐水～(*´∀`)</h4>
+                <div style="text-align: center;">
+                    <img style="width: 60%;" src="https://ae01.alicdn.com/kf/HTB1r20aMgDqK1RjSZSy761xEVXaG.png" />
+                    <br />
+                    <span class="mdui-typo-caption-opacity">微信支付</span>
+                </div>
            </div>
            <div class="mdui-dialog-actions">
                <button class="mdui-btn mdui-ripple" mdui-dialog-close>关闭</button>
@@ -520,6 +533,7 @@
    <!--<script src="html2canvas.min.js"></script>-->
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <script src="avatarURL.js"></script>
+    <script src="emoticon.js"></script>
    <script src="fuckWechat.js"></script>
    <script>
        function clearMultiImage() {
@@ -644,6 +658,14 @@
                document.getElementById('location').innerText = document.getElementById('configLocation').value;
            }

+            //表情替换
+            document.getElementById('text').innerText = document.getElementById('text').innerText.replace(/\r\n/g, '<br />');
+            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) {
                for (var i = 1; i <= 9; i++) {