A device end page picture adaptation method and system

Abstract

The application relates to a device end page picture adaptation method and system. H5 requests are intercepted, and it is judged according to the H5 requests whether corresponding picture file resources exist in device end local caches. The picture content in a page loading process is relatively independently and asynchronously processed through interception of a picture request part in the H5 page request, pictures are customized and loaded with any width and height dimensions in a mobile terminal, the pictures are not dependent on additional storage spaces or function service changes of a server end, various picture resolution loading schemes can be supported, and the picture loading speed is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of web front-end and mobile page development, and particularly relates to a device-side page picture adaptation method and system. BACKGROUND

[0002] H5 is a widely used technical solution for mobile device web page content presentation, which can provide adaptive functions for different screen sizes for mobile phones, tablets and other devices, thereby effectively improving user experience. In order to achieve good web page presentation effect, H5 pages need to implement corresponding adaptation for different pictures on mobile devices to enable the pictures to be normally displayed on various devices, especially to adapt and present for different device screen sizes and resolutions.

[0003] Under the prior art, H5 uses the img tag to specify the picture address src to obtain the picture from the server. In order to adapt to different screen sizes and resolutions of mobile devices, the server needs to pre-configure multiple resolution size options for each picture, and the H5 selects the appropriate resolution picture to load according to the actual layout size of the page. Under this processing mode, different resolution selection processing needs to be performed on the picture in advance, which not only increases the workload of designers, but also can only cover a limited number of typical scenarios and occupies a large amount of server storage space.

[0004] Another existing processing mode adopts a responsive technical solution, the server only uploads a standard picture, and the device-side H5 uploads the picture width and height size requirement when requesting the picture, and the server sends the standard picture to the device after scaling adjustment. This processing mode can reduce the workload of designers and does not occupy additional server storage space, but requires the server to increase the picture adjustment processing service and dynamically process the picture according to the H5 request, which will significantly increase the server pressure and require the support of the backend service. SUMMARY

[0005] To solve the problems of the prior art, the present application provides a device-side page picture adaptation method and system, which intercepts the picture request part in the H5 page request, specifies any width and height size customized loading picture in the mobile terminal, does not depend on additional server storage space or function service modification, supports various picture resolution loading schemes, and helps to improve the picture loading speed.

[0006] To achieve the above purpose, the technical solution adopted by the present application includes:

[0007] A device-side page picture adaptation method, characterized in that it comprises:

[0008] S1, intercepting an H5 request, and judging whether the H5 request includes a picture request;

[0009] S2, when judging that the H5 request comprises the picture request, identifying a corresponding picture file name according to the picture request, the picture file name comprising a picture size label;

[0010] S3, judging whether a first cache file corresponding to the picture file name exists in the local cache of the device, when judging that the first cache file corresponding to the picture file name exists in the local cache of the device, using the first cache file as an adaptive file to feedback the H5 request;

[0011] S4, when judging that the first cache file corresponding to the picture file name does not exist in the local cache of the device, further judging whether a second cache file without the picture size label exists in the local cache of the device, when judging that the second cache file without the picture size label exists in the local cache of the device, performing a size adjustment operation on the second cache file according to the picture size label to generate an adaptive file and feedback the H5 request;

[0012] S5, when judging that the second cache file without the picture size label does not exist in the local cache of the device, sending a picture request to the server, performing a size adjustment operation on a feedback picture file sent by the server according to the picture size label to generate an adaptive file and feedback the H5 request.

[0013] Further, the step S1 further comprises:

[0014] when judging that the H5 request does not comprise the picture request, sending the H5 request to the server.

[0015] Further, the second cache file comprises a standard file corresponding to the picture file name, and / or a picture file generated by adjusting the standard file according to different picture size labels.

[0016] Further, the step S5 further comprises:

[0017] judging whether the feedback picture file sent by the server matches the picture size label;

[0018] when judging that the feedback picture file sent by the server matches the picture size label, directly using the feedback picture file as an adaptive file and feedback the H5 request;

[0019] when judging that the feedback picture file sent by the server does not match the picture size label, performing a size adjustment operation to generate an adaptive file and feedback the H5 request.

[0020] Further, the step S5 further comprises:

[0021] saving the feedback picture file sent by the server as a second cache file to the local cache of the device.

[0022] Further, the method further comprises:

[0023] Renaming the adaptation file using the picture file name and saving to the local cache of the device end.

[0024] The application also relates to a device end page picture adaptation system, characterized in that the system comprises the following modules.

[0025] The request identification module is used for intercepting the H5 request and judging whether the H5 request comprises a picture request.

[0026] The request analysis module is used for identifying a corresponding picture file name according to the picture request, wherein the picture file name comprises a picture size label.

[0027] The picture cache module is used for locally caching the first cache file and the second cache file at the device end.

[0028] The picture adjustment module is used for performing a size adjustment operation on the second cache file according to the picture size label.

[0029] The remote request module is used for sending the picture request to the server end and obtaining a feedback picture file sent by the server end.

[0030] The application also relates to a computer readable storage medium, characterized in that the storage medium stores a computer program, and the computer program is executed by a processor to realize the above method.

[0031] The application also relates to an electronic device, characterized in that the device comprises a processor and a memory.

[0032] The memory is used for storing the H5 request, the first cache file and the second cache file.

[0033] The processor is used for calling the H5 request, the first cache file and the second cache file to execute the above method.

[0034] The application also relates to a computer program product, comprising a computer program and / or instructions, characterized in that the computer program and / or instructions are executed by a processor to realize the steps of the above method.

[0035] The application has the following beneficial effects.

[0036] The device-side page image adaptation method and system described in this invention intercepts the image request portion of H5 page requests, prioritizes obtaining standard images from the server, caches them locally on the mobile device, and then loads customized images with arbitrary width and height dimensions to respond to H5 page requests within the mobile device. This approach does not rely on additional server-side storage space or functional service modifications, supports loading schemes for various image resolutions, and helps improve image loading speed. By applying the image adaptation method of this invention, H5 performance can be extended, making H5 page loading smoother and reducing server resource consumption. Attached Figure Description

[0037] Figure 1 This is a schematic diagram of the device-side page image adaptation method of the present invention.

[0038] Figure 2 This is a schematic diagram of the device-side page image adaptation system structure of the present invention. Detailed Implementation

[0039] To better understand the content of this invention, a detailed description will be provided in conjunction with the accompanying drawings and embodiments.

[0040] The first aspect of this invention relates to a process flow as follows: Figure 1 The device-side page image adaptation methods shown include:

[0041] S1. Intercept the H5 request and determine whether the H5 request includes an image request. Preferably, the image request includes various image loading attributes, such as width (w), height (h), and file size limit (maxSize).

[0042] When it is determined that the H5 request does not include image requests, an H5 request is sent to the server, and the browser processes the page request normally.

[0043] Specifically, taking the Android processing as an example, all H5 requests pass through the `shouldInterceptRequest` method of `webView`. Therefore, this method can check whether the requested URL is an image resource. If the request address ends with an image format such as `jpg` or `png`, it is determined to be an image request and intercepted; otherwise, it is not intercepted.

[0044] S2. When it is determined that the H5 request includes an image request, the corresponding image file name is identified according to the image request, and the image file name includes an image size tag.

[0045] Specifically, assuming the H5 request (image request) is the URL: https: / / resource.xxx.com / icon01.jpg, performing MD5 processing on this address will give you the original filename: for example, srcImg_md5. Concatenating the request parameters (image size label) will give you the actual response file: srcImg_md5_100_200.

[0046] S3. Determine if a first cache file with the corresponding image file name exists in the device's local cache. If the device's local cache does exist, use the first cache file as the adaptation file to respond to the H5 request.

[0047] Specifically, in the example above, check if the file srcImg_md5_100_200 exists in the local cache. If it does, return the file directly. Otherwise, proceed to the next step.

[0048] S4. When it is determined that the first cache file with the corresponding image file name does not exist in the local cache on the device, it is further determined whether the second cache file without image size label exists in the local cache on the device. When it is determined that the second cache file without image size label exists in the local cache on the device, the size adjustment operation is performed on the second cache file according to the image size label to generate an adaptation file and send back the H5 request.

