CN114969590B - Picture display processing method, device and medium - Google Patents
Picture display processing method, device and medium Download PDFInfo
- Publication number
- CN114969590B CN114969590B CN202210574341.4A CN202210574341A CN114969590B CN 114969590 B CN114969590 B CN 114969590B CN 202210574341 A CN202210574341 A CN 202210574341A CN 114969590 B CN114969590 B CN 114969590B
- Authority
- CN
- China
- Prior art keywords
- original picture
- container
- picture
- aspect ratio
- loading
- 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
- 238000003672 processing method Methods 0.000 title abstract description 6
- 238000000034 method Methods 0.000 claims abstract description 43
- 238000012544 monitoring process Methods 0.000 claims abstract description 18
- 238000010586 diagram Methods 0.000 claims description 18
- 239000007787 solid Substances 0.000 claims description 4
- 238000004590 computer program Methods 0.000 description 7
- 230000008569 process Effects 0.000 description 7
- 230000006870 function Effects 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 4
- 230000000694 effects Effects 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 239000012141 concentrate Substances 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45533—Hypervisors; Virtual machine monitors
- G06F9/45537—Provision of facilities of other operating environments, e.g. WINE
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Processing Or Creating Images (AREA)
Abstract
The application discloses a processing method, equipment and medium for picture display, wherein the method comprises the following steps: determining the aspect ratio of a container, setting the container to be in an elastic layout and hiding overflow attribute of the container so that the part of the original picture beyond the container is not displayed; monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height; comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture; and dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode. And the stretching deformation of the picture is effectively avoided.
Description
Technical Field
The present application relates to the field of internet technologies, and in particular, to a method, an apparatus, and a medium for processing image display.
Background
On the network platform, the information conveyed by the picture is more visual than the text information, and especially the picture which can express the essence of the main information can be used for enabling readers to concentrate the view point rapidly and generating a strong impression.
However, since the pictures have the width and height of the pictures themselves, the width and height of the pictures in the webpage can also be directly set based on css, the width and height of the pictures after setting can be changed, the pictures with different sizes are assigned to the same size as that of the picture outer container, the pictures with different sizes are distorted due to the change of the size of the outer container, and the situation that the pictures are distorted due to stretching deformation and the like occurs, so that the problems of unclear picture information transmission, disordered pages and the like are caused, and particularly, when a large number of pictures with different sizes exist in the page, the problems are more prominent.
Disclosure of Invention
The embodiment of the application provides a processing method, equipment and medium for displaying pictures, which are used for solving the problems of picture distortion caused by picture deformation, stretching and the like.
The embodiment of the application adopts the following technical scheme:
In one aspect, an embodiment of the present application provides a method for processing image display, where the method includes: determining the aspect ratio of a container, setting the container to be in an elastic layout and hiding overflow attribute of the container so that the part of the original picture beyond the container is not displayed; monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height; comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture; and dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode.
In one example, after comparing the aspect ratio of the original picture with the aspect ratio of the container, the method further comprises: if the aspect ratio of the container is smaller than or equal to the aspect ratio of the original picture, dynamically setting the height of the original picture to be 100%; and dynamically setting the cascading style sheet attribute of the container as a horizontal centering mode justify-content: center so that the original picture is displayed in the container in a left-right centering mode.
In one example, the monitoring the loading event of the original picture, and determining that the original picture is loaded is completed specifically includes: setting the background of the container as a picture loading diagram so as to display the picture loading diagram when the original picture is loaded; judging the loading state of the original picture according to the pre-added preset loading attribute of the original picture; initializing the original picture state in loading into an empty string; and acquiring the loading state by monitoring the loading event of the original picture, determining that the original picture is loaded according to the loading state, and removing the picture loading picture of the container.
In one example, the method further comprises: and according to the loading state, determining that the original picture is not loaded, removing the picture loading picture of the container, and displaying the picture after the loading failure.
In one example, after the determining that the original picture is loaded, the method further includes: determining plug-in components for removing the background of the original picture; the original address of the original picture and the api key and API SECRET when the plug-in is registered are used as parameters to be transmitted into an interface of the plug-in; when the interface returns success, acquiring an encoded image of the original picture after removing the background; and generating the background of the container through the background attribute of the cascading style sheet to replace the background in the original picture.
In one example, the method further comprises: and when the interface returns failure, determining that the interface is failed in matting, and displaying the picture after the loading failure.
In one example, the original picture is a portrait picture, and the background of the container is a preset picture or a solid color.
In one example, the method further comprises: if a plurality of original pictures need to be loaded, generating an array for the plurality of original pictures; and in the array, generating a monitoring loading event script of each original picture, and adding a preset loading attribute for each original picture.
On the other hand, an embodiment of the present application provides a processing device for displaying a picture, including: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor to enable the at least one processor to: determining the aspect ratio of a container, setting the container to be in an elastic layout and hiding overflow attribute of the container so that the part of the original picture beyond the container is not displayed; monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height; comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture; and dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode.
In another aspect, an embodiment of the present application provides a non-volatile computer storage medium for processing image display, storing computer executable instructions, where the computer executable instructions are configured to: determining the aspect ratio of a container, setting the container to be in an elastic layout and hiding overflow attribute of the container so that the part of the original picture beyond the container is not displayed; monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height; comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture; and dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode.
The above at least one technical scheme adopted by the embodiment of the application can achieve the following beneficial effects:
According to the embodiment of the application, the aspect ratio of the original picture is compared with the aspect ratio of the container, and the cascading style sheet attribute of the container is dynamically set, so that an adaptive container is provided for the original pictures with different sizes, the sizes of the original pictures presented in the container can be unified, and the main body part of the original picture is displayed. The original pictures with different sizes are ensured, and the visual effect is unified.
Drawings
In order to more clearly illustrate the technical solution of the present application, some embodiments of the present application will be described in detail below with reference to the accompanying drawings, in which:
fig. 1 is a flow chart of a processing method for displaying pictures according to an embodiment of the present application;
fig. 2 is a schematic diagram illustrating an up-down centering of an original picture according to an embodiment of the present application;
fig. 3 is a schematic diagram of left-right centering of an original picture according to an embodiment of the present application;
Fig. 4 is a schematic structural diagram of a processing device for displaying pictures according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the technical solutions of the present application will be clearly and completely described below with reference to specific embodiments and corresponding drawings. It will be apparent that the described embodiments are only some, but not all, embodiments of the application. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.
Some embodiments of the present application are described in detail below with reference to the accompanying drawings.
Fig. 1 is a flow chart of a processing method for displaying pictures according to an embodiment of the present application. The process may be performed by computing devices in the respective areas, with some input parameters or intermediate results in the process allowing manual intervention adjustments to help improve accuracy.
The implementation of the analysis method according to the embodiment of the present application may be a terminal device or a server, which is not particularly limited in the present application. For ease of understanding and description, the following embodiments are described in detail with reference to a server.
It should be noted that the server may be a single device, or may be a system formed by a plurality of devices, that is, a distributed server, which is not particularly limited in the present application.
The flow in fig. 1 may include the steps of:
s102: and determining the aspect ratio of the container, setting the container to be in an elastic layout and hiding the overflow attribute of the container so that the part of the original picture beyond the container is not displayed. Wherein, the container is set as a flex layout, and an overflow: hidden attribute is set.
S104: monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height. And adopting image.onload to monitor the picture loading event.
In some embodiments of the present application, due to network limitation or self-linking of the original picture, the original picture may consume time, so that before the loading is completed, the original picture may be displayed in blank, and the loading failure of the original picture may also occur occasionally, so that the loading failure identifier of the original picture may occur. It should be noted that the completion of the original picture loading means that the original picture loading was successful.
Specifically, setting the background of the container as a picture loading diagram, displaying the picture loading diagram when loading the original picture, judging the loading state of the original picture according to the pre-added preset loading attribute of the original picture, initializing the loaded original picture state into an empty character string, finally, acquiring the loading state by monitoring the loading event of the original picture, determining that the loading of the original picture is completed according to the loading state, and removing the picture loading diagram of the container. Wherein, the attribute imageLoadState is added to determine the loading state, if the picture is loaded successfully, the setting imageLoadState is 1, and the loading failure setting imageLoadState is 2.
If a plurality of original pictures need to be loaded, generating an array for the plurality of original pictures, generating a monitoring loading event script of each original picture in the array, and adding a preset loading attribute for each original picture.
Further, according to the loading state, the fact that the original picture is not loaded is determined to be complete, the picture loading diagram of the container is removed, and the picture after the loading failure is displayed.
According to the embodiment of the application, the preloaded picture is displayed when the original picture is preloaded, and the picture is switched to be displayed when the original picture fails to be loaded or is converted, namely, the transitional animation effect before the picture is loaded and the default picture display after the picture fails to be loaded are provided, so that a good preview experience is provided for a user, and the whole life cycle processing of the picture loading is completed.
In the embodiment of the application, scenes with uniform background requirements, such as credentials, company background pictures and the like, have no function of directly converting original pictures (such as common people pictures) into required pictures, and the original pictures need to be processed one by one in the traditional mode, so that a large amount of time and labor are consumed if the number of the original pictures is large.
Therefore, the plug-in for removing the background of the original picture can be used for processing the original picture, eliminating the background of the original picture and switching to the required background. For example, the face++ plugin processes the photo (face++ is a plugin for quickly removing the background of the portrait), eliminates the background of the person, and switches to the background of the photo.
Specifically, the original address of the original picture and the api key and API SECRET when the plug-in is registered are used as the interfaces of the parameter input plug-in, and when the interfaces return successfully, the coded image of the original picture after the background is removed is obtained. If the interface returns successfully, the returned body contains a body_image field, that is, a base64 encoded image after the background is removed.
The background of the container is generated by layering the background properties of the style sheet to replace the background in the original picture. For example, after conversion, a portrait picture with the background removed is obtained, and the background is added as a solid color, or the background is not limited to the solid color, the gradual change, the position in a container such as an image, or the like, and the background can be a picture. The background of the container can be freely set through the background attribute of css, the background color of the container can be set through background-color, and the background picture of the container can be set through background-image.
And when the interface returns failure, determining that the interface is in fault, and displaying the picture after the loading failure. For example, because the image requirements are not met, the face++ also has the condition of image processing failure, whether the interface is successful in matting can be judged according to the return value error_message of the plug-in interface, and if the interface is unsuccessful, the image after loading failure is displayed.
S106: comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture.
S108: and dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode. Wherein the up-down centering display is shown in fig. 2. In fig. 2, the middle frame is the size of the container, and the peripheral frame is the size of the original picture.
In an embodiment of the present application, if the aspect ratio of the container is less than or equal to the aspect ratio of the original picture, the height of the original picture is dynamically set to 100%.
The cascading style sheet property of the container is dynamically set as a horizontal centering manner justify-content: center, so that the original picture is centered left and right in the container. Wherein the up-down centering display is shown in fig. 3. In fig. 3, the middle frame is the size of the container, and the peripheral frame is the size of the original picture.
According to the embodiment of the application, the image can be ensured to be cut at a minimum cost under the condition of no stretching deformation, and the middle content of the image is displayed to the greatest extent.
It should be noted that, although the embodiment of the present application is described with reference to fig. 1 to sequentially describe steps S102 to S108, this does not represent that steps S102 to S108 must be performed in strict sequence. The steps S102 to S108 are sequentially described according to the sequence shown in fig. 1 according to the embodiment of the present application, so as to facilitate the understanding of the technical solution of the embodiment of the present application by those skilled in the art. In other words, in the embodiment of the present application, the sequence between the steps S102 to S108 may be appropriately adjusted according to the actual needs.
By the method of fig. 1, in a container with a fixed width and height, pictures are not stretched and deformed, main parts of the pictures are displayed, and the pictures are displayed in the middle up, down, left and right, so that a self-adaptive container is provided for original pictures with different sizes, the sizes of the original pictures presented in the container can be unified, the main parts of the original pictures are displayed, and the unification of the original pictures with different sizes in visual effect is ensured.
Based on the same thought, some embodiments of the present application also provide a device and a non-volatile computer storage medium corresponding to the above method.
Fig. 4 is a schematic structural diagram of a processing device corresponding to a picture display according to an embodiment of the present application, where the device includes:
At least one processor; and
A memory communicatively coupled to the at least one processor; wherein,
The memory stores instructions executable by the at least one processor to enable the at least one processor to:
determining the aspect ratio of a container, setting the container to be in an elastic layout and hiding overflow attribute of the container so that the part of the original picture beyond the container is not displayed;
monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height;
comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture;
And dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode.
Some embodiments of the present application provide a non-volatile computer storage medium for processing a display of a picture, storing computer-executable instructions configured to:
determining the aspect ratio of a container, setting the container to be in an elastic layout and hiding overflow attribute of the container so that the part of the original picture beyond the container is not displayed;
monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height;
comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture;
And dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode.
The embodiments of the present application are described in a progressive manner, and the same and similar parts of the embodiments are all referred to each other, and each embodiment is mainly described in the differences from the other embodiments. In particular, for the apparatus and medium embodiments, the description is relatively simple, as it is substantially similar to the method embodiments, with reference to the section of the method embodiments being relevant.
The devices and media provided in the embodiments of the present application are in one-to-one correspondence with the methods, so that the devices and media also have similar beneficial technical effects as the corresponding methods, and since the beneficial technical effects of the methods have been described in detail above, the beneficial technical effects of the devices and media are not repeated here.
It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may 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, and the like) having computer-usable program code embodied therein.
The present 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 flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may 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, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
In one typical configuration, a computing device includes one or more processors (CPUs), input/output interfaces, network interfaces, and memory.
The memory may include volatile memory in a computer-readable medium, random Access Memory (RAM) and/or nonvolatile memory, such as Read Only Memory (ROM) or flash memory (flash RAM). Memory is an example of computer-readable media.
Computer readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of storage media for a computer include, but are not limited to, phase change memory (PRAM), static Random Access Memory (SRAM), dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium, which can be used to store information that can be accessed by a computing device. Computer-readable media, as defined herein, does not include transitory computer-readable media (transmission media), such as modulated data signals and carrier waves.
It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article or apparatus that comprises the element.
The foregoing is merely exemplary of the present application and is not intended to limit the present application. Various modifications and variations of the present application will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the technical principle of the present application should fall within the protection scope of the present application.
Claims (10)
1. A method for processing a display of a picture, the method comprising:
determining the aspect ratio of a container, setting the container to be in an elastic layout and hiding overflow attribute of the container so that the part of the original picture beyond the container is not displayed;
monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height;
comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture;
And dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode.
2. The method of claim 1, wherein after comparing the aspect ratio of the original picture to the aspect ratio of the container, the method further comprises:
If the aspect ratio of the container is smaller than or equal to the aspect ratio of the original picture, dynamically setting the height of the original picture to be 100%;
and dynamically setting the cascading style sheet attribute of the container as a horizontal centering mode justify-content: center so that the original picture is displayed in the container in a left-right centering mode.
3. The method according to claim 1, wherein the monitoring the loading event of the original picture, determining that the loading of the original picture is completed, specifically comprises:
Setting the background of the container as a picture loading diagram so as to display the picture loading diagram when the original picture is loaded;
Judging the loading state of the original picture according to the pre-added preset loading attribute of the original picture;
initializing the original picture state in loading into an empty string;
and acquiring the loading state by monitoring the loading event of the original picture, determining that the original picture is loaded according to the loading state, and removing the picture loading picture of the container.
4. A method according to claim 3, characterized in that the method further comprises:
and according to the loading state, determining that the original picture is not loaded, removing the picture loading picture of the container, and displaying the picture after the loading failure.
5. A method according to claim 3, wherein after said determining that said original picture loading is complete, the method further comprises:
Determining plug-in components for removing the background of the original picture;
the original address of the original picture and the api key and API SECRET when the plug-in is registered are used as parameters to be transmitted into an interface of the plug-in;
when the interface returns success, acquiring an encoded image of the original picture after removing the background;
And generating the background of the container through the background attribute of the cascading style sheet to replace the background in the original picture.
6. The method of claim 5, wherein the method further comprises:
and when the interface returns failure, determining that the interface is failed in matting, and displaying the picture after the loading failure.
7. The method of claim 5, wherein the original picture is a portrait picture and the background of the container is a pre-set picture or a solid color.
8. The method according to claim 1, wherein the method further comprises:
if a plurality of original pictures need to be loaded, generating an array for the plurality of original pictures;
And in the array, generating a monitoring loading event script of each original picture, and adding a preset loading attribute for each original picture.
9. A processing apparatus for displaying pictures, comprising:
At least one processor; and
A memory communicatively coupled to the at least one processor; wherein,
The memory stores instructions executable by the at least one processor to enable the at least one processor to:
determining the aspect ratio of a container, setting the container to be in an elastic layout and hiding overflow attribute of the container so that the part of the original picture beyond the container is not displayed;
monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height;
comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture;
And dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode.
10. A non-transitory computer storage medium storing computer executable instructions for processing a display of a picture, the computer executable instructions configured to:
determining the aspect ratio of a container, setting the container to be in an elastic layout and hiding overflow attribute of the container so that the part of the original picture beyond the container is not displayed;
monitoring a loading event of the original picture, determining that the original picture is loaded, acquiring the width and the height of the original picture, and obtaining the aspect ratio of the original picture according to the width and the height;
comparing the aspect ratio of the original picture with the aspect ratio of the container, and dynamically setting the width of the original picture to be 100% if the aspect ratio of the container is larger than the aspect ratio of the original picture;
And dynamically setting the cascading style sheet attribute of the container to be an align-item in a vertical centering mode, so that the original picture is displayed in the container in a vertically centering mode.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210574341.4A CN114969590B (en) | 2022-05-25 | 2022-05-25 | Picture display processing method, device and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210574341.4A CN114969590B (en) | 2022-05-25 | 2022-05-25 | Picture display processing method, device and medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114969590A CN114969590A (en) | 2022-08-30 |
| CN114969590B true CN114969590B (en) | 2024-04-26 |
Family
ID=82956211
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210574341.4A Active CN114969590B (en) | 2022-05-25 | 2022-05-25 | Picture display processing method, device and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114969590B (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109086374A (en) * | 2018-07-23 | 2018-12-25 | 北京达佳互联信息技术有限公司 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
| CN109523591A (en) * | 2018-11-21 | 2019-03-26 | 北京锐安科技有限公司 | Processing method, device, equipment and the storage medium of picture |
| CN113449222A (en) * | 2021-06-17 | 2021-09-28 | 青岛海尔科技有限公司 | Picture display method, picture display device and electronic equipment |
| CN113835699A (en) * | 2021-08-31 | 2021-12-24 | 五八有限公司 | Picture loading processing method and device, electronic equipment and storage medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104732486B (en) * | 2015-03-23 | 2017-10-03 | 海信集团有限公司 | The display methods and device of a kind of picture |
-
2022
- 2022-05-25 CN CN202210574341.4A patent/CN114969590B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109086374A (en) * | 2018-07-23 | 2018-12-25 | 北京达佳互联信息技术有限公司 | Webpage loading display method, device, terminal device and readable storage medium storing program for executing |
| CN109523591A (en) * | 2018-11-21 | 2019-03-26 | 北京锐安科技有限公司 | Processing method, device, equipment and the storage medium of picture |
| CN113449222A (en) * | 2021-06-17 | 2021-09-28 | 青岛海尔科技有限公司 | Picture display method, picture display device and electronic equipment |
| CN113835699A (en) * | 2021-08-31 | 2021-12-24 | 五八有限公司 | Picture loading processing method and device, electronic equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114969590A (en) | 2022-08-30 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105204853A (en) | Canvas drawing method and device of web browser | |
| CN107169007B (en) | Display interface setting method and device of mobile terminal | |
| CN104391896A (en) | Plane printed product typesetting method and system based on webpage | |
| CN110362547A (en) | Coding, parsing, storage method and the device of journal file | |
| US20240107050A1 (en) | Image coding/decoding method, coder, decoder, and storage medium | |
| CN111443974A (en) | Android device screen adapting method, related device and readable storage medium | |
| CN110007915B (en) | Linear layout method and device of self-adaptive sub-control | |
| CN107423366B (en) | Carousel graph switching method and device | |
| CN114969590B (en) | Picture display processing method, device and medium | |
| CN110572713B (en) | Transcoding method and processing terminal for adaptive video bandwidth ratio | |
| CN112714338A (en) | Video transmission method, video playing method, video transmission device, video playing device, computer equipment and storage medium | |
| CN105389308A (en) | Display processing method and device for web pages | |
| CN112527424A (en) | Control method and device for popup window | |
| CN110891195A (en) | Method, device and equipment for generating screen image and storage medium | |
| CN114979123A (en) | System and method for preventing high-definition picture from being copied and accessing on demand | |
| CN112799745B (en) | Page display control method and device | |
| CN108197248B (en) | Method, device and system for displaying 3D (three-dimensional) 2D webpage | |
| CN110662088B (en) | Duplicate removal method and processing terminal for preventing video from being transcoded repeatedly | |
| CN110020285B (en) | Histogram processing method and device | |
| CN113068050A (en) | Method and device for determining sample point adaptive compensation mode of tree-shaped coding block | |
| CN111050221A (en) | Method and system for acquiring focus of multi-picture navigation interface of set top box | |
| CN111666515A (en) | Page element transformation method and device | |
| CN110992447B (en) | Image-text adaptation method, device, storage medium and equipment | |
| CN112492250B (en) | Method and device for adapting resolution of transmitting and receiving ends of image transmission system | |
| CN112597334B (en) | Data processing method of communication data center |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |