Interactive image display method and system, terminal and medium

Abstract

The invention relates to the technical field of image processing, data structures and Web application, and discloses an interactive image display method and system, a terminal and a medium, and the method comprises the steps: zooming and decomposing an original image into image information of multiple levels; according to the image information of the multiple layers, the images are correspondingly divided into block-shaped images; the method comprises the following steps: coding a block picture, creating a corresponding identifier for the coded block picture, and constructing the identifier into an index structure; according to the method, a plurality of block-shaped pictures with index structures are sent to a sending receiving party according to display requirements, so that the receiving party performs image display by splicing the plurality of block-shaped pictures with the index structures, a user can freely browse different parts of the image in an interaction mode, the high-resolution image can be easily checked and analyzed, and the user experience is improved. And the rapid display of the picture is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of image processing, data structure and Web application, in particular to an interactive image display method, system, terminal and medium. BACKGROUND

[0002] For a large amount of unstructured data generated in the process of oil and gas field exploration and development, a set of high-performance, safe multi-terminal result display and data interaction association technology is needed to support cross-platform, cross-device, compatibility with various browsers, while supporting zoom in, zoom out, rotation, dragging and other operations of the map, supporting map annotation, data overlay, search, permission control and other functions. With the increase of data volume and the improvement of standardization requirements, higher requirements are put forward for quick data viewing.

[0003] Foreign existing technologies mainly focus on Office series and PDF documents, such as Microsoft Online Preview XDoc, AbcdPDF Pricing, etc., and domestic technologies include Kingsoft WPS online documents, Tencent online documents, GroupDocs.Viewer, SpreadJS, etc. These technologies are not suitable for displaying unstructured data such as well logging blueprint and core photos related to oil and gas business, and cannot meet the data viewing and data analysis needs in the process of oil and gas field development. SUMMARY

[0004] The purpose of the present application is to provide an interactive image display method, system, terminal and medium to solve the technical problem of how to improve the quick display of pictures.

[0005] The present application is realized by the following technical solutions:

[0006] In a first aspect, the present application provides an interactive image display method, comprising:

[0007] scaling and decomposing the original image into multiple levels of image information;

[0008] separating the multiple levels of image information into block pictures according to the correspondence;

[0009] encoding the block pictures, creating corresponding identifiers for the encoded block pictures, and constructing the identifiers into an index structure;

[0010] sending the block pictures with the index structure to the receiving party according to the display requirements, so that the receiving party splices the block pictures with the index structure to display the image.

[0011] Preferably, the specific process of scaling and decomposing the image into multiple levels of image information is as follows:

[0012] The pyramid model is constructed, and the pyramid model is divided into levels from bottom to bottom, wherein each level is a reduced version of the upper level;

[0013] The levels of the original picture corresponding to the pyramid model are decomposed from bottom to top.

[0014] Further, the levels of the original picture corresponding to the pyramid model are decomposed from bottom to top, and the specific formula is as follows:

[0015] new_width = previous_width * scale_factor

[0016] new_height = previous_height * scale_factor

[0017] Wherein, new_width represents the image width after scaling; new_height represents the image height after scaling; previous_width represents the original image width; previous_height represents the original image height; scale_factor represents the scaling factor.

[0018] Further, the pyramid model is constructed by a resampling method, and the resampling method includes bilinear interpolation, and the formula is as follows:

[0019] new_pixel_value = (1-fractional_x)*(1-fractional_y)*pixel_value_top_left + fractional_x*(1-fractional_y)*pixel_value_top_right + (1-fractional_x)*fractional_y*pixel_value_bottom_left + fractional_x*fractional_y*pixel_value_bottom_right

[0020] Wherein, new_pixel_value represents the new pixel value of the image; fractional_x represents the variable x; fractional_y represents the variable y; pixel_value_top_left represents the top left pixel value of the image; pixel_value_top_right represents the top right pixel value of the image; pixel_value_bottom_left represents the left bottom pixel value of the image; pixel_value_bottom_right represents the right bottom pixel value of the image.

[0021] Preferably, the block pictures are separated according to the image information of multiple levels;

[0022] The number of block pictures in the horizontal direction is calculated according to the following formula:

[0023] num_blocks_horizontal = ceil(image_width / block_width);

[0024] Wherein, num_blocks_horizontal is the number of block pictures in the horizontal direction; image_width is the image width; block_width is the block picture width; and ceil is the rounding function.

[0025] The number of block pictures in the vertical direction is calculated according to the following formula:

[0026] num_blocks_vertical = ceil(image_height / block_height)

[0027] Wherein, num_blocks_vertical is the number of block pictures in the horizontal direction; image_height is the image height; block_height is the block picture height; and ceil is the rounding function.

[0028] Preferably, the block pictures are encoded by JPEG, and the picture compression is performed by a compression ratio in the JPEG encoding, according to the following formula:

[0029] compression_ratio = original_image_size / encoded_image_size

[0030] Wherein, original_image_size represents the size of the original image data, and encoded_image_size represents the size of the image data after JPEG encoding.

[0031] Preferably, the block pictures with the index structure are spliced to perform header locking and online labeling.

[0032] In the second aspect, the present application further provides an interactive image display system, comprising:

[0033] A scaling decomposition module is configured to scale and decompose an original image into image information of multiple levels;

[0034] A separation module is configured to separate the block pictures according to the image information of multiple levels;

[0035] a picture processing module, configured to encode the block-shaped pictures, create corresponding identifiers for the encoded block-shaped pictures, and build the identifiers into an index structure;

[0036] a picture display module, configured to send the block-shaped pictures with the index structure to a receiving party according to display requirements, so that the receiving party displays the pictures by splicing the block-shaped pictures with the index structure.

[0037] In a third aspect, the present application further provides a mobile terminal, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, and the processor implements the steps of the interactive picture display method as described above when executing the computer program.

[0038] In a fourth aspect, the present application further provides a computer readable storage medium, which stores a computer program, and the computer program implements the steps of the interactive picture display method as described above when executed by a processor.

[0039] Compared with the prior art, the present application has the following beneficial technical effects:

[0040] The present application provides an interactive picture display method, which decomposes an original picture into image information at multiple levels by scaling, and separates the image information at the multiple levels into block-shaped pictures according to correspondence; encodes the block-shaped pictures, creates corresponding identifiers for the encoded block-shaped pictures, and builds the identifiers into an index structure; sends the block-shaped pictures with the index structure to a receiving party according to display requirements, so that the receiving party displays the pictures by splicing the block-shaped pictures with the index structure. The original picture is gradually reduced into multiple versions at different resolutions by pyramid representation or multi-resolution analysis, each version contains information of the original picture at different levels of detail, and appropriate image levels can be selected for transmission according to display requirements or network conditions. The block-shaped pictures can be of fixed size or dynamically divided according to image content, which improves overall efficiency. Compression encoding can significantly reduce the amount of data to be transmitted, and the index structure enables the receiving party to quickly find and splice the required block-shaped pictures.

[0041] Further, the present application allows users to gradually enlarge the image from the whole to the details without loading the entire image, and enables smooth zooming and navigation. Mainly including slicing a large image into small blocks and realizing fast zooming in and out operations through preloading technology, users can freely browse different parts of the image through interactive methods, easily view and analyze high-resolution images. Whether from local details to the whole picture, or from blur to clarity, users can obtain smooth preview display effects. BRIEF DESCRIPTION OF DRAWINGS

[0042] Figure 1 The flow chart of the interactive image display method in the embodiment of the present application is shown in the figure.

[0043] Figure 2 The structure schematic diagram of the interactive image display system in the embodiment of the present application is shown in the figure.

[0044] Figure 3 The image display schematic diagram in the embodiment of the present application is shown in the figure.

[0045] Figure 4 The pyramid model schematic diagram in the embodiment of the present application is shown in the figure.

[0046] In the figure: 1 - scaling decomposition module; 2 - separation module; 3 - picture processing module; 4 - image display module. DETAILED DESCRIPTION

[0047] In order to make the personnel in the technical field better understand the present application scheme, the technical scheme in the embodiment of the present application will be described clearly and completely in the following with the figures in the embodiment of the present application. Obviously, the described embodiment is only a part of the embodiment of the present application, not all. Based on the embodiment in the present application, all other embodiments obtained by the person skilled in the art without creative labor should belong to the protection scope of the present application.

