新媒體工具斗圖網(wǎng)“來圖啦”平臺的設(shè)計與開發(fā)

邱慧玲 明小波

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

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

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

1 ?功能介紹

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

1.1 ?熱門表情推薦

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

1.2 ?熱門表情DIY

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

1.3 ?熱門GIF制作

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

1.4 ?表情包下載

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

2 ?功能實現(xiàn)

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

2.1 ?具體過程

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

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

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

2.3 ?平臺主界面

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

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

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

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

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

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

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

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

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

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

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

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

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

1.

2）在網(wǎng)站圖片標(biāo)簽的src屬性填寫默認(rèn)圖片路徑，然后添加data-original屬性，用于保存圖片的真實路徑?？赏ㄟ^設(shè)置自定義類，通過元素選擇器，來指定界面中的哪一個模塊需要使用懶加載，這里本站是全站懶加載。故不用設(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. ? ? ? ? ? ? ? ? ? ? ? ? //加載完成時觸發(fā)

10. ? ? ? ? ? ? ? ?}

11. ? ? ? ? }）;

12. }）;

13.

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

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

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ù)維護中新增加對視頻的處理，需要通過PHP的System（）或者exec（）等方法調(diào)用Linux軟件FFMpeg進行操作。首先通過YUM安裝FFMpeg。然后通過PHP執(zhí)行FFMpeg命令。FFMpeg是Linux下開發(fā)的一套可以用來記錄、轉(zhuǎn)換數(shù)字音頻、視頻，并能將其轉(zhuǎn)化為流的開源計算機程序[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)站管理員可以通過后臺查看網(wǎng)站運營數(shù)據(jù)，更新網(wǎng)站內(nèi)容。運維人員通過服務(wù)器對網(wǎng)站進行維護，避免出現(xiàn)宕機、磁盤空間不足的情況。配置完證書后，用戶可以通過安全的HTTPS協(xié)議在瀏覽器中對網(wǎng)站進行訪問。

2.7 ?網(wǎng)站維護

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

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

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

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

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

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

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

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

3 ?結(jié) ?論

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

參考文獻：

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

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

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

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

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