移動web端高清審版技術研究與實現

移動web端高清審版技術研究與實現

張建中  于  波  吳瓊瑩

(人民日報社技術部)

【摘  要】在傳統(tǒng)移動審版系統(tǒng)中，版面文件是標清圖片，編小后看不到字，放大后看不清字，嚴重影響審版的效果和效率。本文研究了版面展示技術，基于移動端svg無失真縮放特性，提出了一個高清審版技術方案，先將版面文件實時保存在pdf文件中，再高效轉換成svg文件，當用戶訪問時，通過按行推送數據流的方式安全展現高清大樣，打破了紙媒無法在H5頁面中顯示飛騰高清大樣的技術壁壘，可以在紙媒行業(yè)廣泛推廣。

【關健詞】審版系統(tǒng)  高清大樣  可縮放矢量圖  渲染

1  引言

隨著移動互聯網的快速發(fā)展，越來越多的報社通過高速移動互聯網和移動設備進行了新聞生產方面的有益嘗試，為報社帶來隨時、隨地快速傳稿、審稿等便利。但早期的移動采編系統(tǒng)受限于當時的技術手段和業(yè)務模式，在為報社帶來便利的同時依然存在諸多問題。飛騰版面在移動端展示jpg圖片，圖片是標量圖，縮小版面后看不清圖文內容，放大版面后圖文卻失真嚴重，無法實現版面的高清顯示，嚴重阻礙了看版和審版的效率。人民日報社研發(fā)了一個移動web端高清審版系統(tǒng)，使得編輯記者可以隨時隨地，安全有效地進行策、采、編、審、發(fā)等操作，極大提升了人民日報新聞生產的快速響應能力，其中高清審版技術打破了媒體行業(yè)無法在移動端H5頁面中顯示飛騰高清大樣的技術壁壘，對報業(yè)用戶具有極大推廣價值叫。

2  研究思路

紙媒排版系統(tǒng)能創(chuàng)建pdf格式文檔、jpg格式圖片、vft或vfx組版文件等，僅pdf格式文檔能在電腦web端實現高清不失真顯示。但移動端較難實現。如果開發(fā)app,由于app具有系統(tǒng)api調用能力，可以實現高清版面文件的展示，但成本太高，時間也太長；而通過H5展示pdf格式版面，可以實現版面的瀏覽，但是一旦放大版面，清晰度就會明顯下降。

在移動端實現高清版面展示，只能更換思路，目前svg可縮放向量圖可以實現版面內容的高清展示，但業(yè)內從來沒用過，且飛騰組版軟件也不支持創(chuàng)建svg文件四。我們的解決方案是開發(fā)一套版面文件監(jiān)控和格式轉換程序，監(jiān)視版面文件變化，同步將pdf版面轉換成svg版面。但排版軟件只在組版完畢時生成pdf版面，所以移動web端無法看到實時的版面內容，我們還需要對飛騰進行升級，實現排版保存和創(chuàng)建pdf版面文件同步，同時還要修改項目控制器和相應頁面，以適配svg安全讀取和顯示。

3  架構設計

