一種降低移動電子雜志文件尺寸的方法
【專利摘要】一種降低移動電子雜志文件尺寸的方法，包括：步驟1：針對需制作的移動電子雜志中的彈出圖像，將彈出圖像制作為png格式的源圖像（ori.png）；步驟2：將彈出圖像重新制作為jpeg文件格式的輸出圖像（out.jpeg）；步驟3：復制所述源圖像（ori.png）為png格式的蒙板圖像（mask.png），并將該蒙板圖像（mask.png）制作為alpha通道不變，顏色為純色的png格式的圖像；步驟4：在移動設備上，通過蒙板屬性將所述蒙板圖像（mask.png）疊加到所述輸出圖像（out.jpeg）之上。通過本發(fā)明，彈出圖像的最終顯示效果，是背景透明的，從而有較好的視覺體驗，而且整個移動電子雜志的尺寸都很大縮減。
【專利說明】一種降低移動電子雜志文件尺寸的方法
【技術領域】
[0001]本發(fā)明涉及移動應用技術，更具體而言，涉及一種降低移動電子雜志文件尺寸的方法。
【背景技術】
[0002]現在智能手機已經廣泛應用，隨著其數據處理能力越來越強大，也逐漸改變了人們的生活習慣，例如很多人特別是年輕人的閱讀習慣從紙質書籍、報刊、雜志逐漸轉移為在手機上閱讀電子書籍，這也帶動了移動電子雜志的研究熱度。
[0003]移動電子雜志，是利用移動設備進行觀看的電子雜志，它的特點是支持各種交互式操作，從而獲得紙質雜志不具備的用戶體驗。移動電子雜志可以認為是一種特殊種類的移動應用。
[0004]在制作移動電子雜志時，經常會遇到“彈出”內容。所謂彈出內容，就是有一個熱點或者按鈕，單擊該熱點或者按鈕，彈出一個圖片或者一段文字。如圖1所示，左下角的加號按鈕是熱點，單擊這個熱點，彈出一個蝙蝠俠圖像，這就是一個典型的彈出內容。
[0005]為了達到逼真的效果，有時彈出內容需要是背景透明的，而不是方塊形狀的。例如圖2中所示的蝙蝠俠，可以看到，蝙蝠俠的圖片并不是一個方塊形的圖片，而是只有人物沒有背景的圖片。這樣，蝙蝠俠后邊的文本框就能顯露出來，從而有良好的視覺效果。如果不采用背景透明的圖像，則效果如圖3所示，可以看到，這種背景不透明的圖像，會大大降低電子雜志的視覺效果，沒有美感。因此，絕大部分電子雜志的彈出內容，都會采取這種背景透明的圖像。有的彈出圖像，其背景并不是完全透明的，而是處于半透明的狀態(tài)，但是原理是一樣的，因此下面都統稱為“背景透明的圖像”。
[0006]現有技術的困難在于，目前只有png格式的圖像才支持這種背景透明的效果。而png格式的圖像是無損壓縮的，這就導致png圖像的文件尺寸非常大。
[0007]jpeg格式的圖像是有損壓縮的，因此其文件尺寸小得多，但是jpeg圖像不支持背景透明的效果。例如，一個內容豐富的照片圖像，對于尺寸為1024*768 (iPad2所支持的尺寸)的png圖像來說,其尺寸可能達到1.5M，而jpeg圖像尺寸大約0.15M。而有的移動終端，例如iPad3，采用的視網膜屏對圖像尺寸要求更大。一個內容豐富的照片圖像，視網膜屏的png圖像尺寸很容易超過5M，而相應的jpeg圖像尺寸大約只有0.4M。
[0008]當前的移動終端(包括iPad)為了達到最佳的視覺效果，都選擇使用png格式來表達彈出圖像。但是，在移動電子雜志中，彈出圖像的數量是非常多的，因此會導致電子雜志的尺寸非常大。例如，一個針對iPad2設計的移動電子雜志,其尺寸經常達到200M，而針對iPad3設計的移動電子雜志,其尺寸往往達到500M。移動電子雜志的尺寸過大，帶來以下問題:
[0009].用戶下載一個電子雜志的時間很長；
[0010].占用過多的存儲空間，而移動設備的存儲器價格還是很聞的；
[0011].如果使用3G網絡，過大的尺寸會讓用戶消耗過多的費用。
【發(fā)明內容】

