Specific embodiment
To better understand the objects, features and advantages of the present invention, with reference to the accompanying drawing and specific realApplying example, the present invention will be described in detail.It should be noted that in the absence of conflict, embodiments herein and embodimentIn feature can be combined with each other.
In the following description, numerous specific details are set forth in order to facilitate a full understanding of the present invention, described embodiment is onlyIt is only a part of the embodiment of the present invention, instead of all the embodiments.Based on the embodiments of the present invention, ordinary skillPersonnel's every other embodiment obtained without making creative work, shall fall within the protection scope of the present invention.
Unless otherwise defined, all technical and scientific terms used herein and belong to technical field of the inventionThe normally understood meaning of technical staff is identical.Term as used herein in the specification of the present invention is intended merely to description toolThe purpose of the embodiment of body, it is not intended that in the limitation present invention.
Preferably, image display method of the invention is applied in one or more computer installation.The computerDevice is that one kind can be according to the instruction for being previously set or storing, the automatic equipment for carrying out numerical value calculating and/or information processing,Hardware includes but is not limited to microprocessor, specific integrated circuit (Application Specific IntegratedCircuit, ASIC), programmable gate array (Field-Programmable Gate Array, FPGA), digital processing unit(Digital Signal Processor, DSP), embedded device etc..
The computer installation can be the calculating such as desktop PC, notebook, palm PC and cloud server and setIt is standby.The computer installation can carry out people by modes such as keyboard, mouse, remote controler, touch tablet or voice-operated devices with userMachine interaction.
Fig. 1 is the application environment schematic diagram of image display method preferred embodiment of the present invention.
As shown in fig.1, the application environment of the image display method includes mobile terminal 1, application server 2 and pictureServer 3.Mobile terminal 1, application server 2 and picture servers 3 are communicated by network.
In other examples, the application environment of the image display method may include computer installation, can be withIncluding the storage equipment being connected with computer installation.
Fig. 2 is the flow chart of image display method preferred embodiment of the present invention.The image display method specifically include withLower step:
Step 201, the thumbnail of multiple and different sizes is generated to picture, stores the multiple various sizes of thumbnail.
In the embodiment of application environment shown in Fig. 1, application server 2 generates the breviary of multiple and different sizes to pictureFigure, by the multiple various sizes of thumbnail storage to picture servers 3.
Alternatively, in other examples, computer installation generates the thumbnail of multiple and different sizes to picture, institute is storedThe thumbnail of multiple and different sizes is stated, for example, by built in the multiple various sizes of thumbnail storage to computer installationStore equipment or external storage equipment.
The picture is original image.The picture can be JPEG (Joint Photographic Experts Group, connectionClose imagery specialists group) picture.JPEG is a kind of lossy compression format, and jpeg image compression algorithm is capable of providing good compressionPerformance, and there is relatively good reconstruction quality, it is widely used in image, field of video processing.JPEG, which has, adjusts imageThe function of quality allows to compress image file with different compression factors, supports a variety of compression levels, compression ratio logicalOften between 10:1 to 40:1, compression ratio is bigger, and quality is lower；On the contrary, compression ratio is smaller, quality is higher.
The picture is also possible to PNG (Portable Network Graphics, portable network figure) picture.PNGIt is a kind of bitmapped graphics format of lossless compression.PNG is compressed using the derivation algorithm of LZ77 algorithm, can get high compressionThan, and do not lose image data.PNG marks the data repeated using special coding method, thus to the face of imageColor does not influence, and will not generate the loss of color, can repeat to save without reducing picture quality.PNG allows continuous readWith write-in image data, it is suitable for that image is shown and generated in communication process.
It is appreciated that the picture can also be the picture of extended formatting, such as GIF (Graphics InterchangeFormat, graphic interchange format) picture or TIFF (Tag Image File Format, label image file format) picture orBMP (Bitmap, image file format) picture.
The multiple various sizes of thumbnail is possibly stored to CDN (Content Delivery Network, content pointHairnet network).For example, the picture servers 3 can be the server in CDN.CDN is constructed on existing network basisOne layer of intelligent virtual network.The basic principle of CDN is that various cache servers are widely used, these cache servers are distributed toUser accesses in area or the network of Relatively centralized, when user accesses website, using global load technology by the access of userIt is directed toward on the nearest cache server working properly of distance, is requested by cache server directly in response to user.CDN can be real-timeGround will be used according to the connection of network flow and each node, load state and to the integrated informations such as the distance of user and response timeThe request at family re-directs on the service node nearest from user.The purpose is to make user that can obtain required content nearby, reduceNetwork congestion improves user's access response speed and hit rate.The key technology of CDN mainly has content storage and distribution technology.
The picture is handled to generate the thumbnail of the picture and may include:
(1) redundancy of the picture is removed.
If the picture be JPEG picture or PNG picture, the redundancy may include shown with picture it is unrelatedExif (Exchangeable image file, exchangeable image file) information.Attribute of the Exif information for recordable picture is believedBreath and photographed data, comprising: the various shooting conditions such as aperture, shutter, white balance, ISO, focal length, date-time when shooting withAnd the sound recorded when camera brand, model, color coding, shooting and the location information obtained by positioning etc..Exif letterIn addition to white balance and color encode in breath, remaining information and data are displayed without relationship with picture, can be removed to this.Under normal circumstances, it removes in picture and shows that unrelated Exif information can reduce about 20k memory space with picture.
If the picture is JPEG picture or PNG picture, the redundancy can also include being embedded in the form of textComment information in picture code, such as description, the name of photographer etc. to shooting places.Comment information is also shown with pictureIt is unrelated, picture will not be shown and be impacted after removal.
If the picture is PNG picture, the redundancy can also include showing unrelated auxiliary block message with picture.
The PNG file of standard is made of a PNG file identification and multiple PNG data blocks, and PNG data block divides crucial block againAnd auxiliary block.Auxiliary block includes 14 kinds of information (i.e. auxiliary block message), can be fallen into 5 types according to information type: transparent channel information(tRNS), color space information (cHRM, gAMA, iCCP, sBIT, sRGB), text information (tEXt, zTXt, iTXt), other lettersCease (bKGD, hIST, pHYs, sPLT) and timestamp information (tIME).Auxiliary block message does not need whole guarantors in most casesIt stays, thus can be removed when removing the redundancy of picture and show unrelated auxiliary block message, such as text information with picture(tEXt, zTXt, iTXt) and timestamp information (tIME).
In one embodiment, for the PNG picture of no transparent channel information, then all auxiliary block messages are removed (i.e.Remove auxiliary block)；For the PNG picture containing transparent channel information, then auxiliary block all except transparent channel information is removedInformation, and modify to the RGB color value of the pixel in pellucidity.
Specifically, if the picture is PNG picture, it can remove as follows and show unrelated auxiliary block with pictureInformation:
Judge whether contain transparent channel information in the auxiliary block message of the picture；
If containing transparent channel information in the auxiliary block message of the picture, remove in the auxiliary block message of the pictureOther information in addition to transparent channel information, and by the RGB face of pixel transparent in transparent channel information in the pictureColor value is revised as preset color value；
If not containing transparent channel information in the auxiliary block message of the picture, all auxiliary blocks of the picture are removedInformation.
According to the transparent information of each pixel saved corresponding in transparent channel information it is found that in picture which pixelIt is fully transparent, therefore for transparent pixel, no matter which kind of color is its corresponding original RGB color value be, is schemingIts corresponding color is not shown when the pixel when piece is shown, but according to corresponding in the transparent channel information of PNG pictureThe transparent attribute of the pixel show the pixel be it is fully transparent, color value is then invisible.It is corresponding for the pixelIt is then useless for the RGB color value of preservation, therefore its corresponding RGB color value can be revised as preset color value(such as (0,0,0)), to reduce the memory space of picture.
(2) picture after removal redundancy is reduced into multiple pre-set dimensions.
The width or height that can specify thumbnail, according to original image ratio (i.e. wide height) to removal redundancy afterPicture is reduced, to avoid picture distortion.Such as, it is possible to specify the width of thumbnail is respectively 48,96,160,320,480,640,750,1080 (unit is pixel) reduces the picture after removal redundancy according to original image ratio.It can basisThe practical situations of picture specify the width or height of thumbnail.
Or, it is possible to specify the width and height (such as 480*360) of thumbnail, not according to original image ratio to removal redundancyPicture after information is reduced.
If the width or height of the picture are less than the width or height of specified thumbnail, not to the pictureIt is reduced.
In addition to above-mentioned (1), (2), the picture is handled to generate the thumbnail of the picture and can also include:
(3) picture after diminution is converted into preset format.
For example, the JPEG picture after diminution is converted to WebP format.WebP is to reduce data volume, network is accelerated to passDefeated and exploitation picture format.WebP provides the picture file format of lossy compression and lossless compression simultaneously, is derived from image volumeCode format VP8.The main advantage of WebP format is high efficiency.In the case where identical in quality, WebP format-pattern thanJpeg format image is small by 40%.
In one embodiment, the picture is JPEG picture, can be generated a set of width be respectively 48,96,160,320,480,640,750,1080 jpeg thumbnail and a set of width be respectively 48,96,160,320,480,640,750,1080 WebP thumbnail, the ratio of width to height of the thumbnail of generation are identical as original image.
In another embodiment, the picture is PNG picture, can be generated a set of width be respectively 48,96,160,320,480,640,750,1080 PNG thumbnail and a set of width are respectively 48,96,160,320,480,640,750,1080WebP thumbnail, the ratio of width to height of the thumbnail of generation is identical as original image.
By the thumbnail storage of the picture to picture servers 3, the thumbnail of the picture is describedThe address of picture servers 3 can be indicated with URL (Uniform Resource Locator, uniform resource locator).It is describedThe thumbnail of picture can address according to the picture in the picture servers 3, institute in the address of the picture servers 3State the specified size (width and/or height) of thumbnail, the picture format of the thumbnail is configured.For example, picture is PNGPicture, the picture are https: //abcdef.com.cn/upload/ in the address of the picture servers 31512988034923.png, the thumbnail of the picture are PNG format, and the specified width of the thumbnail is 160, then the thumbnailIt is https: //abcdef.com.cn/upload/160/1512988034923.png in the address of the picture servers 3.For another example, the picture is JPEG picture, which is https: //abcdef.com.cn/ in the address of the picture servers 3Upload/1512988034958.jpeg, the thumbnail of the picture are WebP format, and the specified width of the thumbnail is 320, thenThe thumbnail is https: //abcdef.com.cn/upload/320/ in the address of the picture servers 31512988034958.webp。
Step 202, it when to open the Application Program Interface comprising the picture, obtains in the Application Program Interface and addsCarry the size of the picture control of the picture, the size of the picture control and the screen resolution for showing the Application Program InterfaceRate is associated.
Picture control is a kind of user interface controls (i.e. UI control), for showing picture in user interface.
The Application Program Interface can be the arbitrary interface of application program, for example, main interface or enter from main interface itsHis interface.
The Application Program Interface can be primary interface and be also possible to the interface H5.
In one embodiment, when mobile terminal 1 will open Application Program Interface, mobile terminal 1 is to application serviceDevice 2 sends page data request, and receives the page data of the return of application server 2.The page data is each area of the pageThe data in domain, including text, picture address, redirected link etc..May determine that the picture address in the page data whether bePreset address (such as determining whether the prefix of the picture address is default prefix), if the picture address in the page dataFor preset address, then the Application Program Interface to be opened of mobile terminal 1 includes the picture.Picture address in page data isThe address of original image.
The size of the picture control is associated with the screen resolution for showing the Application Program Interface.Screen resolutionLower, then picture control is smaller；Screen resolution is higher, then picture control is bigger.For example, the size of the picture control can be withIt is directly proportional to the screen resolution for showing the Application Program Interface.For example, the picture control that mobile terminal 1 Loads ImageSize it is associated with the resolution ratio of mobile terminal 1.The resolution ratio of mobile terminal 1 is lower, then picture control is smaller；Mobile terminal1 resolution ratio is higher, then picture control is bigger.
In a specific embodiment, the width of the picture control can be obtained by getMeasuredWidth methodDegree.For example, the tail of the queue that can send a message to UI thread message queue is used when starting to process the messageGetMeasuredWidth method obtains the width of the picture control.The UI thread message queue is responsible for handling interface draftingThe events such as interaction.
Step 203, according to the size of the picture control, determination is to be loaded from the multiple various sizes of thumbnailThumbnail.
In one embodiment, the thumbnail of multiple and different sizes of generation is the thumbnail of specified different in width, acquisitionThe size of picture control is the width of picture control, in such a case, it is possible to from the multiple various sizes of thumbnailThe thumbnail for being greater than or equal to the width of the picture control is determined, from the breviary for the width for being greater than or equal to the picture controlThe thumbnail that minimum widith is determined in figure, using the thumbnail of the minimum widith as thumbnail to be loaded.
In another embodiment, the thumbnail of multiple and different sizes of generation is the thumbnail for specifying different height, is obtainedThe size of the picture control taken is the height of picture control, in such a case, it is possible to from the multiple various sizes of breviaryThe thumbnail for being greater than or equal to the height of the picture control is determined in figure, from the height for being greater than or equal to the picture controlThe thumbnail that minimum constructive height is determined in thumbnail, using the thumbnail of the minimum constructive height as thumbnail to be loaded.
If the size of picture control is greater than the thumbnail of the multiple and different sizes generated, with the breviary of multiple and different sizesMaximum sized thumbnail is as thumbnail to be loaded in figure.
If the thumbnail generated in step 201 includes thumbnail (such as JEPG thumbnail and the WebP of different picture formatsThumbnail), then when determining thumbnail to be loaded, first determine whether the computer installation (example for showing the Application Program InterfaceSuch as the mobile terminal 1) whether support lesser picture format (such as WebP format) in the different picture formats, if displayThe computer installation of the Application Program Interface supports lesser picture format in the different picture formats, then from the smaller figureThumbnail to be loaded is determined in the thumbnail of piece format.For example, the thumbnail generated in step 102 include JEPG thumbnail andWebP thumbnail then determines contracting to be loaded according to the size of the picture control from the multiple various sizes of thumbnailWhen sketch map, judge whether the mobile terminal 1 supports WebP format, if the mobile terminal 1 supports WebP format, from WebPThumbnail to be loaded is determined in thumbnail.
Step 204, the thumbnail to be loaded is obtained from the thumbnail of multiple and different sizes of storage.
For example, in the case where the multiple various sizes of thumbnail storage is to picture servers 3, according to described to be addedThe thumbnail of load obtains the thumbnail to be loaded in the address of the picture servers 3.
As previously mentioned, the address that different sizes, the thumbnail storage of different-format are different in the picture servers 3.ExampleSuch as, picture is PNG picture, which is https: //abcdef.com.cn/upload/ in the address of the picture servers 31512988034923.png, a thumbnail of the picture are PNG format, and the specified width of the thumbnail is 160, the breviaryFigure is https: //abcdef.com.cn/upload/160/ in the address of the picture servers 31512988034923.png；Another thumbnail of the picture is WebP format, and the specified width of the thumbnail is 320, the breviaryFigure is https: //abcdef.com.cn/upload/320/ in the address of the picture servers 31512988034923.webp.Therefore, be 160 to obtain the specified width of the picture, format is the thumbnail of PNG, then fromHttps: //abcdef.com.cn/upload/160/1512988034923.png is acquired；It is specified to obtain the pictureWidth be 320, format be WebP thumbnail, then from https: //abcdef.com.cn/upload/320/1512988034923.webp acquiring.
Step 205, the thumbnail that will acquire is loaded by the picture control, is shown in the Application Program InterfaceThe picture.
For example, will be from https: the PNG that //abcdef.com.cn/upload/160/1512988034923.png is obtainedFormat, the thumbnail that width is 160 are loaded by the picture control, are shown on Application Program Interface.For another example,It is by the WebP format obtained from https: //abcdef.com.cn/upload/320/1512988034923.webp, width320 thumbnail is loaded by the picture control, is shown on Application Program Interface.
The image display method generates the thumbnail of multiple and different sizes to picture, (such as is moved according to computer installationDynamic terminal 1) size of picture control that Loads Image selects suitable thumbnail to carry out from the thumbnail of multiple and different sizesLoad.This method generates the thumbnail of multiple and different sizes to a picture, according to the contracting that the selection of the size of picture control is suitableSketch map, the picture flow of the computer installation reduced.Further, since the picture control that Application Program Interface Loads Image is bigSmall associated with the screen resolution of computer installation, therefore, this method can be selected according to the screen resolution of computer installationThe thumbnail for selecting suitable size is loaded, and lesser thumbnail is selected compared with the computer installation of the small screen resolution ratio, compared with large-size screen monitorsThe computer installation of curtain resolution ratio selects biggish thumbnail.
Fig. 3 is the structure chart of image display apparatus preferred embodiment of the present invention.As shown in figure 3, the image display apparatus10 may include: generation unit 301, first acquisition unit 302, determination unit 303, second acquisition unit 304, loading unit305。
Generation unit 301 stores the multiple various sizes of for generating the thumbnail of multiple and different sizes to pictureThumbnail.
In the embodiment of application environment shown in Fig. 1, generation unit 301 is arranged in application server 2, and first obtains listMember 302, determination unit 303, second acquisition unit 304, loading unit 305 are arranged in mobile terminal 1.Generation unit 301 is rightPicture generates the thumbnail of multiple and different sizes, by the multiple various sizes of thumbnail storage to picture servers 3.
Alternatively, in other examples, generation unit 301, first acquisition unit 302, determination unit 303, second are obtainedUnit 304, loading unit 305 is taken to be arranged in computer installation.Generation unit 301 generates the contracting of multiple and different sizes to pictureSketch map stores the multiple various sizes of thumbnail, for example, by the multiple various sizes of thumbnail storage to computerStorage equipment or external storage equipment built in device.
The picture is original image.The picture can be JPEG (Joint Photographic Experts Group, connectionClose imagery specialists group) picture.JPEG is a kind of lossy compression format, and jpeg image compression algorithm is capable of providing good compressionPerformance, and there is relatively good reconstruction quality, it is widely used in image, field of video processing.JPEG, which has, adjusts imageThe function of quality allows to compress image file with different compression factors, supports a variety of compression levels, compression ratio logicalOften between 10:1 to 40:1, compression ratio is bigger, and quality is lower；On the contrary, compression ratio is smaller, quality is higher.
The picture is also possible to PNG (Portable Network Graphics, portable network figure) picture.PNGIt is a kind of bitmapped graphics format of lossless compression.PNG is compressed using the derivation algorithm of LZ77 algorithm, can get high compressionThan, and do not lose image data.PNG marks the data repeated using special coding method, thus to the face of imageColor does not influence, and will not generate the loss of color, can repeat to save without reducing picture quality.PNG allows continuous readWith write-in image data, it is suitable for that image is shown and generated in communication process.
It is appreciated that the picture can also be the picture of extended formatting, such as GIF (Graphics InterchangeFormat, graphic interchange format) picture or TIFF (Tag Image File Format, label image file format) picture orBMP (Bitmap, image file format) picture.
The multiple various sizes of thumbnail is possibly stored to CDN (Content Delivery Network, content pointHairnet network).For example, the picture servers 3 can be the server in CDN.CDN is constructed on existing network basisOne layer of intelligent virtual network.The basic principle of CDN is that various cache servers are widely used, these cache servers are distributed toUser accesses in area or the network of Relatively centralized, when user accesses website, using global load technology by the access of userIt is directed toward on the nearest cache server working properly of distance, is requested by cache server directly in response to user.CDN can be real-timeGround will be used according to the connection of network flow and each node, load state and to the integrated informations such as the distance of user and response timeThe request at family re-directs on the service node nearest from user.The purpose is to make user that can obtain required content nearby, reduceNetwork congestion improves user's access response speed and hit rate.The key technology of CDN mainly has content storage and distribution technology.
The picture is handled to generate the thumbnail of the picture and may include:
(1) redundancy of the picture is removed.
If the picture be JPEG picture or PNG picture, the redundancy may include shown with picture it is unrelatedExif (Exchangeable image file, exchangeable image file) information.Attribute of the Exif information for recordable picture is believedBreath and photographed data, comprising: the various shooting conditions such as aperture, shutter, white balance, ISO, focal length, date-time when shooting withAnd the sound recorded when camera brand, model, color coding, shooting and the location information obtained by positioning etc..Exif letterIn addition to white balance and color encode in breath, remaining information and data are displayed without relationship with picture, can be removed to this.Under normal circumstances, it removes in picture and shows that unrelated Exif information can reduce about 20k memory space with picture.
If the picture is JPEG picture or PNG picture, the redundancy can also include being embedded in the form of textComment information in picture code, such as description, the name of photographer etc. to shooting places.Comment information is also shown with pictureIt is unrelated, picture will not be shown and be impacted after removal.
If the picture is PNG picture, the redundancy can also include showing unrelated auxiliary block message with picture.
The PNG file of standard is made of a PNG file identification and multiple PNG data blocks, and PNG data block divides crucial block againAnd auxiliary block.Auxiliary block includes 14 kinds of information (i.e. auxiliary block message), can be fallen into 5 types according to information type: transparent channel information(tRNS), color space information (cHRM, gAMA, iCCP, sBIT, sRGB), text information (tEXt, zTXt, iTXt), other lettersCease (bKGD, hIST, pHYs, sPLT) and timestamp information (tIME).Auxiliary block message does not need whole guarantors in most casesIt stays, thus can be removed when removing the redundancy of picture and show unrelated auxiliary block message, such as text information with picture(tEXt, zTXt, iTXt) and timestamp information (tIME).
In one embodiment, for the PNG picture of no transparent channel information, then all auxiliary block messages are removed (i.e.Remove auxiliary block)；For the PNG picture containing transparent channel information, then auxiliary block all except transparent channel information is removedInformation, and modify to the RGB color value of the pixel in pellucidity.
Specifically, if the picture is PNG picture, it can remove as follows and show unrelated auxiliary block with pictureInformation:
Judge whether contain transparent channel information in the auxiliary block message of the picture；
If containing transparent channel information in the auxiliary block message of the picture, remove in the auxiliary block message of the pictureOther information in addition to transparent channel information, and by the RGB face of pixel transparent in transparent channel information in the pictureColor value is revised as preset color value；
If not containing transparent channel information in the auxiliary block message of the picture, all auxiliary blocks of the picture are removedInformation.
According to the transparent information of each pixel saved corresponding in transparent channel information it is found that in picture which pixelIt is fully transparent, therefore for transparent pixel, no matter which kind of color is its corresponding original RGB color value be, is schemingIts corresponding color is not shown when the pixel when piece is shown, but according to corresponding in the transparent channel information of PNG pictureThe transparent attribute of the pixel show the pixel be it is fully transparent, color value is then invisible.It is corresponding for the pixelIt is then useless for the RGB color value of preservation, therefore its corresponding RGB color value can be revised as preset color value(such as (0,0,0)), to reduce the memory space of picture.
(2) picture after removal redundancy is reduced into multiple pre-set dimensions.
The width or height that can specify thumbnail, according to original image ratio (i.e. wide height) to removal redundancy afterPicture is reduced, to avoid picture distortion.Such as, it is possible to specify the width of thumbnail is respectively 48,96,160,320,480,640,750,1080 (unit is pixel) reduces the picture after removal redundancy according to original image ratio.It can basisThe practical situations of picture specify the width or height of thumbnail.
Or, it is possible to specify the width and height (such as 480*360) of thumbnail, not according to original image ratio to removal redundancyPicture after information is reduced.
If the width or height of the picture are less than the width or height of specified thumbnail, not to the pictureIt is reduced.
In addition to above-mentioned (1), (2), the picture is handled to generate the thumbnail of the picture and can also include:
(3) picture after diminution is converted into preset format.
For example, the JPEG picture after diminution is converted to WebP format.WebP is to reduce data volume, network is accelerated to passDefeated and exploitation picture format.WebP provides the picture file format of lossy compression and lossless compression simultaneously, is derived from image volumeCode format VP8.The main advantage of WebP format is high efficiency.In the case where identical in quality, WebP format-pattern thanJpeg format image is small by 40%.
In one embodiment, the picture is JPEG picture, can be generated a set of width be respectively 48,96,160,320,480,640,750,1080 jpeg thumbnail and a set of width be respectively 48,96,160,320,480,640,750,1080 WebP thumbnail, the ratio of width to height of the thumbnail of generation are identical as original image.
In another embodiment, the picture is PNG picture, can be generated a set of width be respectively 48,96,160,320,480,640,750,1080 PNG thumbnail and a set of width are respectively 48,96,160,320,480,640,750,1080WebP thumbnail, the ratio of width to height of the thumbnail of generation is identical as original image.
By the thumbnail storage of the picture to picture servers 3, the thumbnail of the picture is describedThe address of picture servers 3 can be indicated with URL (Uniform Resource Locator, uniform resource locator).It is describedThe thumbnail of picture can address according to the picture in the picture servers 3, institute in the address of the picture servers 3State the specified size (width and/or height) of thumbnail, the picture format of the thumbnail is configured.For example, picture is PNGPicture, the picture are https: //abcdef.com.cn/upload/ in the address of the picture servers 31512988034923.png, the thumbnail of the picture are PNG format, and the specified width of the thumbnail is 160, then the thumbnailIt is https: //abcdef.com.cn/upload/160/1512988034923.png in the address of the picture servers 3.For another example, the picture is JPEG picture, which is https: //abcdef.com.cn/ in the address of the picture servers 3Upload/1512988034958.jpeg, the thumbnail of the picture are WebP format, and the specified width of the thumbnail is 320, thenThe thumbnail is https: //abcdef.com.cn/upload/320/ in the address of the picture servers 31512988034958.webp。
First acquisition unit 302, for obtaining the application when to open the Application Program Interface comprising the pictureThe size of the picture control of the picture, the size and display application program circle of the picture control are loaded in program interfaceThe screen resolution in face is associated.
Picture control is a kind of user interface controls (i.e. UI control), for showing picture in user interface.
The Application Program Interface can be the arbitrary interface of application program, for example, main interface or enter from main interface itsHis interface.
The Application Program Interface can be primary interface and be also possible to the interface H5.
In one embodiment, when mobile terminal 1 will open Application Program Interface, first in mobile terminal 1 is obtainedIt takes unit 302 to send page data request to application server 2, and receives the page data of the return of application server 2.The pageFace data is the data, including text, picture address, redirected link etc. of page each region.It may determine that the page dataIn picture address whether be preset address (such as determining whether the prefix of the picture address is default prefix), if the pagePicture address in face data is preset address, then the Application Program Interface to be opened of mobile terminal 1 includes the picture.The pagePicture address in data is the address of original image.
The size of the picture control is associated with the screen resolution for showing the Application Program Interface.Screen resolutionLower, then picture control is smaller；Screen resolution is higher, then picture control is bigger.For example, the size of the picture control can be withIt is directly proportional to the screen resolution for showing the Application Program Interface.For example, the picture control that mobile terminal 1 Loads ImageSize it is associated with the resolution ratio of mobile terminal 1.The resolution ratio of mobile terminal 1 is lower, then picture control is smaller；Mobile terminal1 resolution ratio is higher, then picture control is bigger.
In a specific embodiment, the width of the picture control can be obtained by getMeasuredWidth methodDegree.For example, the tail of the queue that can send a message to UI thread message queue is used when starting to process the messageGetMeasuredWidth method obtains the width of the picture control.The UI thread message queue is responsible for handling interface draftingThe events such as interaction.
Determination unit 303, it is true from the multiple various sizes of thumbnail for the size according to the picture controlFixed thumbnail to be loaded.
In one embodiment, the thumbnail of multiple and different sizes of generation is the thumbnail of specified different in width, acquisitionThe size of picture control is the width of picture control, in such a case, it is possible to from the multiple various sizes of thumbnailThe thumbnail for being greater than or equal to the width of the picture control is determined, from the breviary for the width for being greater than or equal to the picture controlThe thumbnail that minimum widith is determined in figure, using the thumbnail of the minimum widith as thumbnail to be loaded.
In another embodiment, the thumbnail of multiple and different sizes of generation is the thumbnail for specifying different height, is obtainedThe size of the picture control taken is the height of picture control, in such a case, it is possible to from the multiple various sizes of breviaryThe thumbnail for being greater than or equal to the height of the picture control is determined in figure, from the height for being greater than or equal to the picture controlThe thumbnail that minimum constructive height is determined in thumbnail, using the thumbnail of the minimum constructive height as thumbnail to be loaded.
If the size of picture control is greater than the thumbnail of the multiple and different sizes generated, with the breviary of multiple and different sizesMaximum sized thumbnail is as thumbnail to be loaded in figure.
If generation unit 301 generate thumbnail include different picture formats thumbnail (such as JEPG thumbnail andWebP thumbnail), then when determining thumbnail to be loaded, first determine whether the computer installation for showing the Application Program InterfaceWhether (such as described mobile terminal 1) supports lesser picture format (such as WebP format) in the different picture formats, ifShow that the computer installation of the Application Program Interface supports lesser picture format in the different picture formats, then from this compared withThumbnail to be loaded is determined in the thumbnail of small picture format.For example, the thumbnail generated in step 102 includes JEPG breviaryFigure and WebP thumbnail, then according to the size of the picture control, determination is to be loaded from the multiple various sizes of thumbnailThumbnail when, judge whether the mobile terminal 1 supports WebP format, if the mobile terminal 1 support WebP format, fromThumbnail to be loaded is determined in WebP thumbnail.
Second acquisition unit 304, for obtaining the contracting to be loaded from the thumbnail of multiple and different sizes of storageSketch map.
For example, in the case where the multiple various sizes of thumbnail storage is to picture servers 3, according to described to be addedThe thumbnail of load obtains the thumbnail to be loaded in the address of the picture servers 3.
As previously mentioned, the address that different sizes, the thumbnail storage of different-format are different in the picture servers 3.ExampleSuch as, picture is PNG picture, which is https: //abcdef.com.cn/upload/ in the address of the picture servers 31512988034923.png, a thumbnail of the picture are PNG format, and the specified width of the thumbnail is 160, the breviaryFigure is https: //abcdef.com.cn/upload/160/ in the address of the picture servers 31512988034923.png；Another thumbnail of the picture is WebP format, and the specified width of the thumbnail is 320, the breviaryFigure is https: //abcdef.com.cn/upload/320/ in the address of the picture servers 31512988034923.webp.Therefore, be 160 to obtain the specified width of the picture, format is the thumbnail of PNG, then fromHttps: //abcdef.com.cn/upload/160/1512988034923.png is acquired；It is specified to obtain the pictureWidth be 320, format be WebP thumbnail, then from https: //abcdef.com.cn/upload/320/1512988034923.webp acquiring.
Loading unit 305, the thumbnail for will acquire is loaded by the picture control, in the application programPicture described in interface display.
For example, will be from https: the PNG that //abcdef.com.cn/upload/160/1512988034923.png is obtainedFormat, the thumbnail that width is 160 are loaded by the picture control, are shown on Application Program Interface.For another example,It is by the WebP format obtained from https: //abcdef.com.cn/upload/320/1512988034923.webp, width320 thumbnail is loaded by the picture control, is shown on Application Program Interface.
Image display apparatus of the present invention generates the thumbnail of multiple and different sizes to picture, according to computer installation (such asMobile terminal 1) size of picture control that Loads Image selected from the thumbnail of multiple and different sizes suitable thumbnail intoRow load.Image display apparatus of the present invention generates the thumbnail of multiple and different sizes to a picture, according to the big of picture controlThe suitable thumbnail of small selection, the picture flow of the computer installation reduced.Further, since Application Program Interface Loads ImagePicture control size it is associated with the screen resolution of computer installation, therefore, image display apparatus of the present invention can rootThe thumbnail for being suitble to size is selected to be loaded according to the screen resolution of computer installation, the computer compared with the small screen resolution ratio fillsIt sets and selects lesser thumbnail, the computer installation of larger screen resolution ratio selects biggish thumbnail.
The present embodiment provides a kind of computer readable storage medium, computer is stored on the computer readable storage mediumProgram, the computer program realize the step in above-mentioned disease abnormal deviation data examination method embodiment, example when being executed by processorStep 201-205 as shown in Figure 2:
Step 201, the thumbnail of multiple and different sizes is generated to picture, stores the multiple various sizes of thumbnail；
Step 202, it when to open the Application Program Interface comprising the picture, obtains in the Application Program Interface and addsCarry the size of the picture control of the picture, the size of the picture control and the screen resolution for showing the Application Program InterfaceRate is associated；
Step 203, according to the size of the picture control, determination is to be loaded from the multiple various sizes of thumbnailThumbnail；
Step 204, the thumbnail to be loaded is obtained from the thumbnail of multiple and different sizes of storage；
Step 205, the thumbnail that will acquire is loaded by the picture control, is shown in the Application Program InterfaceThe picture.
Alternatively, the function of each module/unit in above-mentioned apparatus embodiment is realized when the computer program is executed by processor,Such as the unit 301-305 in Fig. 3:
Generation unit 301 stores the multiple various sizes of for generating the thumbnail of multiple and different sizes to pictureThumbnail；
First acquisition unit 302, for obtaining the application when to open the Application Program Interface comprising the pictureThe size of the picture control of the picture, the size and display application program circle of the picture control are loaded in program interfaceThe screen resolution in face is associated；
Determination unit 303, it is true from the multiple various sizes of thumbnail for the size according to the picture controlFixed thumbnail to be loaded；
Second acquisition unit 304, for obtaining the contracting to be loaded from the thumbnail of multiple and different sizes of storageSketch map；
Loading unit 305, the thumbnail for will acquire is loaded by the picture control, in the application programPicture described in interface display.
Fig. 4 is the schematic diagram of computer installation preferred embodiment of the present invention.The computer installation 1 include memory 20,Processor 30 and it is stored in the computer program 40 that can be run in the memory 20 and on the processor 30, such as schemedPiece shows program.The processor 30 realizes the step in above-mentioned image display method embodiment when executing the computer program 40Such as step 201-205 shown in Fig. 2 suddenly:
Step 201, the thumbnail of multiple and different sizes is generated to picture, stores the multiple various sizes of thumbnail；
Step 202, it when to open the Application Program Interface comprising the picture, obtains in the Application Program Interface and addsCarry the size of the picture control of the picture, the size of the picture control and the screen resolution for showing the Application Program InterfaceRate is associated；
Step 203, according to the size of the picture control, determination is to be loaded from the multiple various sizes of thumbnailThumbnail；
Step 204, the thumbnail to be loaded is obtained from the thumbnail of multiple and different sizes of storage；
Step 205, the thumbnail that will acquire is loaded by the picture control, is shown in the Application Program InterfaceThe picture.
Alternatively, realizing each module in above-mentioned apparatus embodiment/mono- when the processor 30 executes the computer program 40The function of member, such as the unit 301-305 in Fig. 3:
Generation unit 301 stores the multiple various sizes of for generating the thumbnail of multiple and different sizes to pictureThumbnail；
First acquisition unit 302, for obtaining the application when to open the Application Program Interface comprising the pictureThe size of the picture control of the picture, the size and display application program circle of the picture control are loaded in program interfaceThe screen resolution in face is associated；
Determination unit 303, it is true from the multiple various sizes of thumbnail for the size according to the picture controlFixed thumbnail to be loaded；
Second acquisition unit 304, for obtaining the contracting to be loaded from the thumbnail of multiple and different sizes of storageSketch map；
Loading unit 305, the thumbnail for will acquire is loaded by the picture control, in the application programPicture described in interface display.
Illustratively, the computer program 40 can be divided into one or more module/units, it is one orMultiple module/units are stored in the memory 20, and are executed by the processor 30, to complete the present invention.Described oneA or multiple module/units can be the series of computation machine program instruction section that can complete specific function, which is used forImplementation procedure of the computer program 40 in the computer installation 1 is described.For example, the computer program 40 can be byGeneration unit 301, first acquisition unit 302, the determination unit 303, second acquisition unit 304, loading unit being divided into Fig. 3305, each unit concrete function is referring to above-mentioned apparatus embodiment.
The computer installation 1 can be the calculating such as desktop PC, notebook, palm PC and cloud server and setIt is standby.It will be understood by those skilled in the art that the schematic diagram 4 is only the example of computer installation 1, do not constitute to computerThe restriction of device 1 may include perhaps combining certain components or different components, example than illustrating more or fewer componentsSuch as described computer installation 1 can also include input-output equipment, network access equipment, bus.
Alleged processor 30 can be central processing unit (Central Processing Unit, CPU), can also beOther general processors, digital signal processor (Digital Signal Processor, DSP), specific integrated circuit(Application Specific Integrated Circuit, ASIC), ready-made programmable gate array (Field-Programmable Gate Array, FPGA) either other programmable logic device, discrete gate or transistor logic,Discrete hardware components etc..General processor can be microprocessor or the processor 30 is also possible to any conventional processorDeng the processor 30 is the control centre of the computer installation 1, utilizes various interfaces and connection entire computer dressSet 1 various pieces.
The memory 20 can be used for storing the computer program 40 and/or module/unit, and the processor 30 passes throughOperation executes the computer program and/or module/unit being stored in the memory 20, and calls and be stored in memoryData in 20 realize the various functions of the computer installation 1.The memory 20 can mainly include storing program area and depositStore up data field, wherein storing program area can application program needed for storage program area, at least one function (for example sound is broadcastPlaying function, image player function etc.) etc.；Storage data area, which can be stored, uses created data (ratio according to computer installation 1Such as audio data, phone directory) etc..In addition, memory 20 may include high-speed random access memory, it can also include non-easyThe property lost memory, such as hard disk, memory, plug-in type hard disk, intelligent memory card (Smart Media Card, SMC), secure digital(Secure Digital, SD) card, flash card (Flash Card), at least one disk memory, flush memory device or otherVolatile solid-state part.
If the integrated module/unit of the computer installation 1 is realized in the form of SFU software functional unit and as independenceProduct when selling or using, can store in a computer readable storage medium.Based on this understanding, of the inventionIt realizes all or part of the process in above-described embodiment method, can also instruct relevant hardware come complete by computer programAt the computer program can be stored in a computer readable storage medium, which is being executed by processorWhen, it can be achieved that the step of above-mentioned each embodiment of the method.Wherein, the computer program includes computer program code, describedComputer program code can be source code form, object identification code form, executable file or certain intermediate forms etc..The meterCalculation machine readable medium may include: can carry the computer program code any entity or device, recording medium, USB flash disk,Mobile hard disk, magnetic disk, CD, computer storage, read-only memory (ROM, Read-Only Memory), random access memoryDevice (RAM, Random Access Memory), electric carrier signal, telecommunication signal and software distribution medium etc..It needs to illustrateIt is that the content that the computer-readable medium includes can be fitted according to the requirement made laws in jurisdiction with patent practiceWhen increase and decrease, such as in certain jurisdictions, according to legislation and patent practice, computer-readable medium does not include electric carrier wave letterNumber and telecommunication signal.
In several embodiments provided by the present invention, it should be understood that disclosed computer installation and method, it can be withIt realizes by another way.For example, computer installation embodiment described above is only schematical, for example, describedThe division of unit, only a kind of logical function partition, there may be another division manner in actual implementation.
It, can also be in addition, each functional unit in each embodiment of the present invention can integrate in same treatment unitIt is that each unit physically exists alone, can also be integrated in same unit with two or more units.Above-mentioned integrated listMember both can take the form of hardware realization, can also realize in the form of hardware adds software function module.
It is obvious to a person skilled in the art that invention is not limited to the details of the above exemplary embodiments, Er QieIn the case where without departing substantially from spirit or essential attributes of the invention, the present invention can be realized in other specific forms.Therefore, no matterFrom the point of view of which point, the present embodiments are to be considered as illustrative and not restrictive, and the scope of the present invention is by appended powerBenefit requires rather than above description limits, it is intended that all by what is fallen within the meaning and scope of the equivalent elements of the claimsVariation is included in the present invention.Any reference signs in the claims should not be construed as limiting the involved claims.ThisOutside, it is clear that one word of " comprising " does not exclude other units or steps, and odd number is not excluded for plural number.It is stated in computer installation claimMultiple units or computer installation can also be implemented through software or hardware by the same unit or computer installation.TheOne, the second equal words are used to indicate names, and are not indicated any particular order.
Finally it should be noted that the above examples are only used to illustrate the technical scheme of the present invention and are not limiting, although referencePreferred embodiment describes the invention in detail, those skilled in the art should understand that, it can be to of the inventionTechnical solution is modified or equivalent replacement, without departing from the spirit and scope of the technical solution of the present invention.