[0048] The present application will be further described in detail in the following with the figures:

[0049] The purpose of the present application is to provide an interactive image display method, system, terminal and medium, to solve the technical problem of how to improve the fast display of pictures.

[0050] Referring to Figure 1 In an embodiment of the present application, an interactive image display method is provided, comprising:

[0051] Step 1, scaling decomposition of the original image into multiple levels of image information;

[0052] Specifically, the specific process of scaling decomposition of the image into multiple levels of image information is as follows:

[0053] A pyramid model is constructed, and the pyramid model is divided into levels from bottom to bottom, wherein each level is a reduced version of the previous level, as shown in Figure 4

[0054] The original picture is scaled and decomposed from the bottom to the top of the level divided by the pyramid model.

[0055] In the embodiment, each image pyramid level is composed of a group of block pictures, which are used for display of different levels. ​

[0056] The specific formula of the scaling decomposition from the bottom to the top of the level corresponding to the original picture of the pyramid model is as follows:

[0057] new_width = previous_width * scale_factor

[0058] new_height = previous_height * scale_factor

[0059] Wherein, new_width represents the scaled image width; new_height represents the scaled image height; previous_width represents the original image width; previous_height represents the original image height; scale_factor represents the scaling factor.

[0060] Specifically, the pyramid model is constructed by a resampling method, and the resampling method includes bilinear interpolation, and the formula is as follows:

[0061] new_pixel_value = (1-fractional_x)*(1-fractional_y)*pixel_value_top_left + fractional_x*(1-fractional_y)*pixel_value_top_right + (1-fractional_x)*fractional_y*pixel_value_bottom_left + fractional_x*fractional_y*pixel_value_bottom_right

[0062] Wherein, new_pixel_value represents the new pixel value of the image; fractional_x represents the variable x; fractional_y represents the variable y; pixel_value_top_left represents the top left corner pixel value of the image; pixel_value_top_right represents the top right corner pixel value of the image; pixel_value_bottom_left represents the left bottom corner pixel value of the image; pixel_value_bottom_right represents the right bottom corner pixel value of the image.

[0063] Step 2, according to the image information of multiple levels is divided into block picture;

[0064] Specifically, according to the image information of multiple levels is divided into block picture;

[0065] The number of block pictures in the horizontal direction is calculated according to the following formula:

[0066] num_blocks_horizontal = ceil(image_width / block_width);

[0067] wherein num_blocks_horizontal is the number of block pictures in the horizontal direction; image_width is the image width; block_width is the block picture width; and ceil is the rounding function.

[0068] The number of block pictures in the vertical direction is calculated according to the following formula:

[0069] num_blocks_vertical = ceil(image_height / block_height)

[0070] wherein num_blocks_vertical is the number of block pictures in the horizontal direction; image_height is the image height; block_height is the block picture height; and ceil is the rounding function.

[0071] Step 3: encoding the block pictures and creating corresponding identifiers for the encoded block pictures, and constructing the identifiers into an index structure;

[0072] Specifically, the block pictures are encoded by JPEG, and the picture compression is performed by a compression ratio in the JPEG encoding, according to the following formula:

[0073] compression_ratio = original_image_size / encoded_image_size

[0074] wherein original_image_size represents the size of the original image data, and encoded_image_size represents the size of the image data after JPEG encoding.

[0075] The relationship between the compression ratio and the image quality in this embodiment is generally determined by the encoding parameters, such as the quality factor of JPEG. A higher quality factor will result in a lower compression ratio, but the image quality is better.

[0076] The size of the image file after JPEG encoding is calculated according to the following formula:

[0077] (encoded_image_size) : encoded_image_size = (image_width * image_height * bits_per_pixel) / (8 * compression_ratio) where bits_per_pixel is the number of bits used per pixel.

[0078] Step 4: Transmit the indexed blocks of images to the receiving party based on display requirements, allowing the receiving party to display the image by stitching the indexed blocks of images.

