新媒體工具斗圖網“來圖啦”平臺的設計與開發

邱慧玲 明小波

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

關鍵詞：新媒體工具;斗圖;PHP;HTML5

中圖分類號：TP311.52 ? ? 文獻標識碼：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，“laitula” 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 ?引 ?言

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

1 ?功能介紹

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

1.1 ?熱門表情推薦

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

1.2 ?熱門表情DIY

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

1.3 ?熱門GIF制作

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

1.4 ?表情包下載

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

2 ?功能實現

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

2.1 ?具體過程

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

2.2 ?開發環境搭建

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

2.3 ?平臺主界面

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

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

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

第三部分是側邊欄，包含了網站搜索關鍵字、側邊導航，以及站內快訊模塊。

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

2.4 ?網站后臺的開發

網站后臺需要開發表情包上傳功能，表情包采集功能，以及網站公告的發布功能。

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

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

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

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

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

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

1.

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

1.

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

2.$（function（） {

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

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

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

6. ? ? ? ? ? ? ? ? ? ?//加載中觸發

7. ? ? ? ? ? ? }，

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

9. ? ? ? ? ? ? ? ? ? ? ? ? //加載完成時觸發

10. ? ? ? ? ? ? ? ?}

11. ? ? ? ? }）;

12. }）;

13.

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

（2）使用PHP編輯圖片。在制作自定義表情包功能時，因需要在JPG以及GIF圖片上添加文字，故需要使用PHP的Imagick擴展[2]。通過動態編譯技術添加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編輯視頻。在后續維護中新增加對視頻的處理，需要通過PHP的System（）或者exec（）等方法調用Linux軟件FFMpeg進行操作。首先通過YUM安裝FFMpeg。然后通過PHP執行FFMpeg命令。FFMpeg是Linux下開發的一套可以用來記錄、轉換數字音頻、視頻，并能將其轉化為流的開源計算機程序[3]。采用LGPL或GPL許可證，它提供了錄制、轉換以及流化音視頻的完整解決方案[4]。使用示例為將上傳的視頻轉換為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 ?網站上線

網站開發完成，并經過測試無誤后，正式上線，網站管理員可以通過后臺查看網站運營數據，更新網站內容。運維人員通過服務器對網站進行維護，避免出現宕機、磁盤空間不足的情況。配置完證書后，用戶可以通過安全的HTTPS協議在瀏覽器中對網站進行訪問。

2.7 ?網站維護

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

（1）定期發布新的表情包內容。

（2）定期更換網站管理員密碼。

（3）設置數據庫的定期以及增量備份，以防數據庫內容丟失。

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

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

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

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

3 ?結 ?論

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

參考文獻：

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

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

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

[4] 馮青.基于云計算的視頻存儲和播放系統設計與實現 [D].長沙：湖南大學，2017.

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