CN103514616B - Method for reducing size of mobile electronic magazine file - Google Patents
Method for reducing size of mobile electronic magazine file Download PDFInfo
- Publication number
- CN103514616B CN103514616B CN201310392519.4A CN201310392519A CN103514616B CN 103514616 B CN103514616 B CN 103514616B CN 201310392519 A CN201310392519 A CN 201310392519A CN 103514616 B CN103514616 B CN 103514616B
- Authority
- CN
- China
- Prior art keywords
- image
- png
- mask
- pop
- mobile electronic
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 18
- 238000004519 manufacturing process Methods 0.000 claims description 3
- 230000000007 visual effect Effects 0.000 abstract description 5
- 230000000694 effects Effects 0.000 description 17
- 230000006870 function Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 1
- 210000001525 retina Anatomy 0.000 description 1
- 230000002207 retinal effect Effects 0.000 description 1
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 invention relates to a mobile application technology, in particular to a method for reducing the size of a mobile electronic magazine file.
Background
Nowadays, smart phones are widely used, and with the increasing data processing capability of smart phones, living habits of people are gradually changed, for example, the reading habits of many people, especially young people, are gradually changed from paper books, newspapers and magazines to reading electronic books on mobile phones, which also drives the research popularity of mobile electronic magazines.
A mobile electronic magazine is an electronic magazine which is watched by utilizing mobile equipment, and is characterized by supporting various interactive operations so as to obtain user experience which paper magazines do not have. Mobile electronic magazines may be considered a special kind of mobile application.
In the production of mobile electronic magazines, "pop-up" content is often encountered. What is called pop-up content is that there is a hot spot or button, and clicking the hot spot or button pops up a picture or a text. As shown in FIG. 1, the plus button at the lower left corner is a hot spot, and clicking on the hot spot pops up a batman image, which is a typical pop-up content.
Sometimes pop-up content needs to be background transparent, rather than square-shaped, in order to achieve realistic effects. For example the batman shown in fig. 2, it can be seen that the picture of batman is not a square picture, but a picture with only the character without background. Therefore, the text box behind the batman can be exposed, and a good visual effect is achieved. If the image with transparent background is not used, the effect is as shown in fig. 3, and the image with opaque background can greatly reduce the visual effect of the electronic magazine and has no aesthetic feeling. Therefore, most pop-up contents of electronic magazines take such background transparent images. Some pop-up images have a background that is not completely transparent but is in a translucent state, but the principle is the same, and therefore, the background is collectively referred to as "background-transparent image" hereinafter.
The difficulty with the prior art is that only png format images currently support this background transparency effect. While the png format image is losslessly compressed, which results in a png image with a very large file size.
The image in jpeg format is lossy compressed, so its file size is much smaller, but the jpeg image does not support the effect of background transparency. For example, a rich-content photo image may be up to 1.5M in size for a png image of size 1024 x 768 (the size supported by iPad 2), while a jpeg image is about 0.15M in size. And some mobile terminals, such as iPad3, adopt a retina screen with larger requirements on image size. A rich-content photographic image, the png image size of the retinal screen easily exceeds 5M, while the corresponding jpeg image size is only about 0.4M.
Current mobile terminals (including iPad) choose to use the png format to express pop-up images for optimal visual effect. However, in a mobile electronic magazine, the number of pop-up images is very large, and thus the size of the electronic magazine is very large. For example, a mobile electronic magazine designed for iPad2 is often up to 200M in size, while a mobile electronic magazine designed for iPad3 is often up to 500M in size. The mobile electronic magazine is oversized, which causes the following problems:
the time for a user to download an electronic magazine is long;
take up too much memory space, while the memory price of the mobile device is still high;
an excessive size would cost the user too much if a 3G network is used.
Disclosure of Invention
In view of the above problems, an object of the present invention is to provide a method for reducing the file size of a mobile electronic magazine, which can achieve the effect of a background transparent image and has a file size that is not too large as that of a png image.
The method for reducing the size of the mobile electronic magazine file comprises the following steps: step 1: aiming at a pop-up image in a mobile electronic magazine to be manufactured, manufacturing the pop-up image into a source image (ori.png) in png format; step 2: reproducing the pop-up image as an output image (out) in a jpeg file format; and step 3: copying the source image (ori.png) into a png format mask image (mask.png), and making the mask image (mask.png) into a png format image with an unchanged alpha channel and a pure color; and 4, step 4: on the mobile device, superimposing the mask image (mask.png) over the output image (out.jpeg) by a mask attribute.
The method of the invention realizes the following technical effects:
the final display effect of the pop-up image, which is background transparent.
The file size of the pop-up image, which is only about 10% -15% larger than the jpeg image size; the file size is 5-10 times smaller than with png image.
The size of the entire mobile electronic magazine, reduced to 1/3 before or even smaller.
Drawings
FIG. 1 is an example prior to pop-up of a prior art pop-up image;
FIG. 2 is an example of the pop-up image of FIG. 1 after it pops up, with the background of the pop-up image transparent;
FIG. 3 is an example of the pop-up image of FIG. 1 after it pops up, where the background of the pop-up image is opaque;
FIG. 4 is a flow chart of a method of the present invention;
FIG. 5 is an example of the present invention before pop-up image ejection;
FIG. 6 shows an example of FIG. 5 after pop-up of the pop-up image, with the background of the pop-up image being transparent;
FIG. 7 is the pop-up image of FIG. 5, wherein its background is opaque;
fig. 8 is an example of a mask image used in fig. 6.
Detailed Description
The current mobile application does not necessarily need to be developed by adopting original code (the original code languages of different platforms are different, for example, the original code language of the Android platform is Java, and the original code language of the iOS platform is Object C.
Now, there is a "development mode for mixing HTML5 and native code", that is, part of functions are implemented by the native code, and the rest of functions are implemented by HTML5 technology. The advantage of this technique is that the unique features and expansion capabilities of HTML5 are well utilized. The mobile electronic magazine developed by the technology realizes the display of the pop-up image by the HTML5 technology, and not by original code.
The present invention is directed to "mobile applications that display pop-up images using HTML5 technology". The invention is not limited to the running platform of the mobile application, and can be used on any operating system platform, such as Android, iOS, Windows Phone and the like.
Generally, a production software is required for producing the mobile electronic magazine. After the mobile electronic magazine is manufactured, the manufacturing software uploads the mobile electronic magazine to the mobile device, and the mobile device is responsible for displaying the mobile electronic magazine to an end user.
As shown in fig. 4, the method of the present invention comprises the following steps:
step 1: aiming at a pop-up image in a mobile electronic magazine to be manufactured, the pop-up image is manufactured into a source image in a png format, and the image name is ori. More advantageously, the file size of the png image at that time is acquired.
When the png image is produced, the image can be provided without an alpha channel.
More advantageously, if the file size of the png image is obtained, it is determined whether the png file size exceeds a threshold value. The pop-up image exceeding the threshold is further processed by making the pop-up image a png image with an alpha channel, with the image name ori. The alpha channel of the png image is used to save background transparent information. Just because of the alpha channel, the png image can make the background transparent. The pop-up image that does not reach the threshold value is processed without being processed, and the png image is used as it is, and the pop-up image is made to be ori.
The setting criteria of the threshold value and the nature of the image in the electronic magazine are very large, and there is no certain rule, and the setting criteria can be usually set to 100-150K. Moreover, the method described by the invention has better effect on the image with larger png file size. However, in the case of an image in which the png file size is small, the final file size may become large. Therefore, a threshold value needs to be set, and only images with png file sizes exceeding the threshold value are processed.
Step 2: and (5) reproducing the popup image into a jpeg file format with the image name of out. Among them, jpeg is much smaller than the file size of ori. Jpeg does not have an alpha channel and therefore does not express a transparent background.
And step 3: png images were replicated and named mask png, and this mask png was made as a png image with an alpha channel unchanged and a pure color.
Png's alpha channel is identical to ori.png's alpha channel (if ori.png has an alpha channel), and the color of mask.png is pure, i.e., the values of R \ G \ B channels of mask.png are identical.
Png is black, that is, the R \ G \ B channels of mask png all have a value of 0, and the file size of mask png is the smallest. Png's file size may increase slightly if not set to black.
Png has many algorithms for generating mask in step 3, for example, the algorithm may include the following steps:
step 3-1: creating a memory image with the size identical to that of the ori.png;
step 3-2: traversing the pixel columns and rows of the ori.png, acquiring the color value of the ori.png for each pixel point of the image, and keeping the color value in a variable, such as the variable name of oldColor;
step 3-3: a new color value is created, the value of the alpha channel of this new color value is the same as the value of the alpha channel of the old color value, and then the values of R \ G \ B are both set to some certain value, preferably to 0.
Step 3-4: writing the modified new color value back to the pixel point;
the reference codes from step 3-2 to step 3-4 may be, for example:
step 3-5: png, and storing the modified memory image as a mask to obtain the image described in the step 3.
Png because there is only an alpha channel, the file size is very small, usually much smaller than out.
And 4, step 4: png images are overlaid on top of the out.jpeg using HTML5 technology on the mobile device.
This achieves the effect of a transparent background image. The invention is described below by way of an example:
fig. 5 is a page of a mobile electronic magazine showing a background picture, the top right picture being a zoomed-out picture, which is essentially a hot spot, and clicking on the picture can pop up a pop-up image, which is a zoomed-in image. The effect after the pop-up image pops up is shown in fig. 6, and the pop-up image has an oval frame, a shadow of the frame, and a translucent surrounding.
The method for reducing the mobile electronic magazine for the pop-up image comprises the following steps:
1. the pop-up image is made as a png format, and the file named as ori.png file size 1014K, whose size exceeds a predetermined threshold value 150K, is made as a png file with an alpha channel.
2. The pop-up image is made in jpeg format out. It can be seen that now the background image is completely invisible, the shadow and semi-transparent effect becomes grey and the visual effect is poor, but the file size of out.
3. The ori.png file is made into a mask.png file, the alpha channel of the mask.png is identical to the alpha channel of the ori.png, and the color of the mask.png is black, namely, the R \ G \ B channel of the mask.png has a value of 0.
The mask file has a file size of 8K as shown in FIG. 8. We see from this that the file size of out. jpeg + mask. png, is only 12.6% of the file size of ori. png, reduced by nearly 8 times.
Out.jpeg and mask.png images are produced, which are next made to have a background transparent effect on the mobile device.
4. The background transparency effect is achieved on the mobile device by the mask style sheet attribute in the HTML5 technology. In the HTML5 technology, there is a style sheet attribute of CSS3, called mask attribute, e.g., -webkit-mask-box-image. This property means that an image can be used as a mask, so that the browser only shows what the mask allows, while cropping away what the mask does not allow.
Png image generated, if it is used as a mask, just cuts out the background image, and retains the rest. Png image can be used as mask to cut background image, so as to obtain transparent background image effect.
The reference codes are as follows:
<div style=″-webkit-mask-box-image:url(mask.png);
background-image:url(out.jpeg);width=″1024px″;
height=″720px″><div>
the display effect obtained in this way is exactly the same as that of fig. 6. The above is provided with only one reference code and other mask style sheet attributes may be used to achieve the same background transparency effect. Png image is changed to use two images of out.jpeg and mask.png and appropriate HTML5 technology, not only is the effect of image background transparency achieved, but the overall file size is greatly reduced.
Claims (4)
1. A method for reducing the size of a mobile electronic magazine file, comprising:
step 1: aiming at a pop-up image in a mobile electronic magazine to be manufactured, manufacturing the pop-up image into a source image (ori.png) in png format;
step 2: reproducing the pop-up image as an output image (out) in a jpeg file format;
and step 3: copying the source image (ori.png) into a png format mask image (mask.png), and making the mask image (mask.png) into a png format image with an unchanged alpha channel and a pure color;
and 4, step 4: superimposing, on the mobile device, the mask image (mask.png) over the output image (out.jpeg) by a mask attribute; wherein,
the step 1 further comprises:
step 1-1: acquiring the file size of the source image (ori.png) at the moment;
step 1-2: and if the file size of the source image (ori.png) exceeds a threshold value, making the pop-up image corresponding to the source image into a png format image with an alpha channel, and taking the pop-up image as a new source image (ori.png).
2. A method for reducing the size of a mobile electronic magazine file according to claim 1, characterized in that in step 3, the values of RGB of the mask image are set to 0.
3. The method of reducing the size of a mobile electronic magazine file according to claim 1, wherein the mask property is a mask style sheet property in HTML5 technology.
4. Method for reducing the size of a mobile electronic magazine file according to claim 3, characterized in that the mask image (mask. png) is superimposed on top of the output image (out.jpeg) on the mobile device using the mask style sheet properties in the HTML5 technology.
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 CN103514616A (en) | 2014-01-15 |
| CN103514616B true 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) |
Families Citing this family (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 (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110193871A1 (en) * | 2010-02-07 | 2011-08-11 | Microsoft Corporation | Rendering multi-layered image |
-
2013
- 2013-09-02 CN CN201310392519.4A patent/CN103514616B/en active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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在网页设计中的优势;刘薇 等;《金田（励志）》;20121231(第12期);论文第1-3节 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103514616A (en) | 2014-01-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10380227B2 (en) | Generating layout for content presentation structures | |
| US9219830B1 (en) | Methods and systems for page and spread arrangement in photo-based projects | |
| KR101852901B1 (en) | Apparatus and method for inserting text in image | |
| US20120288190A1 (en) | Image Reflow at Word Boundaries | |
| JP2013089199A5 (en) | ||
| WO2015196822A1 (en) | Method and device for adapting webpage to screen layout | |
| KR101638725B1 (en) | Application text adjusting method, device, terminal, program, and recording medium | |
| WO2020125481A1 (en) | Method for generating identification pattern, and terminal device | |
| CN103390059A (en) | Picture induction processing method and system | |
| JP2014524623A (en) | Template file processing method and apparatus | |
| CN110310226B (en) | Picture mosaic display method and system | |
| CN110909275A (en) | Page browsing method and device and electronic equipment | |
| US20160232151A1 (en) | Responsive course design system and method | |
| CN104732568A (en) | Method and device for online addition of lyric subtitles to pictures | |
| CN103514616B (en) | Method for reducing size of mobile electronic magazine file | |
| US10120539B2 (en) | Method and device for setting user interface | |
| CN108090123A (en) | Purify the method and apparatus of the network novel page | |
| US20210056252A1 (en) | Creation of rich content from textual content | |
| CN106293658B (en) | Interface component generation method and equipment | |
| CN111045576B (en) | Display control method, display control device, terminal equipment and electronic equipment | |
| CN111199136B (en) | Document content display method, device and equipment | |
| US20190197986A1 (en) | Methods for dynamically providing an image to be displayed | |
| CN107038734A (en) | A kind of method of imaging importing text for Windows systems | |
| US20220292748A1 (en) | Imagery keepsake generation | |
| Monteiro | Fit to frame: image and edge in contemporary interfaces |
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 |