高清大樣系統(tǒng)包括飛騰升級程序、可縮放矢量圖的高效轉換程序、可縮放矢量圖的展示程序、安全程序。其中飛騰創(chuàng)建版面、svg轉換和svg展示都獨立異步進行，但邏輯相互關聯，飛騰組版員進行組版完畢操作或保存后，在共享目錄中生成一個低精度pdf文件。此時可縮放矢量圖轉換程序一直監(jiān)控版面的pdf文件生成，一旦發(fā)現，就將抽取pdf文件中的所有內容，文字、文字字體、文字樣式、文字位置、圖片、圖片位置等相關信息，然后將這些信息寫入svg文件中，生成一個包含有字體和圖片的可縮放的矢量圖。當用戶訪問這個版面時，后臺調用此矢量圖展示給用戶[3.4。

3.1  飛騰升級程序

飛騰程序只有在組版完畢時才創(chuàng)建新的pdf版面文件，但用戶最常用的操作是保存，為了在用戶保存飛騰時，能實現svg實時轉換，對飛騰程序進行了升級：在保存版面時，調用pdf生成程序，在共享目錄中再生成一個新的pdf版面文件，以激活文件監(jiān)控程序，實時轉換svg。

3.2可縮放矢量圖的高效轉換程序

轉換程序使用java開發(fā)，采用apache的FileAlterationObserver類對文件實施監(jiān)控。為了最大化節(jié)約系統(tǒng)開銷，對文件的后綴進行了過濾，只對于目錄下pdf版面文件實施監(jiān)控，監(jiān)控周期按需要可以配置。一旦監(jiān)控到pdf文件發(fā)生變化的事件，就啟動一個轉換線程，以實現并發(fā)轉換的目標S。

轉換過程較為復雜，主要經過獨立復制、數據提取、svg生成的過程。

獨立復制過程，指將飛騰生成的pdf文件復制到臨時轉換目錄的過程。在臨時轉換目錄中，判斷以飛騰pdf文件名稱命名的文件是否存在，若存在，則在文件名后加一個依次遞增的數字；如果此文件不存在時，就將此pdf文件名命名。之所以使用增量拷貝，而不是刪除后再拷貝，是為了防止內存泄漏。

數據提取過程，主要從臨時目錄中讀取序號最高的pdf文件，并提取出文件中的文本、圖片信息。文本信息包括文字內容、字體、字號、坐標等，圖片信息主要指圖片的二進制字節(jié)信息、圖片大小、位置坐標等，字體信息包括二進制字體信息。

svg生成過程，是將提取的信息轉換為svg標簽，并輸出到svg文件中的過程。文本轉換成text標簽，圖片轉換成img標簽，直線轉換為line標簽。在轉換過程中，只有將文字一個字一個字轉換成text標簽后，才能確保生成的svg縮放后仍保持精準的相對位置。

3.3可縮放矢量圖的展示程序

通過向H5中的img標簽的src屬性按行推送svg數據流的方式，展示高清版面圖的效果。也就是將svg版面讀入內存，然后按行讀取信息后，再依次將數據流推送到端。這樣工作的效率不是最高的，因為緩存量一直在變化，且數量較小，但此方案能完整顯示高清版面內容，不存在標簽不能顯示的問題。如果后臺在推送流的時候，使用了固定的大緩存，推送的效率有所提高，但前端可能不會渲染出所有的圖片，因為圖片通過二進制字節(jié)數據進行顯示，大緩存會將圖片的流數據分開，而瀏覽器預渲染無法識別到完整圖片，于是便不顯示該圖片。大文件元素未完整渲染和全渲染情況對比，見圖1。

圖1  大文件元素未完整渲染和全渲染情況對比

3.4  安全程序

除了傳統(tǒng)安全機制外，安全程序還設計三種安全機制，分別是安全接入協(xié)議、url中敏感信息加密、用戶版面權限控制。

3.4.1  安全接入協(xié)議

我們將移動審版系統(tǒng)集成到報道指揮app的webview中，報道指揮是訪問方，而移 審版系統(tǒng)是驗證方，報道指揮訪問前，需要按照自定義協(xié)議規(guī)則構造一個由17個字符組成的動態(tài)的字符碼，然后通過特定的編碼方式進行編碼后，形成24個字符的訪問碼。驗證方先對訪問碼進行解碼后，再與協(xié)議指定的生成規(guī)則進行比較，如果合法，則返回入口頁，反之則返回空白頁。

由于訪問碼是動態(tài)變化的，但在變化的臨界點時，如果用戶訪問，審版系統(tǒng)就會拒絕訪問，雖然這種訪問概率很低，但在實際工作中時有發(fā)生。為了解決此問題，系統(tǒng)加入了容錯機制。審版系統(tǒng)解碼訪問碼后，在與協(xié)議指定的生成規(guī)則進行比較時，如果不等于新生成的字符碼，就比較上一次生成的字符碼。這種容錯機制有效解決了合法用戶被拒絕的問題。

3.4.2信息加密

由于歷史原因，系統(tǒng)未使用session保存?zhèn)€人隱私數據，而使用get請求的url參數傳遞，其中有一些敏感信息，在瀏覽器中可以看到。為了確保系統(tǒng)的安全，使用3DES對其進行了加密，還加上了前綴和后綴，后臺接收到數據，進行解密后再提取相關的信息。雖然程序過程多了，運行時間略長，但用戶敏感信息得到了保護。