[0012]針對上述問題，本發(fā)明的目的在于提出一種降低移動電子雜志文件尺寸的方法，移動電子雜志既能達到背景透明圖像的效果，又不像png圖像那樣，具有太大的文件尺寸。
[0013]本發(fā)明的降低移動電子雜志文件尺寸的方法包括:步驟1:針對需制作的移動電子雜志中的彈出圖像，將彈出圖像制作為png格式的源圖像(or1.png);步驟2:將彈出圖像重新制作為jpeg文件格式的輸出圖像(out.jpeg);步驟3:復制所述源圖像(or1.png)為png格式的蒙板圖像(mask, png),并將該蒙板圖像(mask, png)制作為alpha通道不變,顏色為純色的png格式的圖像；步驟4:在移動設備上，通過蒙板屬性將所述蒙板圖像(mask,png)疊加到所述輸出圖像(out.jpeg)之上。[0014]本發(fā)明的方法實現了如下技術效果:
[0015].彈出圖像的最終顯示效果，是背景透明的。
[0016]?彈出圖像的文件尺寸,僅比jpeg圖像尺寸，大了約10%_15% ;比采用png圖像,則文件尺寸，小了 5-10倍。
[0017].整個移動電子雜志的尺寸，縮減到以前的1/3甚至更小。
【專利附圖】