[0049] The second cache file includes a standard file corresponding to the image file name, and / or an image file generated by adjusting the standard file according to different image size tags.

[0050] Preferably, the adapter file is renamed using the image file name and saved to the local cache on the device. When the same image is requested later, the saved file can be used as the first cache file for a fast response.

[0051] Specifically, in the example above, check if the file srcImg_md5 exists in the local cache. If it does, scale the image, generate a new file srcImg_md5_100_200, and return its contents. If not, proceed to the next step.

[0052] S5. When it is determined that there is no second cache file without image size tags in the local cache on the device, an image request is sent to the server. The size of the image file sent by the server is adjusted according to the image size tags to generate an adaptation file and an H5 request is sent back.

[0053] Preferably, after receiving the feedback image file sent by the server, it is determined whether the feedback image file sent by the server matches the image size label; if it is determined that the feedback image file sent by the server matches the image size label, the feedback image file is directly used as the adaptation file and an H5 request is sent; if it is determined that the feedback image file sent by the server does not match the image size label, a size adjustment operation is performed to generate an adaptation file and an H5 request is sent.

[0054] Preferably, the feedback image file sent by the server is saved as a second cache file to the local cache on the device for subsequent H5 requests.

[0055] Specifically, in the example above, the mobile device downloads the corresponding image file using the URL, caches it locally as the file srcImg_md5, then scales the image to generate a new file srcImg_md5_100_200, and returns the file.

[0056] Another aspect of the present invention relates to a device-side page image adaptation system, the structure of which is as follows: Figure 2 As shown, it includes:

[0057] The request recognition module is used to intercept H5 requests and determine whether the H5 request includes an image request.

[0058] The request parsing module is used to identify the corresponding image file name based on the image request, wherein the image file name includes an image size label;

[0059] The image caching module is used to cache the first and second cache files locally on the device.

[0060] The image adjustment module is used to perform size adjustment operations on the second cache file according to the image size label;

[0061] The remote request module is used to send image requests to the server and retrieve the image files sent back by the server.

[0062] By using this system, the aforementioned computational processing methods can be executed and the corresponding technical effects can be achieved.

[0063] Embodiments of the present invention also provide a computer-readable storage medium capable of implementing all the steps of the methods in the above embodiments, wherein the computer-readable storage medium stores a computer program that, when executed by a processor, implements all the steps of the methods in the above embodiments.

[0064] Embodiments of the present invention also provide an electronic device for performing the above-described method. As an implementation device for the method, the electronic device has at least a processor and a memory. In particular, the memory stores data and related computer programs required for performing the method, such as H5 requests, a first cache file, and a second cache file. The processor calls the data and programs in the memory to execute all the steps of the method and obtain the corresponding technical effect.

[0065] Preferably, the electronic device may include a bus architecture, which may include any number of interconnected buses and bridges. The bus will include various circuits linked together by one or more processors and memories. The bus may also link together various other circuits such as peripherals, voltage regulators, and power management circuits, which are well known in the art and therefore will not be described further herein. The bus interface provides an interface between the bus and the receiver and transmitter. The receiver and transmitter may be the same element, i.e., a transceiver, providing a unit for communicating with various other systems over a transmission medium. The processor is responsible for managing the bus and general processing, while the memory may be used to store data used by the processor during operation.

[0066] Additionally, the electronic device may further include components such as a communication module, an input unit, an audio processor, a display, and a power supply. The processor (or controller, operating control) used may include a microprocessor or other processor device and / or logic device, which receives input and controls the operation of various components of the electronic device; the memory may be one or more of a buffer, flash memory, hard drive, removable media, volatile memory, non-volatile memory, or other suitable devices, which can store the aforementioned data information, and may also store programs for executing the information, and the processor can execute the program stored in the memory to achieve information storage or processing, etc.; the input unit is used to provide input to the processor, for example, it can be a button or touch input device; the power supply is used to provide power to the electronic device; the display is used to display images and text, for example, it can be an LCD display. The communication module is a transmitter / receiver that transmits and receives signals via an antenna. The communication module (transmitter / receiver) is coupled to the processor to provide input signals and receive output signals, which can be the same as in conventional mobile communication terminals. Based on different communication technologies, multiple communication modules can be incorporated into the same electronic device, such as cellular network modules, Bluetooth modules, and / or wireless LAN modules. The communication module (transmitter / receiver) is also coupled to a speaker and microphone via an audio processor to provide audio output through the speaker and receive audio input from the microphone, thereby enabling typical telecommunications functions. The audio processor can include any suitable buffer, decoder, amplifier, etc. Furthermore, the audio processor is coupled to a central processing unit, enabling on-device recording via the microphone and on-device playback of stored sound via the speaker.

[0067] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0068] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A system that specifies functions in one or more boxes.

[0069] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including an instruction set implemented in a process. Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0070] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the functions specified in one or more boxes. Although preferred embodiments of the invention have been described, those skilled in the art, upon learning the basic inventive concept, can make other changes and modifications to these embodiments. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments as well as all changes and modifications falling within the scope of the invention.

[0071] The above description is merely a preferred embodiment of the present invention, but the scope of protection of the present invention is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in the present invention should be included within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method for adapting images to a device-side webpage, characterized in that, include: S1. Intercept H5 requests and determine whether the H5 request includes an image request; S2. When it is determined that the H5 request includes an image request, the corresponding image file name is identified according to the image request, and the image file name includes an image size label; S3. Determine whether the device's local cache contains a first cache file with the corresponding image file name. If the device's local cache contains a first cache file with the corresponding image file name, use the first cache file as the adaptation file to respond to the H5 request. S4. When it is determined that the first cache file with the corresponding image file name does not exist in the local cache of the device, it is further determined whether the second cache file without the image size label exists in the local cache of the device. When it is determined that the second cache file without the image size label exists in the local cache of the device, the size adjustment operation is performed on the second cache file according to the image size label to generate the adaptation file and the H5 request is returned. S5. When it is determined that there is no second cache file without image size tag in the local cache on the device, send an image request to the server, perform size adjustment operation on the image file sent by the server according to the image size tag, generate an adaptation file, and send back an H5 request. Rename the adapter file using the image filename and save it to the device's local cache. When the same image is requested later, use the saved file as the first cached file in the response.

2. The method as described in claim 1, characterized in that, Step S1 further includes: When it is determined that the H5 request does not include an image request, an H5 request is sent to the server.

3. The method as described in claim 1, characterized in that, The second cache file includes a standard file corresponding to the image file name, and / or an image file generated by adjusting the standard file according to different image size tags.

4. The method as described in claim 1, characterized in that, Step S5 further includes: Determine whether the feedback image file sent by the server matches the image size label; When it is determined that the feedback image file sent by the server matches the image size tag, the feedback image file is directly used as the adaptation file and an H5 request is sent back. When it is determined that the image file sent by the server does not match the image size label, a size adjustment operation is performed to generate an adaptation file and an H5 request is sent back.

5. The method as described in claim 1, characterized in that, Step S5 further includes: The feedback image file sent by the server is saved as a second cache file to the local cache on the device.

6. A device-side page image adaptation system, characterized in that, The method applied to any one of claims 1 to 5 includes: The request recognition module is used to intercept H5 requests and determine whether the H5 request includes an image request. The request parsing module is used to identify the corresponding image file name based on the image request, wherein the image file name includes an image size label; The image caching module is used to cache the first and second cache files locally on the device. The image adjustment module is used to perform size adjustment operations on the second cache file according to the image size label; The remote request module is used to send image requests to the server and retrieve the image files sent back by the server.

7. A computer-readable storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, implements the method of any one of claims 1 to 5.

8. An electronic device, characterized in that, Including processor and memory; The memory is used to store H5 requests, a first cache file, and a second cache file; The processor is configured to execute the method of any one of claims 1 to 5 by invoking an H5 request, a first cache file, and a second cache file.

9. A computer program product, comprising a computer program and / or instructions, characterized in that, When the computer program and / or instructions are executed by a processor, they implement the steps of the method according to any one of claims 1 to 5.

Images