CN103514616A - Method for reducing size of mobile electronic magazine file - Google Patents
Method for reducing size of mobile electronic magazine file Download PDFInfo
- Publication number
- CN103514616A CN103514616A CN201310392519.4A CN201310392519A CN103514616A CN 103514616 A CN103514616 A CN 103514616A CN 201310392519 A CN201310392519 A CN 201310392519A CN 103514616 A CN103514616 A CN 103514616A
- Authority
- CN
- China
- Prior art keywords
- image
- png
- mask
- ori
- document size
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Landscapes
- Editing Of Facsimile Originals (AREA)
- Compression Of Band Width Or Redundancy In Fax (AREA)
- Image Processing (AREA)
Abstract
The invention discloses a method for reducing the size of a mobile electronic magazine file. The method includes the steps that firstly, an image popped up in a mobile electronic magazine needing to be manufactured is manufactured to be a source image (ori.png) of the png format; secondly, the image popped up is manufactured to be an output image (out.jpeg) of the jpeg format; thirdly, the source image (ori.png) is copied to form a mask image (mask.png) of the png format, and the mask image (mask.png) is manufactured to be an image, wherein the alpha channel of the image is not changed, and the color of the image is pure; fourthly, the mask image (mask.png) is added to the output image (out.jpeg) through mask attributes on mobile equipment. Through the method, the final displaying background of the image popped up is transparent, good visual experiences are achieved, and the size of the whole mobile electronic magazine is greatly shortened.
Description
Technical field
The present invention relates to mobile application technology, more specifically, relate to a kind of method that reduces mobile electron magazine document size.
Background technology
Widespread use of smart mobile phone now, along with its data-handling capacity from strength to strength, also people's habits and customs have been changed gradually, for example a lot of people particularly youthful reading habit from paper book, newpapers and periodicals, magazine, shift gradually as reading electronic book nationality on mobile phone, this has also driven the research temperature of mobile electron magazine.
Mobile electron magazine, is the e-magazine that utilizes mobile device to watch, and its feature is to support various interactive operations, thereby obtains user's experience that papery magazine does not possess.Mobile electron magazine can be thought a kind of mobile application of Special Category.
When making mobile electron magazine, often can run into " ejection " content.The so-called content that ejects, is exactly a focus or button, clicks this focus or button, ejects a picture or passage.As shown in Figure 1, the plus button in the lower left corner is focus, clicks this focus, ejects batman's image, a typical content that ejects that Here it is.
In order to reach effect true to nature, sometimes ejecting content need to be background transparent, rather than square shape.Example is batman as shown in Figure 2, can see, batman's picture is not the picture of a box-shaped, but only has personage there is no the picture of background.Like this, the text box of batman back just can reveal, thereby has good visual effect.If do not adopt the image of background transparent, effect as shown in Figure 3, can be seen, the opaque image of this background can reduce the visual effect of e-magazine greatly, there is no aesthetic feeling.Therefore, the ejection content of most e-magazines, all can take the image of this background transparent.Some ejection images, its background is not completely transparent, but in translucent state, but principle is the same, is therefore all referred to as below " image of background transparent ".
The difficulty of prior art is, only has at present the image of png form just to support the effect of this background transparent.And the image of png form is Lossless Compression, this just causes the document size of png image very large.
The image of jpeg form is lossy compression method, so its document size is much smaller, but jpeg image is not supported the effect of background transparent.For example, an abundant in content photograph image, for the size that is of a size of 1024*768(iPad2 and supports) png image, its size may reach 1.5M, and the about 0.15M of jpeg picture size.And some mobile terminals, iPad3 for example, the retina screen of employing requires larger to picture size.An abundant in content photograph image, the png picture size of retina screen is easy to surpass 5M, and corresponding jpeg picture size approximately only has 0.4M.
Current mobile terminal (comprising iPad) is in order to reach best visual effect, and all choice for use png form is expressed ejection image.But in mobile electron magazine, the quantity that ejects image is very many, therefore can cause the size of e-magazine very large.For example, a mobile electron magazine for iPad2 design, its size often reaches 200M, and the mobile electron magazine designing for iPad3, its size often reaches 500M.Mobile electron magazine oversize, brings following problem:
User downloads the chronic of an e-magazine;
Take too much storage space, and the cost of memory of mobile device is still very high;
If use 3G network, excessive size can allow user consume too much expense.
Summary of the invention
For the problems referred to above, the object of the invention is to propose a kind of method that reduces mobile electron magazine document size, mobile electron magazine can reach the effect of background transparent image, again unlike png image, has too large document size.
The method of reduction mobile electron magazine document size of the present invention comprises: step 1: the ejection image in the mobile electron magazine of making for need is the source images (ori.png) of png form by ejecting image making; Step 2: the output image (out.jpeg) that ejection image is made as again to jpeg file layout; Step 3: copy described source images (ori.png) for the illiteracy plate image (mask.png) of png form, and it is constant that this illiteracy plate image (mask.png) is made as to alpha passage, the image of the png form that color is pure color; Step 4: on mobile device, by covering plate attribute, described illiteracy plate image (mask.png) is added on described output image (out.jpeg).
Method of the present invention has realized following technique effect:
The final display effect that ejects image is background transparent.
Eject the document size of image, only than jpeg picture size, large about 10%-15%; Than adopting png image, document size, little 5-10 times.
The size of whole mobile electron magazine, 1/3 even less before tapering to.
Accompanying drawing explanation
Fig. 1 is the example before the ejection image of prior art ejects;
Fig. 2 is the example after the ejection image of Fig. 1 ejects, and wherein ejects the background transparent of image;
Fig. 3 is the example after the ejection image of Fig. 1 ejects, and the background that wherein ejects image is opaque;
Fig. 4 is the process flow diagram of method of the present invention;
Fig. 5 is the example before ejection image of the present invention ejects;
Fig. 6 has shown that the ejection image of Fig. 5 ejects example afterwards, wherein ejects the background transparent of image;
Fig. 7 is the ejection image in Fig. 5, and wherein its background is opaque;
Fig. 8 is the example of illiteracy plate image used in Fig. 6.
Embodiment
Current mobile application, (the ecosystem code language of different platform is different, and for example the ecosystem code language of Android platform is Java, and the ecosystem code language of iOS platform is Object C might not to leave no choice but to take the code of ecosystem to develop.
Had now a kind of " development mode of mixing HTML5 and ecosystem code ", realized partial function exactly with the code of ecosystem, all the other functions realize by HTML5 technology.The advantage of this technology is, can utilize well unique property and the extended capability of HTML5.Adopt the mobile electron magazine of this technological development, its demonstration of ejecting image is to realize by HTML5 technology, rather than realizes by the code of ecosystem.
What the present invention is directed to is " adopting HTML5 technology to show the mobile application of ejection image ".The present invention does not limit the operation platform of mobile application, can be in any operating system platform, and Android, iOS, Windows Phone etc.
In general, make mobile electron magazine, need one to make software.Making software uploads on mobile device after mobile electron magazine has been made, and by mobile device, is responsible for showing final user.
As shown in Figure 4, the implementation step of method of the present invention comprises:
Step 1: the ejection image in the mobile electron magazine of making for need is the source images of png form by ejecting image making, and image name is ori.png.More advantageously, obtain the now document size of png image.
While being made as png image, picture strip is not with alpha passage all can.
More advantageously, if obtained the document size of png image, judge whether this png document size surpasses a threshold value.The ejection image that surpasses threshold value is further processed, and being about to this ejection image making is the png image with alpha passage, and image name is ori.png.The alpha passage of png image, for preserving the information of background transparent.Exactly because and had alpha passage, png image could allow background transparent.And do not reach the ejection image of this threshold value, and do not need to process, just direct this png image of use, is ori.png by this ejection image making.
In the established standards of threshold value and e-magazine, the character relation of image is very large, there is no a fixed pattern, conventionally can be set as 100-150K.And method described in the invention, for the larger image of png document size, effect is better.But for the very little image of png document size, likely last document size has become greatly on the contrary.Therefore, need to set a threshold value, only process the image that png document size surpasses threshold value.
Step 2: ejection image is made as to jpeg file layout again, and image name is out.jpeg.Wherein, out.jpeg can be little more a lot of than the document size of ori.png, because jpeg is lossy compression method form.But out.jpeg is without alpha passage, thereby the transparent background that is also beyond expression.
Step 3: copy described ori.png image, called after mask.png, and it is constant that this mask.png is made as to alpha passage, the png image that color is pure color.
The alpha passage of mask.png and the alpha passage of ori.png (if ori.png band alpha passage) are just the same, and the color of mask.png is pure color, that is to say, the R of mask.png G B passage, its value is all the same.
More favourable, the color of mask.png is black, that is to say, the R of mask.png G B passage, its value is all 0, now the document size of mask.png is minimum.If be not set to black, the document size of mask.png can increase a little.
In described step 3, the algorithm that generates mask.png is a lot, and for example, this algorithm can comprise the steps:
Step 3-1: the identical memory map picture of size that creates a size and ori.png;
Step 3-2: the pixel columns and rows of traversal ori.png, for each pixel of described image, obtain the color value of ori.png, be retained in a variable, for example variable oldColor by name;
Step 3-3: create a new color value, the value of the value of the alpha passage of this new color value and the alpha passage of oldColor is identical, then R G the value of B, be all set as a certain determined value, be preferably made as 0.
Step 3-4: amended new color value is write back in described pixel;
Identifying code from step 3-2 to step 3-4 can be for example:
Step 3-5: amended memory map is looked like to save as mask.png, just obtain the image of describing in step 3.
Mask.png is because only have alpha passage, so document size is very little, and conventionally also much smaller than out.jpeg, when color is black, document size is less.
Step 4: on mobile device, utilize HTML5 technology that described mask.png image is added on described out.jpeg.
So just realized the effect of transparent background image.With an example, introduce the present invention below:
Fig. 5 is one page of a mobile electron magazine, and it has shown a width background picture, and the picture in the upper right corner is a picture dwindling, and it is essentially focus, clicks can eject one after this picture and eject image, and this ejection image is enlarged image.Eject image and eject effect afterwards as shown in Figure 6, this ejects image has shade with oval edges frame, frame, and is around translucent effect.
For this, eject image, the method that reduces this mobile electron magazine is:
1, by this ejection image making, be png form, file designation is that ori.png document size is 1014K, and its size has surpassed predefined threshold value 150K, therefore, is made as the png file with alpha passage.
2, by this ejection image making, be jpeg form out.jpeg, result as shown in Figure 7.Can see, background image cannot see completely now, shade and translucent effect grizzle, and visual effect is very poor, but the document size of out.jpeg only has 120K.
3, by this ori.png documenting, be mask.png file, the alpha passage of mask.png is the same with the alpha Channel Perfect of ori.png, and the color of mask.png is black, that is to say, the R of mask.png G B passage, its value is all 0.
As shown in Figure 8, its document size is 8K to this mask file.We see thus, the document size of out.jpeg+mask.png, only have ori.png document size 12.6%, reduced and approached 8 times.
Made two images of out.jpeg and mask.png, next step is exactly on mobile device, to make these two images produce the effect of background transparent.
4, by the illiteracy plate style table property in HTML5 technology, on mobile device, realize background transparent effect.In HTML5 technology, there is the style table property of a CSS3, be called and cover plate attribute, for example-webkit-mask-box-image.The meaning of this attribute is, can make a browser display shadowiness plate allow the content of passing through with an image as covering plate, and crop, covers plate and do not allow the content of passing through.
For generated mask.png image, if used as covering plate, be exactly just to crop background image, and retain all the other contents.Therefore, use mask.png image as covering plate, just can cutting background image, thus reach the image effect of background transparent.
Identifying code is as follows:
<div?style=″-webkit-mask-box-image:url(mask.png);
background-image:url(out.jpeg);width=″1024px″;
height=″720px″><div>
The display effect obtaining like this, just and Fig. 6 be duplicate.Only be to provide an identifying code above, in fact can have covered plate style table property with other and realize same background transparent effect.By being to use out.jpeg and two images of mask.png and suitable HTML5 technology by ori.png image modification, not only realized the transparent effect of image background, and greatly reduced total document size.
Claims (6)
1. a method that reduces mobile electron magazine document size, is characterized in that, comprising:
Step 1: the ejection image in the mobile electron magazine of making for need is the source images (ori.png) of png form by ejecting image making;
Step 2: the output image (out.jpeg) that ejection image is made as again to jpeg file layout;
Step 3: copy described source images (ori.png) for the illiteracy plate image (mask.png) of png form, and it is constant that this illiteracy plate image (mask.png) is made as to alpha passage, the image of the png form that color is pure color;
Step 4: on mobile device, by covering plate attribute, described illiteracy plate image (mask.png) is added on described output image (out.jpeg).
2. the method for reduction mobile electron magazine document size according to claim 1, is characterized in that, described step 1 also comprises:
Step 1-1: obtain the now document size of source images (ori.png);
Step 1-2: if the document size of source images (ori.png) surpasses threshold value, by ejection image making corresponding to this source images, be the image with the png form of alpha passage, and as new source images (ori.png).
3. the method for reduction mobile electron magazine document size according to claim 1, is characterized in that, described step 3 also comprises:
Step 3-1: the identical memory map picture of size that creates a size and source images (ori.png);
Step 3-2: the columns and rows of the pixel of ergodic source image (ori.png), to each pixel, obtain the color value of corresponding source images (ori.png);
Step 3-3: create a new color value, the value of the value of the alpha passage of this new color value and the alpha passage of described variable is identical, then the value of RGB is all set as to a certain determined value;
Step 3-4: amended new color value is write back in the described pixel of source images (ori.png);
Step 3-5: preserve amended memory map picture, as covering plate image (mask.png).
4. the method for reduction mobile electron magazine document size according to claim 3, is characterized in that, in described step 3-3, the value of the RGB of image is set as 0.
5. the method for reduction mobile electron magazine document size according to claim 1, is characterized in that, described illiteracy plate attribute is the illiteracy plate style table property in HTML5 technology.
6. the method for reduction mobile electron magazine document size according to claim 5, it is characterized in that, on mobile device, utilize illiteracy plate style table property in HTML5 technology that described illiteracy plate image (mask.png) is added on described output image (out.jpeg).
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310392519.4A CN103514616B (en) | 2013-09-02 | 2013-09-02 | Method for reducing size of mobile electronic magazine file |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310392519.4A CN103514616B (en) | 2013-09-02 | 2013-09-02 | Method for reducing size of mobile electronic magazine file |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103514616A true CN103514616A (en) | 2014-01-15 |
| CN103514616B CN103514616B (en) | 2017-01-11 |
Family
ID=49897293
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201310392519.4A Active CN103514616B (en) | 2013-09-02 | 2013-09-02 | Method for reducing size of mobile electronic magazine file |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103514616B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104915915A (en) * | 2014-03-10 | 2015-09-16 | 博雅网络游戏开发（深圳）有限公司 | Picture displaying method and apparatus |
| CN107330947A (en) * | 2017-06-29 | 2017-11-07 | 厦门游亨世纪科技有限公司 | A kind of Memory Optimize Method of video cartoon picture storage |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110193871A1 (en) * | 2010-02-07 | 2011-08-11 | Microsoft Corporation | Rendering multi-layered image |
| CN102244784A (en) * | 2011-06-09 | 2011-11-16 | 杭州典能科技有限公司 | Method for compressing and displaying picture including transparent information |
| CN102821279A (en) * | 2012-07-31 | 2012-12-12 | 北京天神互动科技有限公司 | Picture compression method keeping with alpha channel |
-
2013
- 2013-09-02 CN CN201310392519.4A patent/CN103514616B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110193871A1 (en) * | 2010-02-07 | 2011-08-11 | Microsoft Corporation | Rendering multi-layered image |
| CN102244784A (en) * | 2011-06-09 | 2011-11-16 | 杭州典能科技有限公司 | Method for compressing and displaying picture including transparent information |
| CN102821279A (en) * | 2012-07-31 | 2012-12-12 | 北京天神互动科技有限公司 | Picture compression method keeping with alpha channel |
Non-Patent Citations (1)
| Title |
|---|
| 刘薇 等: "HTML5&CSS3在网页设计中的优势", 《金田（励志）》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104915915A (en) * | 2014-03-10 | 2015-09-16 | 博雅网络游戏开发（深圳）有限公司 | Picture displaying method and apparatus |
| CN107330947A (en) * | 2017-06-29 | 2017-11-07 | 厦门游亨世纪科技有限公司 | A kind of Memory Optimize Method of video cartoon picture storage |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103514616B (en) | 2017-01-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| JP6462919B2 (en) | Image automatic editing apparatus and method based on image analysis, and computer-readable recording medium | |
| CN104540000B (en) | The generation method and terminal of a kind of dynamic thumbnail | |
| US20160357717A1 (en) | Generating Layout for Content Presentation Structures | |
| WO2015196822A1 (en) | Method and device for adapting webpage to screen layout | |
| CN112085818B (en) | Picture processing method and device | |
| CN109683978B (en) | Stream type layout interface rendering method and device and electronic equipment | |
| CN106056530A (en) | Method and device for displaying picture content in application | |
| CN103390059A (en) | Picture induction processing method and system | |
| CN104732568A (en) | Method and device for online addition of lyric subtitles to pictures | |
| US20160118025A1 (en) | Method and apparatus for screen capture on a display device | |
| CN105956133B (en) | Method and device for displaying file on intelligent terminal | |
| CN112487763A (en) | SVG-based OFD file online display method, server side and system | |
| JP2018508061A (en) | Adaptive electronic documents | |
| CN104424174B (en) | Document processing system and document processing method | |
| CN103514616A (en) | Method for reducing size of mobile electronic magazine file | |
| CN107071574A (en) | Intelligent television method for page jump | |
| CN112102422B (en) | Image processing method and device | |
| CN103514272A (en) | Method and device for providing thumbnail corresponding to webpage content | |
| KR20140031438A (en) | Apparatus and method of reconstructing mobile contents | |
| CN111045576B (en) | Display control method, display control device, terminal equipment and electronic equipment | |
| CN106445320A (en) | Method and device for manufacturing and displaying contents of electronic book | |
| CN104536949A (en) | Webpage reset method, webpage reset device and mobile terminal | |
| CN103839217A (en) | Watermark image realization method | |
| CN104572606B (en) | E-book treating method and apparatus | |
| CN103164109A (en) | Method and system for dynamically displaying file in mobile terminal |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |