Method and device for displaying picture in webpage, and terminal

A picture display and picture technology, which is applied in special data processing applications, instruments, electrical digital data processing, etc., can solve problems such as web page stuck, too many resources, and slow picture display speed, so as to reduce the occupation of resources and speed up the speed Effect

Inactive Publication Date: 2013-12-18
XIAOMI INC
View PDF17 Cites 31 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0005] When using the IMG tag and CSS to display pictures in a webpage, it is necessary to render and display the picture in the display area of ​​the webpage where the picture is located according to the original size of the picture. For a display device with a relatively low screen resolution, it takes up too many resources. As a result, the display speed of pictures is slow, so when opening a web page with many pictures, it may cause the displayed web page to freeze

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Method and device for displaying picture in webpage, and terminal
  • Method and device for displaying picture in webpage, and terminal
  • Method and device for displaying picture in webpage, and terminal

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0054]An embodiment of the present invention provides a method for displaying pictures in a web page, see figure 1 , the method flow includes:

[0055] 101: Create a canvas with the same size as the display area in the image display area of ​​the webpage;

[0056] 102: Obtain the data to be rendered of the image, and adjust the obtained data to be rendered of the image according to the screen resolution;

[0057] 103: Render the data to be rendered of the adjusted picture in the created canvas, and display the picture in the webpage.

[0058] In the method provided by the embodiment of the present invention, a canvas with the same size as the display area is created in the display area of ​​the picture in the webpage, and after the data to be rendered of the picture is acquired, the data to be rendered of the acquired picture is adjusted according to the screen resolution ; Then render the adjusted data to be rendered in the created canvas, so that the size of the data to be...

Embodiment 2

[0060] In combination with the content of the first embodiment above, the embodiment of the present invention provides a method for displaying pictures in a web page. see figure 2 , the method flow includes:

[0061] 201: Create a canvas with the same size as the display area in the display area of ​​the picture in the web page;

[0062] For this step, the created canvas is used to render the data to be rendered of the adjusted image in subsequent steps. Ways to create a canvas include but are not limited to: when loading a webpage, use the canvas parameter in the image display area to create a canvas with the same size as the display area. It should be noted that since the data to be rendered of the image has not been obtained, the created canvas is a blank canvas. Regarding the manner of creating the canvas, in addition to the foregoing creation manners, other manners may also be adopted, which are not specifically limited in this embodiment.

[0063] For ease of unders...

Embodiment 3

[0085] In combination with the content of the first embodiment above, the embodiment of the present invention provides a method for displaying pictures in a web page. see Figure 4 , the method flow includes:

[0086] 401: Create a canvas with the same size as the display area in the image display area of ​​the web page;

[0087] For this step, the created canvas is used to render the data to be rendered of the adjusted image in subsequent steps. Ways to create a canvas include but are not limited to: when loading a webpage, use the canvas parameter in the image display area to create a canvas with the same size as the display area. It should be noted that since the data to be rendered of the image has not been obtained, the created canvas is a blank canvas. Regarding the manner of creating the canvas, in addition to the foregoing creation manners, other manners may also be adopted, which are not specifically limited in this embodiment.

[0088] For ease of understanding, ...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

Abstract

The embodiment of the invention discloses a method and a device for displaying a picture in a webpage, and a terminal, and belongs to the field of digital image processing. The method comprises the following steps of creating canvas of which the size is the same as that of a display area in the display area of the picture in the webpage; acquiring the data to be rendered of the picture, and regulating the acquired data to be rendered of the picture according to screen resolution; rendering the regulated data to be rendered of the picture in the created canvas, and displaying the picture in the webpage. According to the method, the device and the terminal, the canvas of which the size is the same as that of the display area is created in the display area of the picture in the webpage, the acquired data to be rendered of the picture is regulated according to the screen resolution after the data to be rendered of the picture is acquired, the regulated data to be rendered of the picture is rendered in the created canvas, and the picture is displayed in the webpage, so that the size of the data to be rendered of the picture can be adaptively regulated according to the screen resolution, and the picture can be rapidly displayed for display equipment with lower screen resolution.

Description

technical field [0001] The invention relates to the field of digital image processing, in particular to a method, device and terminal for displaying pictures in a webpage. Background technique [0002] With the continuous development of information technology, people use mobile devices more frequently to handle daily affairs. Handling daily affairs is often inseparable from the help of the Internet, which has prompted more and more websites to support web browsing on mobile devices. Operations such as scrolling the webpage and zooming the page during the browsing process will cause the native application software of the mobile device to display the webpage, and pictures in the webpage are one of the contents that occupy more resources. How to efficiently display pictures in a web page so as to quickly connect to the Internet is a problem that people need to solve. [0003] At present, the native application software of the mobile device has two ways to display the pictures...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
Patent Type & Authority Applications(China)
IPC IPC(8): G06F17/30
Inventor 任远姚丽梅王宗妮
Owner XIAOMI INC
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap