邱慧玲 明小波

摘  要：针对普通网民获取表情包的途径单一，部分网民不具备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—），女，汉族，江西上饶人，助教，硕士，研究方向：人工智能、网页设计与制作。