移動web端高清審版技術(shù)研究與實(shí)現(xiàn)

移動web端高清審版技術(shù)研究與實(shí)現(xiàn)

張建中  于  波  吳瓊瑩

(人民日報(bào)社技術(shù)部)

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

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

1  引言

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

2  研究思路

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

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

3  架構(gòu)設(shè)計(jì)

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

3.1  飛騰升級程序

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

3.2可縮放矢量圖的高效轉(zhuǎn)換程序

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

轉(zhuǎn)換過程較為復(fù)雜，主要經(jīng)過獨(dú)立復(fù)制、數(shù)據(jù)提取、svg生成的過程。

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

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

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

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

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

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

3.4  安全程序

除了傳統(tǒng)安全機(jī)制外，安全程序還設(shè)計(jì)三種安全機(jī)制，分別是安全接入?yún)f(xié)議、url中敏感信息加密、用戶版面權(quán)限控制。

3.4.1  安全接入?yún)f(xié)議

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

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

3.4.2信息加密

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

3.4.3版面文件訪問控制方法

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

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

4.1  系統(tǒng)部署

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

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

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

圖2  標(biāo)清大樣和高清大樣部分內(nèi)容對比

4.2  應(yīng)用效果

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

5結(jié)束語

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

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

參考文獻(xiàn)：

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

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

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