移动web端高清审版技术研究与实现

移动web端高清审版技术研究与实现

张建中  于  波  吴琼莹

(人民日报社技术部)

【摘  要】在传统移动审版系统中，版面文件是标清图片，编小后看不到字，放大后看不清字，严重影响审版的效果和效率。本文研究了版面展示技术，基于移动端svg无失真缩放特性，提出了一个高清审版技术方案，先将版面文件实时保存在pdf文件中，再高效转换成svg文件，当用户访问时，通过按行推送数据流的方式安全展现高清大样，打破了纸媒无法在H5页面中显示飞腾高清大样的技术壁垒，可以在纸媒行业广泛推广。

【关健词】审版系统  高清大样  可缩放矢量图  渲染

1  引言

随着移动互联网的快速发展，越来越多的报社通过高速移动互联网和移动设备进行了新闻生产方面的有益尝试，为报社带来随时、随地快速传稿、审稿等便利。但早期的移动采编系统受限于当时的技术手段和业务模式，在为报社带来便利的同时依然存在诸多问题。飞腾版面在移动端展示jpg图片，图片是标量图，缩小版面后看不清图文内容，放大版面后图文却失真严重，无法实现版面的高清显示，严重阻碍了看版和审版的效率。人民日报社研发了一个移动web端高清审版系统，使得编辑记者可以随时随地，安全有效地进行策、采、编、审、发等操作，极大提升了人民日报新闻生产的快速响应能力，其中高清审版技术打破了媒体行业无法在移动端H5页面中显示飞腾高清大样的技术壁垒，对报业用户具有极大推广价值叫。

2  研究思路

纸媒排版系统能创建pdf格式文档、jpg格式图片、vft或vfx组版文件等，仅pdf格式文档能在电脑web端实现高清不失真显示。但移动端较难实现。如果开发app,由于app具有系统api调用能力，可以实现高清版面文件的展示，但成本太高，时间也太长；而通过H5展示pdf格式版面，可以实现版面的浏览，但是一旦放大版面，清晰度就会明显下降。

在移动端实现高清版面展示，只能更换思路，目前svg可缩放向量图可以实现版面内容的高清展示，但业内从来没用过，且飞腾组版软件也不支持创建svg文件四。我们的解决方案是开发一套版面文件监控和格式转换程序，监视版面文件变化，同步将pdf版面转换成svg版面。但排版软件只在组版完毕时生成pdf版面，所以移动web端无法看到实时的版面内容，我们还需要对飞腾进行升级，实现排版保存和创建pdf版面文件同步，同时还要修改项目控制器和相应页面，以适配svg安全读取和显示。

3  架构设计

