邱慧玲 明小波

摘 ?要：針對(duì)普通網(wǎng)民獲取表情包的途徑單一，部分網(wǎng)民不具備PS自制個(gè)人特色表情包能力這一現(xiàn)象，設(shè)計(jì)并開發(fā)“來圖啦”平臺(tái)。該網(wǎng)站前端界面使用流行的響應(yīng)式框架Bootstrap做界面設(shè)計(jì)，后端使用MySQL作為數(shù)據(jù)存儲(chǔ)工具，PHP作為邏輯編程語言，具備大數(shù)據(jù)推薦、DIY制作等功能。通過網(wǎng)站的建設(shè)，為個(gè)人以及企業(yè)運(yùn)營提供信息化、個(gè)性化的表情包制作服務(wù)，目前網(wǎng)站已經(jīng)上線正常運(yùn)營。

關(guān)鍵詞：新媒體工具;斗圖;PHP;HTML5

中圖分類號(hào)：TP311.52 ? ? 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2020）21-0010-04

Design and Development of the New Media Tool Doutu.com “Laitula” Platform

QIU Huiling，MING Xiaobo

（Shangrao Vocational & Technical College，Shangrao ?334109，China）

Abstract：In view of the fact that ordinary netizens have a single way to obtain the emoticons and some netizens do not have the ability to make their own personal emoticons by PS，“l(fā)aitula” platform is designed and developed. The front-end interface of the website uses the popular responsive framework Bootstrap for interface design，the back-end uses MySQL as the data storage tool，PHP as the logic programming language，and has functions such as big data recommendation and DIY production. Through the construction of the website，it provides information-based and personalized emoticon production services for individuals and enterprises. At present，the website has been online and operated normally.

Keywords：new media tool;doutu;PHP;HTML5

0 ?引 ?言

隨著碎片化閱讀的增多，人們的社交習(xí)慣正在潛移默化地從文字轉(zhuǎn)為圖片，聊天中也越來越喜歡用表情包來表達(dá)自己。而新媒體運(yùn)營時(shí)代加大了網(wǎng)絡(luò)文化影響力的同時(shí)，一定程度上增加了表情包題材的豐富性。當(dāng)下，表情包已然成為一種社交文化，它不僅能傳遞語言之外的信息，也能恰當(dāng)?shù)幕钴S氣氛、緩解尷尬，尤其是在陌生人社交中，可以通過表情包為自己建立“人設(shè)”。但是，如何獲取表情包、現(xiàn)在流行什么樣的表情包、怎么做屬于自己的表情包卻成了人們使用過程中最大的煩惱。通過分析同類型平臺(tái)的優(yōu)缺點(diǎn)，作者在與本地多家自媒體服務(wù)者交流后，結(jié)合用戶多元化的個(gè)性需求，我們使用LNMP+MVC的架構(gòu)設(shè)計(jì)并開發(fā)了斗圖網(wǎng)“來圖啦”，該網(wǎng)站具備了熱門表情推薦、流行表情包下載，自制表情包等有趣功能，是一個(gè)簡潔便利的表情包獲取網(wǎng)站。

1 ?功能介紹

“來圖啦”作為一款實(shí)用的新媒體工具，主要具備：熱門表情推薦、熱門表情DIY、熱門GIF制作、表情包下載等四大功能。

1.1 ?熱門表情推薦

在時(shí)下的社交媒體中，表情包成了不可或缺的部分，人們?cè)絹碓搅?xí)慣使用表情來代替文字表達(dá)自己。而在微博、QQ、微信等社交互動(dòng)平臺(tái)，每天都有新的熱門表情產(chǎn)生[1]。如果在朋友圈、廣告文案中使用當(dāng)前流行的表情包，就會(huì)獲得更高的關(guān)注度。但是用戶的精力是有限的，他們并不想花費(fèi)大量時(shí)間搜索，為此，本平臺(tái)定時(shí)采集互聯(lián)網(wǎng)上的熱門表情，根據(jù)熱門推薦算法，展現(xiàn)給用戶最熱門最新的表情，讓用戶不用搜索就能接收到熱門表情推薦。

1.2 ?熱門表情DIY

隨著表情包使用越來越廣泛，用戶們的需求也逐漸提高，伴隨著一系列相應(yīng)軟件的誕生與發(fā)展，用戶們希望自己成為原創(chuàng)作者，設(shè)計(jì)并制作特定的表情包?；谶@個(gè)需求，本平臺(tái)給不了解作圖，不擅長繪畫的用戶提供傻瓜式的模板表情自定義功能，用戶可以在自定義的表情背景上的任意位置添加任意大小、任意顏色的自定義文字，制作屬于自己的獨(dú)一無二的表情。

1.3 ?熱門GIF制作

一些影視劇作或綜藝場景里的“名場面”，往往會(huì)誕生經(jīng)典的“?！?，如果把這種場面制作成GIF，替換里面的某些話語，就會(huì)成為非常有喜劇效果的GIF表情，比如：“王境澤真香”系列、“有錢為所欲為”系列。本平臺(tái)將最為流行的幾大“名場面”制作成了GIF模板，可以供用戶隨意編輯GIF字幕內(nèi)容，方便用戶在任何場景使用。

1.4 ?表情包下載

用戶在斗圖網(wǎng)中找到自己滿意的表情包后，就可以根據(jù)網(wǎng)頁提示將表情功下載到自己的電腦，方便保存。

2 ?功能實(shí)現(xiàn)

本平臺(tái)前端基于HTML5+CSS3+jQuery運(yùn)用了成熟的Bootstrap響應(yīng)式框架，后端使用PHP作為編程語言，并借助開源的MySQL數(shù)據(jù)庫進(jìn)行數(shù)據(jù)存儲(chǔ)，使用Nginx作為HTTP Web服務(wù)器。平臺(tái)已經(jīng)購買了阿里云服務(wù)器，并完成公安部、工信部備案的域名：http：//www.laitula.com，網(wǎng)站中文名：來圖啦，完成了HTTPS證書的認(rèn)證與使用。

2.1 ?具體過程

首先購買一臺(tái)2核2 GB的阿里云服務(wù)器，然后購買域名laitula.com，并遵照國家工信部的規(guī)定對(duì)其進(jìn)行工信部和公安部備案，之后通過阿里云控制臺(tái)將域名解析到購買的服務(wù)器的外網(wǎng)IP地址。接著在本地電腦上安裝PuTTY軟件和FileZilla軟件，其中PuTTY是一個(gè)強(qiáng)大又簡單的串行接口連接軟件，我們使用該軟件遠(yuǎn)程登錄我們的服務(wù)器。而FileZilla是一個(gè)功能強(qiáng)大的SFTP、FTP文件傳輸軟件，用于上傳、下載以及編輯阿里云服務(wù)器上的文件。

2.2 ?開發(fā)環(huán)境搭建

遠(yuǎn)程連接Linux實(shí)例，在Linux上通過YUM庫以及官網(wǎng)下載的安裝包安裝開發(fā)需要的軟件，包括Nginx、PHP、MySQL等軟件，并進(jìn)行相應(yīng)配置的初始化，完成開發(fā)環(huán)境的搭建，指定項(xiàng)目開發(fā)目錄為/var/www/html/。前期的準(zhǔn)備工作完成后，開始進(jìn)行Web前后端的開發(fā)，前端使用最流行的Bootstrap前端框架，結(jié)合jQuery進(jìn)行設(shè)計(jì)。后端使用ThinkPHP框架設(shè)計(jì)并結(jié)合FFMpeg等工具對(duì)圖片進(jìn)行在線處理。網(wǎng)站的頁面布局采用響應(yīng)式開發(fā)，能夠完美適配PC端以及移動(dòng)端的訪問，符合現(xiàn)在的Web開發(fā)流行趨勢。

2.3 ?平臺(tái)主界面

“來圖啦”網(wǎng)平臺(tái)主界面由以下四部分組成，效果圖如圖1所示。

第一部分是頂部菜單欄，包含三個(gè)獨(dú)立的區(qū)域，分別是網(wǎng)站Logo區(qū)域、菜單區(qū)域、以及搜索功能區(qū)域。

第二部分是內(nèi)容顯示區(qū)域，顯示的內(nèi)容由點(diǎn)擊的菜單所決定，包括首頁、熱門表情頁、熱門套圖、熱門GIF制作、表情模板制作等頁面。

第三部分是側(cè)邊欄，包含了網(wǎng)站搜索關(guān)鍵字、側(cè)邊導(dǎo)航，以及站內(nèi)快訊模塊。

第四部分是頁面最底部，包含了友請(qǐng)鏈接、底部導(dǎo)航、以及工信部備案信息等。

2.4 ?網(wǎng)站后臺(tái)的開發(fā)

網(wǎng)站后臺(tái)需要開發(fā)表情包上傳功能，表情包采集功能，以及網(wǎng)站公告的發(fā)布功能。

2.5 ?開發(fā)過程中遇到的問題及解決方案

在“斗圖網(wǎng)”的開發(fā)過程中，并不是一帆風(fēng)順的，主要遇到了以下幾個(gè)問題：