[0079] In this embodiment, a unique identifier is created for each block of image for easy and fast access and navigation, and they are organized into an index structure, usually a tree structure. In this way, users can load and display specific blocks of images as needed.

[0080] Smooth zooming and navigation functions are provided, allowing users to browse images by scrolling, zooming and dragging. This is achieved by selecting and loading appropriate blocks of images based on user operations. For example, getZoomify data, src is the image source, width and height are the width and height of the image, and maxZoom is the maximum zoom level.

[0081] In the browser or application, an image rendering engine is needed to combine tiles into a seamless image. This requires loading and displaying tiles as needed, and arranging and rendering them in the correct order.

[0082] According to Figure 3 As shown in the screenshot of the original image and the screenshot of the enlarged image, the smooth implementation can be seen from the preview display from "blurred to bright" and from "local to global".

[0083] Specifically, the indexed blocks of images are stitched together for image header locking and online annotation.

[0084] The process of image header locking is as follows:

[0085] Determine the image header position and use the selection tool in the image processing software (such as rectangular frame, lasso tool, etc.) to accurately select the area.

[0086] Lock the selected area, and the locking methods include pixel locking (prevent modifying the pixels of the layer), position locking (prevent moving the layer), and transparent pixel locking (if the header area contains transparent parts, prevent modifying the transparent parts).

[0087] After the head region is locked, various processing operations such as adjusting brightness, contrast, and applying filters can continue to be performed on other parts of the image.

[0088] In the online labeling process, the following steps are taken:

[0089] Collect image data that needs to be labeled, which comes from the network, database, and camera shooting.

[0090] Perform necessary preprocessing on the image, such as cropping, scaling, denoising, etc., to improve labeling efficiency and accuracy

[0091] Upload the prepared image data to an online labeling tool or platform.

[0092] According to the task requirements, select the appropriate labeling type, such as rectangular box labeling (for object detection), polygon labeling (for image segmentation), point labeling (for key point detection), etc.

[0093] Use the labeling tools provided by the tool (such as brushes, text boxes, rectangular boxes, polygons, etc.) to label the image.

[0094] When labeling, you need to accurately identify the objects, scenes or features in the image and assign appropriate labels or attributes to them according to the requirements.

[0095] You can adjust the style of the label (such as color, line width, transparency, etc.) to ensure the clarity and readability of the label.

[0096] View the labeling effect in real time and make necessary adjustments and optimizations.

[0097] In summary, the present application provides an interactive image display method, which decomposes the original image into multiple levels of image information and separates it into block pictures according to the multiple levels of image information; encodes the block pictures and creates corresponding identifiers for the encoded block pictures, constructs the identifiers into an index structure; sends the block pictures with the index structure to the receiving party according to the display requirements, so that the receiving party can display the image by splicing the block pictures with the index structure, and through pyramid representation or multi-resolution analysis, the original image is gradually reduced to multiple versions with different resolutions, each version contains information of the original image at different levels of detail, and appropriate image levels can be selected for transmission according to display requirements or network conditions, the block pictures can be fixed size or dynamically divided according to image content, the overall efficiency is improved, compression encoding can significantly reduce the amount of data to be transmitted, and the index structure allows the receiving party to quickly find and splice the required block pictures.

[0098] Example 2

[0099] According toFigure 2 The application further provides an interactive image display system, comprising:

[0100] a zoom decomposition module 1 for zoom-decomposing an original image into image information of multiple levels;

[0101] a separation module 2 for separating the image information of multiple levels into block pictures correspondingly;

[0102] a picture processing module 3 for encoding the block pictures and creating corresponding identifiers for the encoded block pictures, and constructing the identifiers into an index structure;

[0103] an image display module 4 for sending the block pictures with the index structure to a receiving party according to display requirements, so that the receiving party displays images by splicing the block pictures with the index structure.

[0104] Embodiment 3

[0105] The application further provides a mobile terminal comprising a memory, a processor, and a computer program, such as an interactive image display program, stored in the memory and executable on the processor.

[0106] The processor implements the steps of the above-mentioned interactive image display method when executing the computer program, for example:

[0107] zoom-decomposing an original image into image information of multiple levels;

[0108] separating the image information of multiple levels into block pictures correspondingly;

[0109] encoding the block pictures and creating corresponding identifiers for the encoded block pictures, and constructing the identifiers into an index structure;

[0110] sending the block pictures with the index structure to a receiving party according to display requirements, so that the receiving party displays images by splicing the block pictures with the index structure.

[0111] Alternatively, the processor implements the functions of the modules in the above-mentioned system when executing the computer program, for example:

[0112] a zoom decomposition module 1 for zoom-decomposing an original image into image information of multiple levels;

[0113] a separation module 2 for separating the image information of multiple levels into block pictures correspondingly;

[0114] a picture processing module 3 for encoding the block pictures and creating corresponding identifiers for the encoded block pictures, and constructing the identifiers into an index structure;

[0115] The image display module 4 is configured to send the block pictures with the index structure to a receiving party according to display requirements, so that the receiving party displays images by splicing the block pictures with the index structure.

[0116] For example, the computer program can be divided into one or more modules / units, which are stored in the memory and executed by the processor to complete the present application. The one or more modules / units can be a series of computer program instruction segments capable of completing a specific function, which are used to describe the execution process of the computer program in the mobile terminal.

[0117] For example, the computer program can be divided into a scaling decomposition module 1, a separation module 2, a picture processing module 3, and an image display module 4, and the specific functions of each module are as follows:

[0118] The scaling decomposition module 1 is configured to scale and decompose an original image into image information of multiple levels;

[0119] The separation module 2 is configured to separate the image information of multiple levels into block pictures according to correspondence;

[0120] The picture processing module 3 is configured to encode the block pictures, create corresponding identifiers for the encoded block pictures, and construct the identifiers into an index structure;

[0121] The image display module 4 is configured to send the block pictures with the index structure to a receiving party according to display requirements, so that the receiving party displays images by splicing the block pictures with the index structure.

[0122] The mobile terminal can be a desktop computer, a notebook computer, a palm computer, a cloud server, and other computing devices. The mobile terminal can include, but is not limited to, a processor and a memory.

[0123] The processor can be a central processing unit (CPU), and can also be other general-purpose processors, a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware component, etc. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor. The processor is a control center of the mobile terminal, which can connect all parts of the mobile terminal through various interfaces and lines.

[0124] The memory can be used to store the computer programs and / or modules, and the processor can realize various functions of the mobile terminal by running or executing the computer programs and / or modules stored in the memory, and calling data stored in the memory.

[0125] The memory can mainly include a program storage area and a data storage area, wherein the program storage area can store an operating system, at least one application program required by a function (such as a sound playing function, an image playing function, etc.), etc.; and the data storage area can store data created according to the use of the mobile terminal (such as audio data, a phone book, etc.), etc. In addition, the memory can include a high-speed random access memory, and can also include a nonvolatile memory, for example, a hard disk, a memory, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, at least one disk storage device, a flash memory device, or other volatile solid-state memory device.

[0126] Embodiment 4

[0127] The application further provides a computer readable storage medium, which stores a computer program, and the computer program is executed by a processor to realize the steps of the interactive image display method.

[0128] If the modules / units of the mobile terminal are realized in the form of software function units and sold or used as independent products, the modules / units can be stored in a computer readable storage medium.

[0129] Based on the understanding, the present application implements all or part of the processes in the above method, and can also be instructed by a computer program to complete the relevant hardware. The computer program can be stored in a computer readable storage medium. When the computer program is executed by a processor, the steps of the above interactive image display method can be implemented. The computer program includes computer program codes, which can be in the form of source code, object code, executable files or some intermediate forms, etc.

[0130] The computer readable medium can include any entity or device, recording medium, U disk, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal, software distribution medium, etc. that can carry the computer program code.

[0131] It should be noted that the content contained in the computer readable medium can be appropriately increased or decreased according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, the computer readable medium does not include electric carrier signals and telecommunication signals.

[0132] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application and not to limit it. Although the present application has been described in detail with reference to the above embodiments, those skilled in the art should understand that the specific embodiments of the present application can be modified or replaced by equivalents without departing from the spirit and scope of the present application. Any modification or equivalent replacement without departing from the spirit and scope of the present application should be covered in the protection scope of the claims of the present application.