【附圖說明】
[0018]圖1為現有技術的彈出圖像彈出之前的示例；
[0019]圖2為圖1的彈出圖像彈出之后的示例，其中彈出圖像的背景透明；
[0020]圖3為圖1的彈出圖像彈出之后的示例，其中彈出圖像的背景不透明；
[0021]圖4為本發(fā)明的方法的流程圖；
[0022]圖5為本發(fā)明的彈出圖像彈出之前的示例；
[0023]圖6顯示了圖5的彈出圖像彈出之后的示例，其中彈出圖像的背景透明；
[0024]圖7為圖5中的彈出圖像，其中其背景不透明；
[0025]圖8為圖6中所用的蒙板圖像的示例。
【具體實施方式】
[0026]目前的移動應用，并不一定非要采取原生態(tài)的代碼來開發(fā)(不同平臺的原生態(tài)代碼語言不一樣，例如Android平臺的原生態(tài)代碼語言是Java，而iOS平臺的原生態(tài)代碼語言是 Object Co
[0027]現在已經有一種“混合HTML5和原生態(tài)代碼的開發(fā)模式”，就是用原生態(tài)的代碼來實現部分功能，其余功能用HTML5技術來實現。這種技術的優(yōu)點在于，能夠很好地利用HTML5的獨特特性和擴展能力。采用這種技術開發(fā)的移動電子雜志，其彈出圖像的顯示是通過HTML5技術來實現，而不是通過原生態(tài)的代碼實現。
[0028]本發(fā)明針對的是“采用HTML5技術顯示彈出圖像的移動應用”。本發(fā)明并不限定移動應用的運行平臺，可以用于任何操作系統平臺上，Android, iOS, Windows Phone等等。
[0029]—般來講，制作移動電子雜志，需要一個制作軟件。制作軟件將移動電子雜志制作好了之后，上傳到移動設備上，由移動設備負責展示給最終用戶。
[0030]如圖4所示，本發(fā)明的方法的實施步驟包括:[0031]步驟1:針對需制作的移動電子雜志中的彈出圖像，將彈出圖像制作為png格式的源圖像，圖像名稱為or1.png。更有利地,獲取此時png圖像的文件尺寸。
[0032]制作為png圖像時，圖像帶不帶alpha通道均可。
[0033]更有利地，如果獲取了 png圖像的文件尺寸，則判斷該png文件尺寸是否超過一個門檻值。超過門檻值的彈出圖像進行進一步地處理，即將該彈出圖像制作為帶有alpha通道的png圖像，圖像名稱為or1.png。png圖像的alpha通道,用于保存背景透明的信息。而正是因為有了 alpha通道，png圖像才能讓背景透明。而達不到這個門檻值的彈出圖像，不需要處理，就直接使用該png圖像即可,將該彈出圖像制作為or1.png。
[0034]門檻值的設定標準和電子雜志中圖像的性質關系很大，并無一定之規(guī)，通?？梢栽O定為100-150K。而且本發(fā)明所描述的方法，針對png文件尺寸越大的圖像，效果越好。但對于png文件尺寸很小的圖像，有可能最后的文件尺寸反而變大了。因此，需要設定一個門濫值，只處理png文件尺寸超過門濫值的圖像。
[0035]步驟2:將彈出圖像重新制作為jpeg文件格式，圖像名稱為out.jpeg。其中，out.jpeg會比or1.png的文件尺寸小很多，因為jpeg是有損壓縮格式。但out.jpeg不帶有alpha通道，因而也無法表達透明背景。
[0036]步驟3:復制所述or1.png圖像,命名為mask, png,并將該mask, png制作為alpha通道不變，顏色為純色的png圖像。
[0037]mask, png 的 alpha 通道和 or1.png 的 alpha 通道(如果 or1.png 帶 alpha 通道)完全一樣，而mask, png的顏色是純色,也就是說，mask, png的R\G\B通道,其值都是一樣的。
[0038]更有利的，mask, png的顏色是黑色,也就是說，mask, png的R\G\B通道,其值都是
O,此時mask, png的文件尺寸最小。如果不設置為黑色，mask, png的文件尺寸會稍微增大一些。
[0039]在所述步驟3中，生成mask, png的算法很多,例如,該算法可以包括如下步驟:
[0040]步驟3-1:創(chuàng)建一個尺寸和or1.png的尺寸完全相同的內存圖像；
[0041]步驟3-2:遍歷or1.png的像素列和行,針對所述圖像的每一個像素點，獲取or1.png的顏色值，保留在一個變量中，例如變量名為oldColor ；
[0042]步驟3-3:創(chuàng)建一個新的顏色值,這個新顏色值的alpha通道的值和oldColor的alpha通道的值相同，然后R\G\B的值，都設定為某一確定值，優(yōu)選地設為O。
[0043]步驟3-4:把修改后的新顏色值寫回到所述像素點中；
[0044]從步驟3-2到步驟3-4的參考代碼例如可以是:
[0045]for (x = 0; X <οι I Png.Width; x++)
{
for (y = 0; y <oriPng.Height; y++)
{
Color oldColor = oriPng.GctPixcl (x, y);
Color ncwColor = Color.FromArgb (oldColor.A, 0, 0, 0);
or iPng.SctPi xel (x, y, ncwColor); // Now grcyscale
}
} [0046]步驟3-5:把修改后的內存圖像另存為mask, png,就得到步驟3中描述的圖像。
[0047]mask, png因為只有alpha通道，因此文件尺寸很小,通常比out.jpeg還小得多，當顏色是黑色的時，文件尺寸更小。
[0048]步驟4:在移動設備上，利用HTML5技術將所述mask, png圖像疊加到所述out.jpeg之上。
[0049]這樣就實現了透明背景圖像的效果。下面以一個實例來介紹本發(fā)明:
[0050]圖5是一個移動電子雜志的一頁，其顯示了一幅背景圖片，右上角的圖片是一個縮小的圖片，其實質上為熱點，點擊該圖片后可以彈出一個彈出圖像，該彈出圖像為放大的圖像。彈出圖像彈出之后的效果如圖6所示，這個彈出圖像帶有橢圓形邊框、邊框有陰影，并且周圍是半透明的效果。
[0051]針對該彈出圖像，降低該移動電子雜志的方法為:
[0052]1、將該彈出圖像制作為png格式，文件命名為or1.png文件尺寸是1014K，其尺寸超過了預先設定的門檻值150K，因此，將其制作為帶有alpha通道的png文件。
[0053]2、將該彈出圖像制作為jpeg格式out.jpeg，結果如圖7所示?？梢钥匆姡F在背景圖像完全看不見了，陰影和半透明效果變成灰色，視覺效果很差，但是out.jpeg的文件尺寸只有120K。
[0054]3、將該 or1.png 文件制作為 mask, png 文件,mask, png 的 alpha 通道和 or1.png 的alpha通道完全一樣,而mask, png的顏色是黑色,也就是說，mask, png的R\G\B通道,其值都為O。
[0055]該mask文件如圖8所示,其文件尺寸為8K。由此我們看到，out.jpeg+mask.png的文件尺寸，只有or1.png的文件尺寸的12.6%，減少了接近8倍。
[0056]制作完out.jpeg和mask, png兩個圖像,下一步就是在移動設備上使得這兩個圖像產生背景透明的效果。
[0057]4、通過HTML5技術中的蒙板樣式表屬性在移動設備上實現背景透明效果。在HTML5技術中，有一個CSS3的樣式表屬性，稱為蒙板屬性，例如-webkit-mask-box-1mage。這個屬性的意思是，可以用一個圖像作為蒙板，使得瀏覽器只顯示蒙板允許通過的內容，而裁剪掉蒙板不允許通過的內容。[0058]對于所生成的mask, png圖像，如果將其用作蒙板，剛好就是裁剪掉背景圖像，而保留其余內容。因此，使用mask, png圖像作為蒙板，就能裁剪背景圖像，從而達到背景透明的圖像效果。
[0059]參考代碼如下:
[0060]<div style=;/ -webkit-mask-box-1mage:url (mask, png);
[0061]background-1mage:url(out.jpeg);width=" 1024px";
[0062]height=" 720px" ><div>
[0063]這樣得到的顯示效果，就和圖6是完全一樣的。上面只是提供了一個參考代碼，實際上可以使用其他蒙板樣式表屬性來實現同樣的背景透明效果。通過將or1.png圖像改變?yōu)槭褂胦ut.jpeg和mask, png兩個圖像以及適當的HTML5技術,不但實現了圖像背景透明的效果，而且大大減少了總的文件尺寸。
【權利要求】
1.一種降低移動電子雜志文件尺寸的方法，其特征在于，包括: 步驟1:針對需制作的移動電子雜志中的彈出圖像，將彈出圖像制作為png格式的源圖像(or1.png)； 步驟2:將彈出圖像重新制作為jpeg文件格式的輸出圖像(out.jpeg)； 步驟3:復制所述源圖像(or1.png)為png格式的蒙板圖像(mask, png),并將該蒙板圖像(mask, png)制作為alpha通道不變,顏色為純色的png格式的圖像； 步驟4:在移動設備上，通過蒙板屬性將所述蒙板圖像(mask, png)疊加到所述輸出圖像(out.jpeg)之上。
2.根據權利要求1所述的降低移動電子雜志文件尺寸的方法，其特征在于，所述步驟I還包括: 步驟1-1:獲取此時源圖像(or1.png)的文件尺寸； 步驟1-2:如果源圖像(or1.png)的文件尺寸超過門檻值，將該源圖像對應的彈出圖像制作為帶有alpha通道的png格式的圖像,并作為新的源圖像(or1.png)。
3.根據權利要求1所述的降低移動電子雜志文件尺寸的方法，其特征在于，所述步驟3還包括: 步驟3-1:創(chuàng)建一個尺寸和源圖像(or1.png)的尺寸完全相同的內存圖像； 步驟3-2:遍歷源圖像(or1.png)的像素的列和行，對每一個像素點，獲取對應的源圖像(or1.png)的顏色值； 步驟3-3:創(chuàng)建一個新的顏色值,這個新顏色值的alpha通道的值和所述變量的alpha通道的值相同，然后將RGB的值都設定為某一確定值； 步驟3-4:把修改后的新顏色值寫回到源圖像(or1.png)的所述像素點中； 步驟3-5:保存修改后的內存圖像，作為蒙板圖像(mask, png)。
4.根據權利要求3所述的降低移動電子雜志文件尺寸的方法，其特征在于，在所述步驟3-3中，圖像的RGB的值設定為O。
5.根據權利要求1所述的降低移動電子雜志文件尺寸的方法，其特征在于，所述蒙板屬性為HTML5技術中的蒙板樣式表屬性。
6.根據權利要求5所述的降低移動電子雜志文件尺寸的方法，其特征在于，在移動設備上，利用HTML5技術中的蒙板樣式表屬性將所述蒙板圖像(mask, png)疊加到所述輸出圖像(out.jpeg)之上。
【文檔編號】G06T11/00GK103514616SQ201310392519
【公開日】2014年1月15日 申請日期:2013年9月2日 優(yōu)先權日:2013年9月2日
【發(fā)明者】張昀 申請人:北京新學堂網絡科技有限公司