（1）網(wǎng)站訪問速度慢。網(wǎng)站上線后出現(xiàn)網(wǎng)站前端因?yàn)閳D片太多，且服務(wù)器帶寬有限，網(wǎng)站的打開速度變慢的問題。針對(duì)這一現(xiàn)象，采用了懶加載技術(shù)，以此節(jié)省用戶流量并提高頁面性能。該技術(shù)可以在用戶瀏覽到當(dāng)前資源的時(shí)候，再對(duì)資源進(jìn)行請(qǐng)求和加載。

實(shí)現(xiàn)原理：當(dāng)用戶訪問頁面的時(shí)候，首先可以把img元素或者是其他元素的圖片路徑替換成一張預(yù)設(shè)的默認(rèn)圖片的路徑（這樣就只需請(qǐng)求一次），首次訪問時(shí)，通過jQuery設(shè)置圖片路徑加載當(dāng)前可視區(qū)域里的圖片的真實(shí)路徑，當(dāng)滑動(dòng)滾動(dòng)條移動(dòng)可視區(qū)域時(shí)，監(jiān)控滾動(dòng)事件，加載出現(xiàn)在可視區(qū)域的新圖片，這就是延時(shí)加載技術(shù)，即圖片懶加載技術(shù)。

這里我們使用的是jQuery.lazyload延遲加載插件，使用方法為：

1）引用jQuery和jQuery.lazyload.js到頁面：

1.

2）在網(wǎng)站圖片標(biāo)簽的src屬性填寫默認(rèn)圖片路徑，然后添加data-original屬性，用于保存圖片的真實(shí)路徑。可通過設(shè)置自定義類，通過元素選擇器，來指定界面中的哪一個(gè)模塊需要使用懶加載，這里本站是全站懶加載。故不用設(shè)置自定義類，直接使用img標(biāo)簽即可，主要代碼如下所示：

1.

3）js初始化lazyload并設(shè)置圖片加載方式，主要代碼如下所示：

2.$（function（） {

3. $（"img"）.lazyload（{

4. ? ? ? ? ? effect ： "fadeIn"，

5. ? ? ? ? ? ? ? ? appear ： function（elements_left， settings） {

6. ? ? ? ? ? ? ? ? ? ?//加載中觸發(fā)

7. ? ? ? ? ? ? }，

8. ? ? ? ? ? ? ? ? ?load ： function（elements_left， settings） {

9. ? ? ? ? ? ? ? ? ? ? ? ? //加載完成時(shí)觸發(fā)

10. ? ? ? ? ? ? ? ?}

11. ? ? ? ? }）;

12. }）;

13.

以上這些方法對(duì)全局的圖片都有效。采用這種方式便能完美解決頁面一次性向服務(wù)器響應(yīng)大量請(qǐng)求導(dǎo)致服務(wù)器響應(yīng)慢，頁面卡頓或崩潰等問題。

（2）使用PHP編輯圖片。在制作自定義表情包功能時(shí)，因需要在JPG以及GIF圖片上添加文字，故需要使用PHP的Imagick擴(kuò)展[2]。通過動(dòng)態(tài)編譯技術(shù)添加Imagick擴(kuò)展后，使用該擴(kuò)展對(duì)圖片進(jìn)行處理，核心代碼為：

1.$image = new ＼Imagick（$imgUrl）;

2. ? ? ? ?$imgProperty ? ? = $image->getImageGeometry（）;

3. ? ? ? ?$imgWidth ? ? ? = $imgProperty['width'];

4. ? ? ? ?$imgHeight ? ? ?= $imgProperty['height'];

5. ? ? ? ?$draw ?= new ＼ImagickDraw（）;

6. ? ? ? ?$draw->setFillOpacity（$textOpa）;

7. ? ? ? ?$draw->setStrokeWidth（1）;

8. ? ? ? ?$draw->setStrokeOpacity（$strokeOpa）;

9. ? ? ? ?$draw->setTextKerning（$letterSpace）;

10. ? ? ? ?$draw->setTextEncoding（'UTF-8'）;

11. ? ? ? ?$draw->setGravity（＼Imagick：：GRAVITY_CENTER）;

12. ? ? ? ?$draw->setFont（$fontfamily）;

13. ? ? ? ? ? ? ? ?$draw->setFillColor（$textColor）;

14. ? ? ? ?$draw->setStrokeColor（$strokeColor）;

15. ? ? ? ?$draw->setFontSize（$fontSize）;

16. ? ? ? ? ? ?$draw->annotation（$x_pos， $y_pos， $waterText）;

17. ? ? ? ? ? ? ? ?$image->drawImage（$draw）;

（3）使用PHP編輯視頻。在后續(xù)維護(hù)中新增加對(duì)視頻的處理，需要通過PHP的System（）或者exec（）等方法調(diào)用Linux軟件FFMpeg進(jìn)行操作。首先通過YUM安裝FFMpeg。然后通過PHP執(zhí)行FFMpeg命令。FFMpeg是Linux下開發(fā)的一套可以用來記錄、轉(zhuǎn)換數(shù)字音頻、視頻，并能將其轉(zhuǎn)化為流的開源計(jì)算機(jī)程序[3]。采用LGPL或GPL許可證，它提供了錄制、轉(zhuǎn)換以及流化音視頻的完整解決方案[4]。使用示例為將上傳的視頻轉(zhuǎn)換為GIF，代碼為：

1.public function videotrans（$path）{

2. ? ? ? ?$path = IMG_SAVE_PATH.$path;

3. ? ? ? ?$newimg = md5（time（）.rand（100，999））.'.gif';

4. ? ? ? ?$command = "ffmpeg -y -i ".$path." -f gif /data/img/tmp/".$newimg;

5. ? ? ? ?$rs = system（$command）;

6. ? ? ? ? ? ?$imgurl = IMG_SITE_TMP.'tmp/'.$newimg;

7. ? ? ? ? ? ?$this->ajaxreturn（['status'=>1，'imgurl'=>$imgurl]）;

8. ? ?}

2.6 ?網(wǎng)站上線

網(wǎng)站開發(fā)完成，并經(jīng)過測試無誤后，正式上線，網(wǎng)站管理員可以通過后臺(tái)查看網(wǎng)站運(yùn)營數(shù)據(jù)，更新網(wǎng)站內(nèi)容。運(yùn)維人員通過服務(wù)器對(duì)網(wǎng)站進(jìn)行維護(hù)，避免出現(xiàn)宕機(jī)、磁盤空間不足的情況。配置完證書后，用戶可以通過安全的HTTPS協(xié)議在瀏覽器中對(duì)網(wǎng)站進(jìn)行訪問。

2.7 ?網(wǎng)站維護(hù)

斗圖網(wǎng)“來圖啦”平臺(tái)網(wǎng)站服務(wù)器由阿里云機(jī)房全權(quán)托管，在硬件方面不需要自己維護(hù)。我們現(xiàn)在主要的日常工作是對(duì)平臺(tái)的運(yùn)營及安全方面進(jìn)行維護(hù)。具體的措施為：

（1）定期發(fā)布新的表情包內(nèi)容。

（2）定期更換網(wǎng)站管理員密碼。

（3）設(shè)置數(shù)據(jù)庫的定期以及增量備份，以防數(shù)據(jù)庫內(nèi)容丟失。

（4）及時(shí)清理系統(tǒng)運(yùn)行中的產(chǎn)生的垃圾文件以及日志文件，保證磁盤空間充足。

（5）保障平臺(tái)的數(shù)據(jù)信息安全，使用密鑰的方式登錄服務(wù)器，禁止外部root登錄。

（6）利用阿里云平臺(tái)提供的安全提示，及時(shí)處理系統(tǒng)漏洞，升級(jí)系統(tǒng)防護(hù)能力。

（7）檢查JavaScript、CSS3帶來的XSS注入隱患以及MySQL惡意注入隱患并完善代碼，通過防火墻預(yù)防CC、DDoS攻擊等。

3 ?結(jié) ?論

本平臺(tái)致力于打造一款具備大數(shù)據(jù)推薦、DIY制作等個(gè)性化功能的新媒體工具，讓用戶輕輕松松就能獲取自己需要的表情，提高用戶在社交平臺(tái)中分享各類型表情包的樂趣感，釋放生活壓力?！皝韴D啦”從開發(fā)環(huán)境搭建到網(wǎng)站維護(hù)，成功實(shí)現(xiàn)了熱門表情推薦、熱門表情DIY、熱門GIF制作、表情包下載等四大功能，目前已經(jīng)上線正常運(yùn)營。

參考文獻(xiàn)：

[1] 李子若.新媒體時(shí)代下網(wǎng)絡(luò)表情包的特征及傳播功能 [J].今傳媒，2020，28（2）：16-19.

[2] 胡遠(yuǎn)珍.網(wǎng)絡(luò)社交中表情符號(hào)的表達(dá)與象征意義分析 [J].湖北大學(xué)學(xué)報(bào)（哲學(xué)社會(huì)科學(xué)版），2017，44（6）：147-154+169.

[3] 胡國強(qiáng)，周兆永，信朝霞.基于SRS的開源直播系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [J].現(xiàn)代電子技術(shù)，2016，39（16）：36-39+43.

[4] 馮青.基于云計(jì)算的視頻存儲(chǔ)和播放系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [D].長沙：湖南大學(xué)，2017.

作者簡介：邱慧玲（1991—），女，漢族，江西上饒人，助教，碩士，研究方向：人工智能、網(wǎng)頁設(shè)計(jì)與制作。