Method for adaptively reading and drawing high-resolution picture

Abstract

The invention discloses a method for adaptively reading and drawing a high-resolution picture, which relates to the technical field of picture processing, and comprises the following steps of: carrying out grading and refining processing on an original picture unit in advance to obtain slice combinations of each level of resolution, and arranging the slice combinations according to pixels from small to large; calling getClient Rect to obtain a screen size width SW and a screen size SH; calling devicePixelRatio to obtain the pixel proportion P of the equipment; the display scale S of the picture drawing unit on the screen is obtained, and the resolution ratio width DW and the resolution ratio height DH needed by the picture drawing unit are calculated; according to the method and the device, the picture resource loading data is reduced, the performance requirement on the equipment is reduced, so that the picture with any resolution can be adaptively drawn on the screen without being limited by the memory of the equipment, and the effect of adaptively reading and drawing the high-resolution picture on the equipment with various performances is achieved.

Description

Technical Field

[0001] The present invention relates to the technical field of image processing, and in particular to a method for adaptively reading and drawing high-resolution images. Background Art

[0002] A high-resolution image is one that contains a large amount of pixel information per unit length or area. Resolution is usually measured in dots per inch (dpi) or pixels per inch (ppi). Generally speaking, when the resolution of an image reaches a certain value, it can be considered high resolution.

[0003] Pixels are the basic units that make up digital images, and resolution describes the distribution density of these pixels. For example, a 1920×1080 pixel picture has a resolution of 100ppi if the size is 19.2 inches×10.8 inches; if the size is reduced to 6.4 inches×3.6 inches, the resolution will increase to 300ppi. Therefore, even if the number of pixels is the same, different sizes will result in different resolutions. High resolution means more pixels to depict the details of the image. At the same time, because they contain a lot of pixel information, high-resolution images usually take up a larger storage space. For example, a normal-resolution JPEG format image may only be a few hundred KB, while a high-resolution image of the same type may reach several MB or even tens of MB.

[0004] At present, with the development of information technology, the resolution of pictures is getting higher and higher, and some pictures even reach 1 billion pixels. The performance requirements for devices that draw pictures are also getting higher, requiring higher memory or video memory. As a result, many low-performance devices, especially mobile terminals, cannot open pictures normally.

[0005] Therefore, there is an urgent need for an adaptive method for reading and drawing high-resolution images.

[0006] Currently, no effective solution has been proposed for the problems in the related technologies. Summary of the invention

[0007] In view of the problems in the related art, the present invention proposes a method for adaptively reading and drawing high-resolution images to overcome the above technical problems existing in the existing related art.

[0008] The technical solution of the present invention is achieved in this way:

[0009] A method for adaptively reading and drawing high-resolution images includes the following steps:

[0010] The original image units are pre-processed in a hierarchical manner to obtain slice combinations of each level of resolution, and are arranged from small to large pixels;

[0011] Call getClientRect to obtain the screen size width SW and screen size SH;

[0012] Call devicePixelRatio to get the device pixel ratio P;

[0013] Get the display ratio S of the drawn picture unit on the screen, and calculate the resolution width DW and height DH required for the drawn picture unit, where;

[0014] Resolution width DW, expressed as:

[0015] DW = S × SW × P;

[0016] High resolution DH, expressed as:

[0017] DH = S × SH × P;

[0018] According to the resolution width DW and height DH required for drawing the picture unit, a slice combination of the corresponding level resolution is selected, and the slice unit is taken out and drawn in blocks into the drawing area.

[0019] Furthermore, the step of obtaining the slice combination of each level of resolution comprises the following steps:

[0020] Scale the original image unit to the same aspect ratio2 n The widths of the images are 32 pixels, 64 pixels, 128 pixels, 512 pixels, 1024 pixels, and 2048 pixels.

[0021] Furthermore, the original image unit is scaled to have the same aspect ratio as described in step 2 n Multiple resolution levels of pixels, including:

[0022] If the original image unit width does not reach the resolution level, it does not need to be scaled to the resolution level;

[0023] All resolution level images are sliced ​​separately, where the size of each slice is 32x32 pixels, and the slices generated by each resolution level image are placed together to form the resolution level image, which is represented as a slice combination of a level resolution.

[0024] Furthermore, drawing the blocks into the drawing area includes the following steps:

[0025] Pre-traverse the slice combinations of each level of resolution, and select the first slice combination of the level of resolution whose width and height are respectively greater than DW and DH as the slice combination of the corresponding level of resolution;

[0026] According to the slice combination of the selected level resolution, the slice units are drawn into the drawing area respectively.

[0027] Furthermore, the step of drawing the slice units into the drawing area separately includes the following steps:

[0028] Determine whether the slice is displayed. If it is displayed, read it into the memory and draw it into the drawing area. If it is not displayed, do not process it.

[0029] Furthermore, the step of drawing the blocks into the drawing area further includes the following steps:

[0030] Release the slice units that are not used during drawing from the memory;

[0031] If the current screen size width SW and screen size SH are adjusted, repeat the steps;

[0032] If the display ratio S of the currently drawn picture unit on the screen is adjusted, repeat the steps.

[0033] Beneficial effects of the present invention:

[0034] The present invention performs resolution grading and refinement processing on the original image unit. When drawing the image unit, the required slice unit is obtained from the processed slice combination of the corresponding level resolution according to the actual required resolution, and the slice unit is drawn on the screen. The slice drawing method reduces the loading data of the image resource and reduces the performance requirements for the device, so that pictures of any size and resolution can be adaptively drawn on the screen without being limited by the device memory, so as to achieve the effect of adaptively reading and drawing high-resolution pictures on devices with various performances.

[0035] At the same time, when the slice unit is not displayed, resources are unloaded in time to reduce memory usage. The upper limit of memory used to draw pictures of any size can be controlled within the memory used to draw a picture of the entire screen size. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0037] Figure 1 is a schematic flow chart of a method for adaptively reading and drawing high-resolution images according to an embodiment of the present invention;

[0038] Figure 2A scene diagram of a method for adaptively reading and drawing high-resolution images according to an embodiment of the present invention Figure 1 ;

[0039] Figure 3 A scene diagram of a method for adaptively reading and drawing high-resolution images according to an embodiment of the present invention Figure 2 . DETAILED DESCRIPTION

[0040] The following will be combined with the accompanying drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field belong to the scope of protection of the present invention.

[0041] According to an embodiment of the present invention, a method for adaptively reading and drawing a high-resolution image is provided.

[0042] like Figure 1-Figure 3 As shown, the method for adaptively reading and drawing a high-resolution image according to an embodiment of the present invention includes the following steps:

[0043] Step S1, pre-processing the original image unit by hierarchical refinement to obtain slice combinations of each level of resolution, and arranging them from small to large pixels;

[0044] Step S101: scaling the original image unit to have the same aspect ratio n The widths of the images are 32 pixels, 64 pixels, 128 pixels, 512 pixels, 1024 pixels, and 2048 pixels.

[0045] In this technical solution, if the width of the original picture unit does not reach the resolution level, it does not need to be scaled to the resolution level. Specifically, for example, an original picture unit with a resolution of 200*300 pixels will generate three scaled resolution level pictures, namely 32 pixels, 64 pixels and 128 pixels, plus the original picture unit itself, that is, a total of 4 resolution level pictures.

[0046] Step S102, slice all the resolution level images in step S101, wherein the size of each slice is 32x32 pixels, and the slices generated by each resolution level image are placed together to form the resolution level image, which is represented as a slice combination of a level resolution. Based on the above processing, the original image unit will generate several scaled slice combinations of each level resolution.

[0047] Specifically, for example, if a picture of any resolution level is cut into 4 slices, the slices are named L_1_1, L_1_2, L_2_1 and L_2_2, respectively, indicating a combination of slices of the current level of resolution.

[0048] Step S2, calling getClientRect to obtain the screen size width SW and screen size SH;

[0049] This technical solution, getClientRect, is a method in JavaScript for obtaining the size of an element and its position relative to the viewport. The viewport is the area in the browser used to display web page content, excluding the browser's borders, menu bar, toolbar, etc.

[0050] Step S3, calling devicePixelRatio to obtain the device pixel ratio P;

[0051] In this technical solution, in the browser environment, the device pixel ratio can be obtained through devicePixelRatio. When running in the browser, the device pixel ratio of the current device will be output in the console. This value may be different on different devices. For example, it may be 1 on a normal screen device and 2 or higher on a retina screen device.

[0052] Step S4, obtaining the display ratio S of the drawn picture unit on the screen, and calculating the resolution width DW and height DH required for the drawn picture unit, wherein;

[0053] Resolution width DW, expressed as:

[0054] DW = S × SW × P;

[0055] High resolution DH, expressed as:

[0056] DH = S × SH × P;

[0057] Step S5, according to the resolution width DW and height DH required for drawing the picture unit, select a slice combination of the corresponding level of resolution, take out the slice unit, and draw it in blocks into the drawing area;

[0058] Specifically, the following steps are included:

[0059] Step S501, pre-traverse the slice combinations of each level of resolution in step S1, and select the first slice combination of the level of resolution whose width and height are respectively greater than DW and DH as the slice combination of the corresponding level of resolution;

[0060] Step S502, drawing the slice units into the drawing area respectively according to the slice combination of the selected level resolution, wherein it is judged whether the slice is displayed, if it is displayed, it is read into the memory and drawn into the drawing area, if it is not displayed, it is not processed;

[0061] Step S6, releasing the slice units not used in the drawing in step S5 from the memory;

[0062] Step S7, if the current screen size width SW and screen size SH are adjusted, repeat steps S2 to S5;

[0063] Step S8: if the display ratio S of the currently drawn picture unit on the screen is adjusted, repeat steps S2 to S5.

[0064] In summary, with the help of the above technical solution of the present invention, the following effects can be achieved:

[0065] The present invention performs resolution grading and refinement processing on the original image unit. When drawing the image unit, the required slice unit is obtained from the processed slice combination of the corresponding level resolution according to the actual required resolution, and the slice unit is drawn on the screen. The slice drawing method reduces the loading data of the image resource and reduces the performance requirements for the device, so that pictures of any size and resolution can be adaptively drawn on the screen without being limited by the device memory, so as to achieve the effect of adaptively reading and drawing high-resolution pictures on devices with various performances.

[0066] At the same time, when the slice unit is not displayed, resources are unloaded in time to reduce memory usage. The upper limit of memory used to draw pictures of any size can be controlled within the memory used to draw a picture of the entire screen size.

[0067] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. After considering the disclosure of the specification and the examples, those skilled in the art will easily think of other embodiments of the present disclosure. This application is intended to cover any modification, use or adaptation of the present disclosure, which follows the general principles of the present disclosure and includes common knowledge or customary technical means in the art that are not disclosed in the present disclosure. The specification and the examples are only regarded as exemplary, and the true scope and spirit of the present disclosure are indicated by the claims.

[0068] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for adaptively reading and drawing high-resolution images, characterized in that: The following steps are involved: The original image units are pre-processed in a hierarchical manner to obtain slice combinations of each level of resolution, and are arranged from small to large pixels; Call getClientRect to obtain the screen size width SW and screen size SH; Call devicePixelRatio to get the device pixel ratio P; Get the display ratio S of the drawn picture unit on the screen, and calculate the resolution width DW and height DH required for the drawn picture unit, where; Resolution width DW, expressed as: DW = S × SW × P; High resolution DH, expressed as: DH = S × SH × P; According to the resolution width DW and height DH required for drawing the picture unit, a slice combination of the corresponding level resolution is selected, and the slice unit is taken out and drawn in blocks into the drawing area.

2. The method for adaptively reading and drawing high-resolution images according to claim 1, characterized in that: The steps of obtaining the slice combination of each level of resolution include the following steps: Scale the original image unit to the same aspect ratio2 n The widths of the images are 32 pixels, 64 pixels, 128 pixels, 512 pixels, 1024 pixels, and 2048 pixels.

3. The method for adaptively reading and drawing high-resolution images according to claim 2, characterized in that: Scale the original image unit to the same aspect ratio as described in step 2 n Multiple resolution levels of pixels, including: If the original image unit width does not reach the resolution level, it does not need to be scaled to the resolution level; All resolution level images are sliced ​​separately, where the size of each slice is 32x32 pixels, and the slices generated by each resolution level image are placed together to form the resolution level image, which is represented as a slice combination of a level resolution.

4. The method for adaptively reading and drawing high-resolution images according to claim 1 or 3, characterized in that: Drawing the blocks into the drawing area includes the following steps: Pre-traverse the slice combinations of each level of resolution, and select the first slice combination of the level of resolution whose width and height are respectively greater than DW and DH as the slice combination of the corresponding level of resolution; According to the slice combination of the selected level resolution, the slice units are drawn into the drawing area respectively.

5. The method for adaptively reading and drawing high-resolution images according to claim 4, characterized in that: The steps of drawing the slice units into the drawing area respectively include the following steps: Determine whether the slice is displayed. If it is displayed, read it into the memory and draw it into the drawing area. If it is not displayed, do not process it.

6. The method for adaptively reading and drawing high-resolution images according to claim 5, characterized in that: Drawing the blocks into the drawing area also includes the following steps: Release the slice units that are not used during drawing from the memory; If the current screen size width SW and screen size SH are adjusted, repeat the steps; If the display ratio S of the currently drawn picture unit on the screen is adjusted, repeat the steps.

Images