高清大样系统包括飞腾升级程序、可缩放矢量图的高效转换程序、可缩放矢量图的展示程序、安全程序。其中飞腾创建版面、svg转换和svg展示都独立异步进行，但逻辑相互关联，飞腾组版员进行组版完毕操作或保存后，在共享目录中生成一个低精度pdf文件。此时可缩放矢量图转换程序一直监控版面的pdf文件生成，一旦发现，就将抽取pdf文件中的所有内容，文字、文字字体、文字样式、文字位置、图片、图片位置等相关信息，然后将这些信息写入svg文件中，生成一个包含有字体和图片的可缩放的矢量图。当用户访问这个版面时，后台调用此矢量图展示给用户[3.4。

3.1  飞腾升级程序

飞腾程序只有在组版完毕时才创建新的pdf版面文件，但用户最常用的操作是保存，为了在用户保存飞腾时，能实现svg实时转换，对飞腾程序进行了升级：在保存版面时，调用pdf生成程序，在共享目录中再生成一个新的pdf版面文件，以激活文件监控程序，实时转换svg。

3.2可缩放矢量图的高效转换程序

转换程序使用java开发，采用apache的FileAlterationObserver类对文件实施监控。为了最大化节约系统开销，对文件的后缀进行了过滤，只对于目录下pdf版面文件实施监控，监控周期按需要可以配置。一旦监控到pdf文件发生变化的事件，就启动一个转换线程，以实现并发转换的目标S。

转换过程较为复杂，主要经过独立复制、数据提取、svg生成的过程。

独立复制过程，指将飞腾生成的pdf文件复制到临时转换目录的过程。在临时转换目录中，判断以飞腾pdf文件名称命名的文件是否存在，若存在，则在文件名后加一个依次递增的数字；如果此文件不存在时，就将此pdf文件名命名。之所以使用增量拷贝，而不是删除后再拷贝，是为了防止内存泄漏。

数据提取过程，主要从临时目录中读取序号最高的pdf文件，并提取出文件中的文本、图片信息。文本信息包括文字内容、字体、字号、坐标等，图片信息主要指图片的二进制字节信息、图片大小、位置坐标等，字体信息包括二进制字体信息。

svg生成过程，是将提取的信息转换为svg标签，并输出到svg文件中的过程。文本转换成text标签，图片转换成img标签，直线转换为line标签。在转换过程中，只有将文字一个字一个字转换成text标签后，才能确保生成的svg缩放后仍保持精准的相对位置。

3.3可缩放矢量图的展示程序

通过向H5中的img标签的src属性按行推送svg数据流的方式，展示高清版面图的效果。也就是将svg版面读入内存，然后按行读取信息后，再依次将数据流推送到端。这样工作的效率不是最高的，因为缓存量一直在变化，且数量较小，但此方案能完整显示高清版面内容，不存在标签不能显示的问题。如果后台在推送流的时候，使用了固定的大缓存，推送的效率有所提高，但前端可能不会渲染出所有的图片，因为图片通过二进制字节数据进行显示，大缓存会将图片的流数据分开，而浏览器预渲染无法识别到完整图片，于是便不显示该图片。大文件元素未完整渲染和全渲染情况对比，见图1。

图1  大文件元素未完整渲染和全渲染情况对比

3.4  安全程序

除了传统安全机制外，安全程序还设计三种安全机制，分别是安全接入协议、url中敏感信息加密、用户版面权限控制。

3.4.1  安全接入协议

我们将移动审版系统集成到报道指挥app的webview中，报道指挥是访问方，而移 审版系统是验证方，报道指挥访问前，需要按照自定义协议规则构造一个由17个字符组成的动态的字符码，然后通过特定的编码方式进行编码后，形成24个字符的访问码。验证方先对访问码进行解码后，再与协议指定的生成规则进行比较，如果合法，则返回入口页，反之则返回空白页。

由于访问码是动态变化的，但在变化的临界点时，如果用户访问，审版系统就会拒绝访问，虽然这种访问概率很低，但在实际工作中时有发生。为了解决此问题，系统加入了容错机制。审版系统解码访问码后，在与协议指定的生成规则进行比较时，如果不等于新生成的字符码，就比较上一次生成的字符码。这种容错机制有效解决了合法用户被拒绝的问题。

3.4.2信息加密

由于历史原因，系统未使用session保存个人隐私数据，而使用get请求的url参数传递，其中有一些敏感信息，在浏览器中可以看到。为了确保系统的安全，使用3DES对其进行了加密，还加上了前缀和后缀，后台接收到数据，进行解密后再提取相关的信息。虽然程序过程多了，运行时间略长，但用户敏感信息得到了保护。

3.4.3版面文件访问控制方法

传统web项目中，将出版目录放在项目的静态路由中，一旦用户访问，就可以快速推送给用户，对于用户而言，等待时间只有下载时间和页面渲染时间，但这种访问方式存在安全风险，因为用户可以绕过登录直接访问版面文件。为了实现版面安全，系统采用控制器实现访问控制，在控制器中使用token验证，并读取非静态目录下的版面文件后，将流推送给用户，有效避免了非法用户访问。

4  系统部署和效果

4.1  系统部署

部署过程包括三部分：飞腾升级、高效转换程序部署、移动采编后台升级。飞腾属于客户端，升级工作较为简单，高效转换程序和移动采编后台均在服务器端，工作内容相对较多。

转换程序以jar包的形式部署在共享目录所在的服务器，共运行了两个进程。一个是人民日报高效转换程序，一个是人民日报海外版高效转换程序，两者监控周期均是5秒，都可以通过命令行界面和日志文件查看日志，但监控目录、临时目录、svg保存目录均相互独立。

移动采编的升级程序部署在DMZ区，服务器共部署了四台，并使用了负载均衡，同时还纳入智能监控运维系统的监控中，上线以来系统运行稳定、可靠，用户体验得到大幅提升。

图2  标清大样和高清大样部分内容对比

4.2  应用效果

系统运行部署以来，版面效果得到了质的提升(部署前后版面效果对比，见图2),大幅提高了看版、审版效率，多次协助编辑记者发现版面问题，用户数持续增多。版面高清大样可以实现无极缩放，但也有一定代价。在pdf转换svg过程中，将图片无失真放入svg中，造成svg文件占用空间变大，当用户移动设备加载图多的高清大样时，等待时间更长了。然而，与版面大样高清化相比，增加的有限时长，用户都可以接受。

5结束语

本次系统的升级改造，切实解决了报社业务流程中存在的实际问题，使报社对移动采编的使用率提升到了一个新的台阶，让“移动优先”战略落到了实处。通过改造后的移动端应用，编辑记者可以随时随地进行策、采、编、审、发过程，极大提升了报社对突发事件的快速响应能力、对新闻内容的多媒体播报能力以及远程记者与报社总部的及时互动能力。

系统改造完成后，在两会、建党100周年等多次重大报道活动中的经受检验，运行状况稳定良好，实现了报社领导和编辑记者的移动办公，大幅提升工作效率，受到编辑记者的广泛好评。同时打破了纸媒无法在H5页面中显示飞腾高清大样的技术壁垒，拓展了飞腾版面高清预览的渠道，提升了用户体验，在报业媒体领域具有广泛推广价值。

参考文献：

[1]马克西米利亚诺.福特曼.《移动web程序设计》[M],清华大学出版社，2018年9月。[2]艾美利亚拜拉梅-罗兹.《深入理解SVG》[M]],人民邮电出版社，2017年10月1日。

[3]田翠华，张一平，胡志钢，高静敏，李西雨.《PDF文档表格信息的识别与提取》[J],《厦门理工学院学报》2020年第3期。

[4]张秀秀，张立峰.《PDF文件文本内容提取研究》[J],《科技情报开发与经济》,2008年36期。[5] Bruce Eckel.《Java编程思想》[M],机械工业出版社，2018年1月。