3.4.3版面文件訪問控制方法

傳統(tǒng)web項目中，將出版目錄放在項目的靜態(tài)路由中，一旦用戶訪問，就可以快速推送給用戶，對于用戶而言，等待時間只有下載時間和頁面渲染時間，但這種訪問方式存在安全風險，因為用戶可以繞過登錄直接訪問版面文件。為了實現版面安全，系統(tǒng)采用控制器實現訪問控制，在控制器中使用token驗證，并讀取非靜態(tài)目錄下的版面文件后，將流推送給用戶，有效避免了非法用戶訪問。

4  系統(tǒng)部署和效果

4.1  系統(tǒng)部署

部署過程包括三部分：飛騰升級、高效轉換程序部署、移動采編后臺升級。飛騰屬于客戶端，升級工作較為簡單，高效轉換程序和移動采編后臺均在服務器端，工作內容相對較多。

轉換程序以jar包的形式部署在共享目錄所在的服務器，共運行了兩個進程。一個是人民日報高效轉換程序，一個是人民日報海外版高效轉換程序，兩者監(jiān)控周期均是5秒，都可以通過命令行界面和日志文件查看日志，但監(jiān)控目錄、臨時目錄、svg保存目錄均相互獨立。

移動采編的升級程序部署在DMZ區(qū)，服務器共部署了四臺，并使用了負載均衡，同時還納入智能監(jiān)控運維系統(tǒng)的監(jiān)控中，上線以來系統(tǒng)運行穩(wěn)定、可靠，用戶體驗得到大幅提升。

圖2  標清大樣和高清大樣部分內容對比

4.2  應用效果

系統(tǒng)運行部署以來，版面效果得到了質的提升(部署前后版面效果對比，見圖2),大幅提高了看版、審版效率，多次協(xié)助編輯記者發(fā)現版面問題，用戶數持續(xù)增多。版面高清大樣可以實現無極縮放，但也有一定代價。在pdf轉換svg過程中，將圖片無失真放入svg中，造成svg文件占用空間變大，當用戶移動設備加載圖多的高清大樣時，等待時間更長了。然而，與版面大樣高清化相比，增加的有限時長，用戶都可以接受。

5結束語

本次系統(tǒng)的升級改造，切實解決了報社業(yè)務流程中存在的實際問題，使報社對移動采編的使用率提升到了一個新的臺階，讓“移動優(yōu)先”戰(zhàn)略落到了實處。通過改造后的移動端應用，編輯記者可以隨時隨地進行策、采、編、審、發(fā)過程，極大提升了報社對突發(fā)事件的快速響應能力、對新聞內容的多媒體播報能力以及遠程記者與報社總部的及時互動能力。

系統(tǒng)改造完成后，在兩會、建黨100周年等多次重大報道活動中的經受檢驗，運行狀況穩(wěn)定良好，實現了報社領導和編輯記者的移動辦公，大幅提升工作效率，受到編輯記者的廣泛好評。同時打破了紙媒無法在H5頁面中顯示飛騰高清大樣的技術壁壘，拓展了飛騰版面高清預覽的渠道，提升了用戶體驗，在報業(yè)媒體領域具有廣泛推廣價值。

參考文獻：

[1]馬克西米利亞諾.福特曼.《移動web程序設計》[M],清華大學出版社，2018年9月。[2]艾美利亞拜拉梅-羅茲.《深入理解SVG》[M]],人民郵電出版社，2017年10月1日。

[3]田翠華，張一平，胡志鋼，高靜敏，李西雨.《PDF文檔表格信息的識別與提取》[J],《廈門理工學院學報》2020年第3期。

[4]張秀秀，張立峰.《PDF文件文本內容提取研究》[J],《科技情報開發(fā)與經濟》,2008年36期。[5] Bruce Eckel.《Java編程思想》[M],機械工業(yè)出版社，2018年1月。