一种降低移动电子杂志文件尺寸的方法
【专利摘要】一种降低移动电子杂志文件尺寸的方法，包括：步骤1：针对需制作的移动电子杂志中的弹出图像，将弹出图像制作为png格式的源图像（ori.png）；步骤2：将弹出图像重新制作为jpeg文件格式的输出图像（out.jpeg）；步骤3：复制所述源图像（ori.png）为png格式的蒙板图像（mask.png），并将该蒙板图像（mask.png）制作为alpha通道不变，颜色为纯色的png格式的图像；步骤4：在移动设备上，通过蒙板属性将所述蒙板图像（mask.png）叠加到所述输出图像（out.jpeg）之上。通过本发明，弹出图像的最终显示效果，是背景透明的，从而有较好的视觉体验，而且整个移动电子杂志的尺寸都很大缩减。
【专利说明】一种降低移动电子杂志文件尺寸的方法
【技术领域】
[0001]本发明涉及移动应用技术，更具体而言，涉及一种降低移动电子杂志文件尺寸的方法。
【背景技术】
[0002]现在智能手机已经广泛应用，随着其数据处理能力越来越强大，也逐渐改变了人们的生活习惯，例如很多人特别是年轻人的阅读习惯从纸质书籍、报刊、杂志逐渐转移为在手机上阅读电子书籍，这也带动了移动电子杂志的研究热度。
[0003]移动电子杂志，是利用移动设备进行观看的电子杂志，它的特点是支持各种交互式操作，从而获得纸质杂志不具备的用户体验。移动电子杂志可以认为是一种特殊种类的移动应用。
[0004]在制作移动电子杂志时，经常会遇到“弹出”内容。所谓弹出内容，就是有一个热点或者按钮，单击该热点或者按钮，弹出一个图片或者一段文字。如图1所示，左下角的加号按钮是热点，单击这个热点，弹出一个蝙蝠侠图像，这就是一个典型的弹出内容。
[0005]为了达到逼真的效果，有时弹出内容需要是背景透明的，而不是方块形状的。例如图2中所示的蝙蝠侠，可以看到，蝙蝠侠的图片并不是一个方块形的图片，而是只有人物没有背景的图片。这样，蝙蝠侠后边的文本框就能显露出来，从而有良好的视觉效果。如果不采用背景透明的图像，则效果如图3所示，可以看到，这种背景不透明的图像，会大大降低电子杂志的视觉效果，没有美感。因此，绝大部分电子杂志的弹出内容，都会采取这种背景透明的图像。有的弹出图像，其背景并不是完全透明的，而是处于半透明的状态，但是原理是一样的，因此下面都统称为“背景透明的图像”。
[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网络，过大的尺寸会让用户消耗过多的费用。
【发明内容】
[0012]针对上述问题，本发明的目的在于提出一种降低移动电子杂志文件尺寸的方法，移动电子杂志既能达到背景透明图像的效果，又不像png图像那样，具有太大的文件尺寸。
[0013]本发明的降低移动电子杂志文件尺寸的方法包括:步骤1:针对需制作的移动电子杂志中的弹出图像，将弹出图像制作为png格式的源图像(or1.png);步骤2:将弹出图像重新制作为jpeg文件格式的输出图像(out.jpeg);步骤3:复制所述源图像(or1.png)为png格式的蒙板图像(mask, png),并将该蒙板图像(mask, png)制作为alpha通道不变,颜色为纯色的png格式的图像；步骤4:在移动设备上，通过蒙板属性将所述蒙板图像(mask,png)叠加到所述输出图像(out.jpeg)之上。[0014]本发明的方法实现了如下技术效果:
[0015].弹出图像的最终显示效果，是背景透明的。
[0016]?弹出图像的文件尺寸,仅比jpeg图像尺寸，大了约10%_15% ;比采用png图像,则文件尺寸，小了 5-10倍。
[0017].整个移动电子杂志的尺寸，缩减到以前的1/3甚至更小。
【专利附图】
【附图说明】
[0018]图1为现有技术的弹出图像弹出之前的示例；
[0019]图2为图1的弹出图像弹出之后的示例，其中弹出图像的背景透明；
[0020]图3为图1的弹出图像弹出之后的示例，其中弹出图像的背景不透明；
[0021]图4为本发明的方法的流程图；
[0022]图5为本发明的弹出图像弹出之前的示例；
[0023]图6显示了图5的弹出图像弹出之后的示例，其中弹出图像的背景透明；
[0024]图7为图5中的弹出图像，其中其背景不透明；
[0025]图8为图6中所用的蒙板图像的示例。
【具体实施方式】
[0026]目前的移动应用，并不一定非要采取原生态的代码来开发(不同平台的原生态代码语言不一样，例如Android平台的原生态代码语言是Java，而iOS平台的原生态代码语言是 Object Co
[0027]现在已经有一种“混合HTML5和原生态代码的开发模式”，就是用原生态的代码来实现部分功能，其余功能用HTML5技术来实现。这种技术的优点在于，能够很好地利用HTML5的独特特性和扩展能力。采用这种技术开发的移动电子杂志，其弹出图像的显示是通过HTML5技术来实现，而不是通过原生态的代码实现。
[0028]本发明针对的是“采用HTML5技术显示弹出图像的移动应用”。本发明并不限定移动应用的运行平台，可以用于任何操作系统平台上，Android, iOS, Windows Phone等等。
[0029]—般来讲，制作移动电子杂志，需要一个制作软件。制作软件将移动电子杂志制作好了之后，上传到移动设备上，由移动设备负责展示给最终用户。
[0030]如图4所示，本发明的方法的实施步骤包括:[0031]步骤1:针对需制作的移动电子杂志中的弹出图像，将弹出图像制作为png格式的源图像，图像名称为or1.png。更有利地,获取此时png图像的文件尺寸。
[0032]制作为png图像时，图像带不带alpha通道均可。
[0033]更有利地，如果获取了 png图像的文件尺寸，则判断该png文件尺寸是否超过一个门槛值。超过门槛值的弹出图像进行进一步地处理，即将该弹出图像制作为带有alpha通道的png图像，图像名称为or1.png。png图像的alpha通道,用于保存背景透明的信息。而正是因为有了 alpha通道，png图像才能让背景透明。而达不到这个门槛值的弹出图像，不需要处理，就直接使用该png图像即可,将该弹出图像制作为or1.png。
[0034]门槛值的设定标准和电子杂志中图像的性质关系很大，并无一定之规，通常可以设定为100-150K。而且本发明所描述的方法，针对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:创建一个尺寸和or1.png的尺寸完全相同的内存图像；
[0041]步骤3-2:遍历or1.png的像素列和行,针对所述图像的每一个像素点，获取or1.png的颜色值，保留在一个变量中，例如变量名为oldColor ；
[0042]步骤3-3:创建一个新的颜色值,这个新颜色值的alpha通道的值和oldColor的alpha通道的值相同，然后R\G\B的值，都设定为某一确定值，优选地设为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]这样就实现了透明背景图像的效果。下面以一个实例来介绍本发明:
[0050]图5是一个移动电子杂志的一页，其显示了一幅背景图片，右上角的图片是一个缩小的图片，其实质上为热点，点击该图片后可以弹出一个弹出图像，该弹出图像为放大的图像。弹出图像弹出之后的效果如图6所示，这个弹出图像带有椭圆形边框、边框有阴影，并且周围是半透明的效果。
[0051]针对该弹出图像，降低该移动电子杂志的方法为:
[0052]1、将该弹出图像制作为png格式，文件命名为or1.png文件尺寸是1014K，其尺寸超过了预先设定的门槛值150K，因此，将其制作为带有alpha通道的png文件。
[0053]2、将该弹出图像制作为jpeg格式out.jpeg，结果如图7所示。可以看见，现在背景图像完全看不见了，阴影和半透明效果变成灰色，视觉效果很差，但是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图像改变为使用out.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:创建一个尺寸和源图像(or1.png)的尺寸完全相同的内存图像； 步骤3-2:遍历源图像(or1.png)的像素的列和行，对每一个像素点，获取对应的源图像(or1.png)的颜色值； 步骤3-3:创建一个新的颜色值,这个新颜色值的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日 优先权日:2013年9月2日
【发明者】张昀 申请人:北京新学堂网络科技有限公司