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

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

張建中  于  波  吳瓊瑩

(人民日?qǐng)?bào)社技術(shù)部)

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

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

1  引言

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

2  研究思路

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

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

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

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

3.1  飛騰升級(jí)程序

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

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

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

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

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

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

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

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

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

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

3.4  安全程序

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

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

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

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

3.4.2信息加密

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

3.4.3版面文件訪問(wèn)控制方法

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

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

4.1  系統(tǒng)部署

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

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

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

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

4.2  應(yīng)用效果

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

5結(jié)束語(yǔ)

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

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

參考文獻(xiàn)：

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

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

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