Claims

1. An interactive image display method characterized by, The application relates to a method for image zooming and displaying. The method comprises the following steps: scaling and decomposing an original image into image information of multiple levels; separating the image information of the multiple levels into block pictures according to correspondence; encoding the block pictures and creating corresponding identifiers for the encoded block pictures, and constructing the identifiers into an index structure; 2. The interactive image display method of claim 1, wherein, sending the block pictures with the index structure to a receiving party according to display requirements, so that the receiving party displays the image by splicing the block pictures with the index structure. The specific process of scaling and decomposing the image into image information of multiple levels is as follows: constructing a pyramid model, and performing level division on the pyramid model from the bottom to the top, wherein each level is a reduced version of the previous level; 3. The interactive image display method of claim 2, wherein, scaling and decomposing the original picture according to the levels divided by the pyramid model from the bottom to the top. The specific formula of scaling and decomposing the original picture according to the levels divided by the pyramid model from the bottom to the top is as follows: new_width = previous_width * scale_factor new_height = previous_height * scale_factor 4. The interactive image display method of claim 2, wherein, wherein new_width represents the zoomed image width, new_height represents the zoomed image height, previous_width represents the original image width, previous_height represents the original image height, and scale_factor represents the scaling factor. The pyramid model is constructed by a resampling method, and the resampling method comprises bilinear interpolation, and the formula is as follows: new_pixel_value = (1-fractional_x) * (1-fractional_y) * pixel_value_top_left + fractional_x * (1-fractional_y) * pixel_value_top_right + (1-fractional_x) * fractional_y * pixel_value_bottom_left + fractional_x * fractional_y * pixel_value_bottom_right 5. The interactive image display method of claim 1, wherein, wherein new_pixel_value represents the new pixel value of the image, fractional_x represents the variable x, fractional_y represents the variable y, pixel_value_top_left represents the top-left pixel value of the image, pixel_value_top_right represents the top-right pixel value of the image, pixel_value_bottom_left represents the bottom-left pixel value of the image, and pixel_value_bottom_right represents the bottom-right pixel value of the image. The method comprises the following steps: separating the image information of the multiple levels into block pictures according to correspondence; The number of the block pictures in the horizontal direction is calculated according to the following formula: num_blocks_horizontal = ceil(image_width / block_width); wherein num_blocks_horizontal is the number of block pictures in horizontal direction; image_width is the width of the image; block_width is the width of the block picture; and ceil is the rounding function. The number of block pictures in vertical direction is calculated according to the following formula: num_blocks_vertical = ceil(image_height / block_height) wherein num_blocks_vertical is the number of block pictures in horizontal direction; image_height is the height of the image; block_height is the height of the block picture; and ceil is the rounding function.

6. The interactive image display method of claim 1, wherein, The block pictures are encoded by JPEG, and the picture compression is performed by compression ratio in the JPEG encoding, according to the following formula: compression_ratio = original_image_size / encoded_image_size wherein original_image_size represents the size of the original image data, and encoded_image_size represents the size of the image data after JPEG encoding.

7. The interactive image display method of claim 1, wherein, The block pictures with index structure are spliced to perform header locking and online labeling.

8. An interactive image display system characterized by, It comprises: a scaling decomposition module (1) for scaling and decomposing the original image into multiple levels of image information; a separation module (2) for separating the multiple levels of image information into block pictures according to the corresponding separation; a picture processing module (3) for encoding the block pictures and creating corresponding identifiers for the encoded block pictures, and constructing the identifiers into an index structure; an image display module (4) for sending the block pictures with index structure to the receiving party according to the display requirements, so that the receiving party splices the block pictures with index structure to display the image.

9. A mobile terminal comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, The processor executes the computer program to realize the steps of the interactive image display method according to any one of claims 1-7.

10. A computer-readable storage medium storing a computer program, the computer program comprising instructions that, when executed by a computer, cause the computer to perform the method of any one of claims 1 to 9. The computer program is executed by the processor to realize the steps of the interactive image display method according to any one of claims 1-7.

Images