CN115797168A - Large-scale picture previewing method, system, equipment and medium based on browser - Google Patents
Large-scale picture previewing method, system, equipment and medium based on browser Download PDFInfo
- Publication number
- CN115797168A CN115797168A CN202211392249.2A CN202211392249A CN115797168A CN 115797168 A CN115797168 A CN 115797168A CN 202211392249 A CN202211392249 A CN 202211392249A CN 115797168 A CN115797168 A CN 115797168A
- Authority
- CN
- China
- Prior art keywords
- image
- preview
- previewed
- splicing
- hierarchy
- 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.)
- Pending
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a large-scale picture previewing method, a large-scale picture previewing system, large-scale picture previewing equipment and a large-scale picture previewing medium based on a browser, and relates to the technical field of picture splicing; the method comprises the following steps: acquiring an image preview instruction of a user for an image to be previewed, wherein the image preview instruction comprises an image identifier and a hierarchy identifier of the image to be previewed, and the image to be previewed is an image with a data volume larger than a set data volume; acquiring a plurality of slice images corresponding to the hierarchical identifications from a target file corresponding to the image identifications according to an image preview instruction, wherein the target file stores the plurality of slice images corresponding to each hierarchical identification in the plurality of hierarchical identifications, and the plurality of slice images corresponding to different hierarchical identifications are different in size; splicing a plurality of slice images corresponding to the hierarchy identification to obtain a preview spliced image corresponding to an image to be previewed; displaying a preview mosaic; the method integrates super large picture segmentation, can freely enlarge and reduce movement to preview the super large picture, and can add symbols or character marks on the picture.
Description
Technical Field
The invention relates to the technical field of picture splicing, in particular to a large-scale picture previewing method, a large-scale picture previewing system, large-scale picture previewing equipment and a large-scale picture previewing medium based on a browser.
Background
In the field of pathological section online preview, the size of a pathological section picture can be hundreds of M or even G, a browser cannot directly open the picture, and meanwhile, some abnormal biological tissues need to be marked on the pathological section, so that the requirements that the preview is realized by freely amplifying, reducing and moving after uploading on the browser, and the marking can be performed by circling or typing on the picture are needed; the existing technical scheme or product can only independently segment the super-large picture, independently load the deep zoom image, independently perform circle drawing or typewriting on a browser page for marking, and has no method or product for directly previewing and marking the super-large picture.
Disclosure of Invention
The invention aims to provide a large picture previewing method, a large picture previewing system, large picture previewing equipment and a large picture previewing medium based on a browser, wherein the large picture is segmented, can be freely amplified and reduced to move to preview the large picture, and symbols or character marks can be added on the picture.
The embodiment of the invention is realized by the following steps:
in a first aspect, an embodiment of the present application provides a large-scale picture previewing method based on a browser, including the following steps:
acquiring an image preview instruction of a user aiming at an image to be previewed, wherein the image preview instruction comprises an image identifier and a hierarchy identifier of the image to be previewed, and the image to be previewed is an image of which the data volume is larger than the set data volume;
according to the image preview instruction, acquiring a plurality of slice images corresponding to the hierarchy identifications from a target file corresponding to the image identifications, wherein the target file stores the plurality of slice images corresponding to each hierarchy identification in the plurality of hierarchy identifications, and the sizes of the plurality of slice images corresponding to different hierarchy identifications are different;
splicing a plurality of slice images corresponding to the hierarchy identification to obtain a preview spliced image corresponding to an image to be previewed;
and displaying the preview splicing picture.
The invention has the beneficial effects that: the method comprises the steps that a user sends an image preview instruction aiming at an image to be previewed, an image mark of the image to be previewed in the image preview instruction represents which image the user wants to preview, a hierarchy mark represents that the user selects a slice image with a size corresponding to which hierarchy to preview as a basis, and after the image to be previewed and the hierarchy to be previewed are determined, a preview splicing image with the size consistent with that of the image to be previewed of the hierarchy is obtained through splicing of all slice images of the hierarchy and displayed, so that the purpose of displaying a large preview splicing image is achieved.
On the basis of the technical scheme, the invention can be further improved as follows.
Further, the method further comprises:
receiving a marking instruction of a user for previewing the splicing diagram;
and marking the preview splicing image according to the marking instruction.
The beneficial effect of adopting the further scheme is that: through the receiving of the marking instruction, the user can mark the displayed preview spliced graph according to the actual situation, so that the purposes of freely amplifying, reducing, movably previewing the super-large picture and adding a symbol or a character mark on the preview spliced graph are achieved.
Further, the marking instruction includes a marking type identifier and marking content, the marking type identifier is a brush marking type identifier, a square marking type identifier, a round marking type identifier or a text marking type identifier, and the method for marking the preview mosaic image according to the marking instruction includes:
determining a target mark type according to the mark type identifier;
and marking the marked content in the preview splicing picture according to the target mark type.
The beneficial effect of adopting the further scheme is that: different marks are carried out on the preview splicing picture in different marking modes, on one hand, the richness of the marks can be increased, and on the other hand, the marked contents can be better identified.
Further, the target file also stores the size of each slice image corresponding to the size of the image to be previewed and the different level marks; splicing the multiple slice images corresponding to the hierarchical identification to obtain a preview spliced image corresponding to the image to be previewed, and the method comprises the following steps of:
and splicing the plurality of slice images corresponding to the hierarchy identification according to the size of the image to be previewed and the size of each slice image corresponding to the hierarchy identification to obtain a preview splicing chart corresponding to the image to be previewed, wherein the size of the preview splicing chart is the same as the size of the image to be previewed.
The beneficial effect of adopting the further scheme is that: when the browser previews, an image to be previewed of a certain level is selected according to an image previewing instruction, a plurality of slice images corresponding to the image to be previewed are spliced into a previewing splicing picture corresponding to the image to be previewed, and the size of the previewing splicing picture is the same as that of the image to be previewed.
Further, the image format of the image to be previewed is also stored in the target file, and the multiple slice images corresponding to the hierarchical identifier are spliced to obtain a preview spliced image corresponding to the image to be previewed, wherein the method comprises the following steps:
and splicing the plurality of slice images corresponding to the hierarchy identification according to the image format of the image to be previewed to obtain a preview splicing map corresponding to the image to be previewed, wherein the image format of the preview splicing map is the same as that of the image to be previewed.
The beneficial effect of adopting the further scheme is that: the method comprises the steps that based on an image preview instruction of a user for an image to be previewed, the level of the image to be previewed is determined, after a plurality of slice images of the corresponding level are spliced, the image format of an obtained preview splicing image is the same as that of the image to be previewed, the image format of the preview splicing image is the same as that of the image to be previewed, and therefore the consistency of the preview splicing image and the image to be previewed is guaranteed.
Further, the target file also stores a sequence identifier of each slice image corresponding to each hierarchy identifier in the plurality of hierarchy identifiers, and for each slice image corresponding to each hierarchy identifier, the sequence identifier of the slice image represents the number of pixel rows and the number of pixel columns of the slice image in the image to be previewed;
splicing the multiple slice images corresponding to the hierarchical identification to obtain a preview spliced image corresponding to the image to be previewed, and the method comprises the following steps of:
and splicing the plurality of slice images corresponding to the hierarchy identification according to the sequence identification of each slice image corresponding to the hierarchy identification to obtain a preview spliced image corresponding to the image to be previewed.
The beneficial effect of adopting the further scheme is that: and splicing according to the sequence identifier of each slice image corresponding to each hierarchy identifier in the multiple hierarchy identifiers in the target file, so that the obtained preview spliced image is the same as the image to be previewed of the corresponding hierarchy in the multiple hierarchies, and errors are avoided during splicing.
Further, the plurality of slice images corresponding to each of the plurality of level identifiers are determined by:
performing reduction processing on an image to be previewed at least once according to a set proportion to obtain a target micro-map corresponding to each level in a plurality of levels, wherein for every two adjacent levels in the plurality of levels, the size proportion between the two target micro-maps corresponding to the two adjacent levels is the set proportion, and each level corresponds to a level identifier;
and for the target miniature image of each level, segmenting the target miniature image to obtain a plurality of slice images.
The beneficial effect of adopting the further scheme is that: firstly, zooming an image to be previewed in different proportions to obtain a plurality of target microphotographs in different levels, and secondly, segmenting the target microphotograph in each level, namely, segmenting the target microphotograph in each level into a plurality of slice images, wherein the plurality of slice images can also become corresponding target microphotographs after being combined; when the preview is carried out through the browser, the target micro-image of a certain level needs to be previewed according to the image preview instruction, the plurality of slice images corresponding to the target micro-image are spliced into the preview splicing image of the corresponding level, and the preview splicing image is formed by splicing the plurality of slice images, so that the loading can be carried out on the browser, and finally the purposes of freely zooming in and out to preview the super-large image and adding symbols or character marks on the preview splicing image are achieved.
In a second aspect, an embodiment of the present application provides a large picture preview system based on a browser, including:
the image preview instruction acquisition module is used for acquiring an image preview instruction of a user aiming at an image to be previewed, wherein the image preview instruction comprises an image identifier and a hierarchy identifier of the image to be previewed, and the image to be previewed is an image of which the data volume is larger than the set data volume;
the slice image acquisition module is used for acquiring a plurality of slice images corresponding to the hierarchy identifier from a target file corresponding to the image identifier according to the image preview instruction, wherein the target file stores a plurality of slice images corresponding to each hierarchy identifier in a plurality of hierarchy identifiers, and the sizes of the plurality of slice images corresponding to different hierarchy identifiers are different;
the slice splicing module is used for splicing the plurality of slice images corresponding to the hierarchy identification to obtain a preview splicing picture corresponding to the image to be previewed;
and the display module is used for displaying the preview splicing picture.
In a third aspect, an embodiment of the present application provides an electronic device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, the method in any one of the first aspect is implemented.
In a fourth aspect, embodiments of the present application provide a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the method of any one of the first aspects.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and those skilled in the art can also obtain other related drawings based on the drawings without inventive efforts.
FIG. 1 is a flowchart of a large-scale picture previewing method according to an embodiment of the present invention;
FIG. 2 is a schematic illustration of the storage of slice images in multiple levels in an embodiment of the invention;
FIG. 3 is a schematic diagram of a slice image at a level according to an embodiment of the present invention;
FIG. 4 is a diagram illustrating a preview mosaic at a level according to an embodiment of the present invention;
FIG. 5 is a schematic illustration of one embodiment of the invention when labeled;
FIG. 6 is a schematic illustration of another embodiment of the present invention when labeled;
FIG. 7 is a schematic illustration of another embodiment of the present invention when labeled;
FIG. 8 is a schematic illustration of another embodiment of the present invention when labeled;
FIG. 9 is a schematic illustration of an alternate embodiment of the present invention as labeled;
FIG. 10 is a schematic illustration of an alternate embodiment of the present invention as labeled;
FIG. 11 is a schematic illustration of another embodiment of the present invention when labeled;
FIG. 12 is a flowchart of a method for previewing a large picture according to an embodiment of the present invention;
FIG. 13 is a schematic diagram of the connection of the preview system in the embodiment of the present invention;
fig. 14 is a schematic connection diagram of an electronic device in an embodiment of the invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all, embodiments of the present invention. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be obtained by a person skilled in the art without inventive step based on the embodiments of the present invention, are within the scope of protection of the present invention.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.
Examples
In a first aspect, referring to fig. 1 and fig. 12, an embodiment of the present application provides a large picture preview method based on a browser, where the method is executable by any terminal device installed with the browser, and the method includes the following steps:
s1, acquiring an image preview instruction of a user aiming at an image to be previewed, wherein the image preview instruction comprises an image identifier and a hierarchy identifier of the image to be previewed, and the image to be previewed is an image with a data volume larger than a set data volume;
the image to be previewed is an image that a user wants to preview on a certain browser, the image to be previewed is a large picture, and for the large picture, the image to be previewed generally refers to an image with a data volume larger than a set data volume.
The image preview instruction refers to an instruction which is intended to preview an image to be previewed, and the instruction can be generated by an operation initiated by a user on a page of a browser, wherein the page is a page for interaction between the user and the terminal device. The user may trigger the instruction based on a browsing identifier displayed on a page of the browser, where the browsing identifier may be represented by at least one of characters, words, or graphics, and a specific representation form of the browsing identifier is not limited in this application.
The image identification represents which image the user wants to preview, namely the identity of the image to be previewed, and the hierarchy identification represents that the user selects the slice image with the size corresponding to the hierarchy as the basis for previewing.
The user sends an image preview instruction for an image to be previewed, and then selects the image to be previewed and the hierarchy of the image to be previewed, wherein the hierarchy of the image to be previewed represents the images to be previewed with different sizes.
In this embodiment, when a browser (which is only required to browse a web page in daily life) previews a required picture, that is, previewing an image, referring to fig. 4, an openseadaggon js library may be used to asynchronously load an image to be previewed at different levels after being sliced, the openseadaggon js library is an open-source tool code library written in a javaScript language, and the function may be directly used, js is an abbreviation of javaScript, and javaScript is a programming language; asynchronous loading is the loading of pages by writing code using js, sending requests to the server and processing responses without blocking the user. The method can exchange data with the Web server under the condition of not reloading the page, namely, the method can generate the effect of partial refreshing under the condition of not refreshing the page, namely, the method can achieve the purpose of displaying the image to be previewed of the corresponding level based on different image previewing instructions for displaying different levels.
S2, acquiring a plurality of slice images corresponding to the hierarchical identifications from a target file corresponding to the image identifications according to an image preview instruction, wherein the target file stores the plurality of slice images corresponding to each hierarchical identification in the plurality of hierarchical identifications, and the plurality of slice images corresponding to different hierarchical identifications are different in size;
in the alternative scheme of the application, the hierarchy identifier can be input by a user on a page or confirmed by sliding a mouse, and the hierarchy of the image to be previewed and the multiple slice images corresponding to the hierarchy are determined according to an image preview instruction of the user for the image to be previewed.
Optionally, the plurality of slice images corresponding to each of the plurality of level identifiers is determined by:
performing reduction processing on an image to be previewed at least once according to a set proportion to obtain a target micro-map corresponding to each level in a plurality of levels, wherein for every two adjacent levels in the plurality of levels, the size proportion between the two target micro-maps corresponding to the two adjacent levels is the set proportion, and each level corresponds to a level identifier;
and for the target miniature image of each level, segmenting the target miniature image to obtain a plurality of slice images.
The above-described reduction processing means reducing the length and width of an image to be previewed. Scaling an image to be previewed in different proportions to obtain a plurality of target miniature images of different levels, and segmenting the target miniature image of each level, namely segmenting the target miniature image of each level into a plurality of slice images, wherein the plurality of slice images can also become corresponding target miniature images after being combined; when previewing through the browser, a target micro-scale image of a certain level needs to be previewed according to an image preview instruction, and a plurality of slice images corresponding to the target micro-scale image are used as data bases of a preview splicing image.
In this embodiment, when setting a proportional relationship, that is, setting a set proportion, may be adjusted according to actual situations, for example, 2; specifically, as shown in fig. 2, after an image to be previewed is reduced for multiple times, 14 levels of target thumbnails are obtained, the target thumbnail with the maximum ratio is stored in the folder named 13, the ratio between the target thumbnail in the folder named 12 and the target thumbnail in the folder named 13 is 1.
Note that, the length or width of the target thumbnail obtained after the scaling is performed in a predetermined ratio (predetermined ratio) may not be less than 1, and the pixels of the entire target thumbnail are too small after the length or width of the target thumbnail is less than 1, so that there is no preview value.
In this embodiment, when the target thumbnail of each level is cut, VIPS software (image processing software that is an open source) may be used to cut the target thumbnail to obtain dzi (target file) and a plurality of slice images; dzi (object file) stores some information of the plurality of object thumbnails and the plurality of slice images, such as the length and width of the object thumbnail and the length and width of the slice image, and the formats of the object thumbnail and the slice image; the target thumbnail of each level is cut, that is, the target thumbnail of each level is cut into a plurality of slice images, and the plurality of slice images can also become the corresponding target thumbnails after being combined.
Optionally, the target file further stores a sequential identifier of each slice image corresponding to each level identifier in the plurality of level identifiers, and for each slice image corresponding to each level identifier, the sequential identifier of the slice image represents the number of pixel rows and the number of pixel columns of the slice image in the image to be previewed;
the sequence identifier represents a sequence when the target thumbnail is sliced, and the sliced picture is sliced from the left upper corner of the target thumbnail to the right and from top to bottom according to the number of preset pixel points (pixel row number and pixel column number), so as to obtain corresponding row numbers and column numbers, for example, the preset pixel is 255x256 pixels; if the pixels of the sliced images of the last column at the right end of the target thumbnail and the last row at the lower end of the image to be previewed are smaller than the preset pixels, namely if the size of the remaining image of the lowest row and the rightmost column cannot reach the size of 255x256 pixels, the size of the remaining image is directly used as the size of the sliced image; if the height of only 50 pixels is left when the first column is cut to the lowest one, determining that the lowest one of the pictures in the first column is 255x50 pixels; similarly, when the rightmost column only has a width of 50 pixels, the pixels in the rightmost column are 50 × 256, and the pixels are still retained; and the target thumbnails of each level and the slice images obtained after the segmentation are all retained in corresponding target folders, as shown in fig. 2, 14 folders with names from 0 to 13 are stored in the 14 folders, and the 14 folders store the target thumbnails of different levels and a plurality of slice images obtained after the segmentation of the target thumbnails, as shown in fig. 3, which represents the schematic of a slice image of a certain level; when naming each slice image, the slice images should be numbered and named according to the sequence of the obtained slice images and based on the row-column sequence, for example, the names of the thumbnail after the first column of the target thumbnail is cut from top to bottom are 0_0.jpeg, 0_1.jpeg, 0_2.jpeg, and so on, up to the last line. If the width and height of a target miniature map of a certain level are less than 255x256, namely pixels are less than 255x256, the target miniature map is directly used as a unique slice image without slicing, so that only one slice image of the level is provided, and the name is 0_0.jpeg; the number of pixel rows and the number of pixel columns, which represent the preset pixel size of the slice image, and the naming rule, for example, the number of pixel rows and the number of pixel columns of one slice image are 255-2 and 256-2, respectively, which represent that the slice image is located in the third column and the third row of the target thumbnail, and the pixels of the slice image are 255x256, and the number of pixel rows and the number of pixel columns of one slice image are 126-4 and 132-1, respectively, which represent that the slice image is located in the fifth column and the second row of the target thumbnail, and the pixels of the slice image are 255x256.
S3, splicing the multiple slice images corresponding to the hierarchical identification to obtain a preview spliced image corresponding to the image to be previewed;
when previewing through a browser, a target thumbnail of a certain level needs to be previewed according to an image preview instruction, and a plurality of slice images corresponding to the target thumbnail are spliced into a preview spliced image of a corresponding level.
Optionally, the splicing the multiple slice images corresponding to the hierarchical identifier to obtain a preview spliced image corresponding to the image to be previewed includes:
and splicing the plurality of slice images corresponding to the hierarchy identification according to the sequence identification of each slice image corresponding to the hierarchy identification to obtain a preview spliced image corresponding to the image to be previewed.
The method comprises the steps of obtaining a preview splicing image, and splicing the multiple layers of the image to be previewed according to the sequence identification of each slice image corresponding to each layer identification in the multiple layer identifications in a target file.
Optionally, the target file further stores a size of each slice image corresponding to the size of the image to be previewed and the different level identifiers; splicing a plurality of slice images corresponding to the hierarchy identification to obtain a preview spliced picture corresponding to the image to be previewed, and the method comprises the following steps:
and splicing the plurality of slice images corresponding to the hierarchy identification according to the size of the image to be previewed and the size of each slice image corresponding to the hierarchy identification to obtain a preview splicing chart corresponding to the image to be previewed, wherein the size of the preview splicing chart is the same as the size of the image to be previewed.
Optionally, the image format of the image to be previewed is further stored in the target file, and the multiple slice images corresponding to the hierarchical identifier are spliced to obtain a preview spliced image corresponding to the image to be previewed, where the method includes:
and splicing the plurality of slice images corresponding to the hierarchy identification according to the image format of the image to be previewed to obtain a preview splicing map corresponding to the image to be previewed, wherein the image format of the preview splicing map is the same as that of the image to be previewed.
The target file also stores the size of each slice image corresponding to the size of the image to be previewed and the different-level identification and the image format of the image to be previewed, so that the size of the previewed splicing image is ensured to be the same as the size of the image to be previewed, the image format of the previewed splicing image is enabled to be the same as the image format of the image to be previewed, and the consistency of the previewed splicing image and the image to be previewed is ensured.
In this embodiment, when the openseadagon js library is used to asynchronously load the segmented images to be previewed at different levels; asynchronous loading is to use js to write codes, send requests to a server and process responses without blocking page loading of a user, and exchange data with a Web server under the condition of not reloading pages, namely, under the condition of not refreshing the pages, the effect of local refreshing can be generated, so that images to be previewed of corresponding levels are displayed based on different image preview instructions for displaying different levels; the OpenSeadragon js library can realize zooming and moving of pictures, automatically judges the current zooming level to asynchronously load slice images and splice the slice images into the pictures, and is based on a target micrograph of the corresponding level of the image to be previewed; when the tool library is initialized, the dzi (namely the target file) is imported, the image to be previewed can be zoomed by using a mouse wheel, namely, the mouse wheel is used for sending an image preview instruction, and a level identifier is determined, so that preview splicing images of different levels are loaded; during zooming, the openseadagon automatically judges what zoom level picture should be displayed at present according to the expected conditions, asynchronously loads the slice image of the corresponding level in a deep zoom file (namely the file shown in fig. 2) on the server by using javascript codes, and marks according to the sequence of the slice image, namely the pixel row number and the pixel column number of the slice image in the image to be previewed so as to display the preview spliced picture on a browser.
The asynchronous loading technology can realize the reloading display function of the picture without refreshing the page, and if the picture is enlarged to the maximum, the preview mosaic picture of the maximum zooming level (namely, the image in the folder named 13 in fig. 2) is asynchronously loaded and displayed; if the browser cannot display the content of all the preview splicing maps at one time, loading the part of the preview splicing maps which can be seen by the current browser window, and loading and displaying the preview splicing maps at other positions when a mouse is controlled to move the preview splicing maps; and when the window of the browser can just display the whole preview mosaic, the display is allowed to shrink to the minimum degree.
And S4, displaying the preview splicing picture.
It should be noted that the size of the preview mosaic may be larger than the size of the image to be previewed, or may be smaller than the size of the image to be previewed.
Optionally, the method further includes:
receiving a marking instruction of a user for previewing the splicing map;
and marking the preview splicing image according to the marking instruction.
And through the receiving of the marking instruction, the user can mark the displayed preview spliced graph according to the actual condition, so that the aims of freely amplifying, reducing, movably previewing the super-large picture and adding a symbol or a character mark on the preview spliced graph are fulfilled.
Optionally, the marking instruction includes a marking type identifier and marking content, the marking type identifier is a brush marking type identifier, a square marking type identifier, a round marking type identifier, or a text marking type identifier, and the marking instruction is used to mark the preview mosaic image, and includes:
determining a target mark type according to the mark type identifier;
and marking the marked content on the preview splicing chart according to the target mark type.
The preview splicing image is marked in different marking modes, so that on one hand, the richness of the marks can be increased, and on the other hand, the marked contents can be better identified.
In this embodiment, in the process of browsing and previewing the mosaic, a Fabric js library may be used for labeling, the Fabric is an open-source tool code library written by using a javaScript language, and the function can be directly used, js is a short name of javaScript, javaScript is a programming language, referring to fig. 5 to fig. 11, the labeling is used for explaining the content on the picture, and as shown in fig. 5, the labeling is a tabbed popup window appearing by right click of a mouse; FIG. 6 is a popup of a selected color appearing after selection of a brush, box, or circle as in FIG. 5; in FIG. 7, a popup appears after selection of the text in FIG. 5; FIG. 8 is a schematic illustration of labeling with a paintbrush; in FIG. 9, the schematic of using box labels for selection; in FIG. 10, a schematic representation of the selection using a circle box notation; in fig. 11, the text labels are used for illustration. In fig. 1, the original image represents an image to be previewed, and the server (generating a thumbnail) represents zooming the image to be previewed multiple times according to a set ratio; obtaining a dzi file and a plurality of 255x256px pictures by cutting, namely obtaining a target miniature image by cutting a plurality of different levels according to the sequence identification, and obtaining a target file, a plurality of slice images corresponding to each level and the name of each slice image, namely the pixel row number and the pixel column number of the target file and each slice image; the asynchronous browser loading is a process of splicing a plurality of slice images of a level corresponding to the image preview instruction based on different image preview instructions to obtain a preview spliced graph of a level corresponding to a plurality of target micro-miniature graphs, and the browser labeling is a process of labeling the preview spliced graph displayed by the browser, which is shown in fig. 5 to 11.
In a second aspect, an embodiment of the present application provides a large picture preview system based on a browser, including:
the image preview instruction acquisition module is used for acquiring an image preview instruction of a user aiming at an image to be previewed, wherein the image preview instruction comprises an image identifier and a hierarchy identifier of the image to be previewed, and the image to be previewed is an image of which the data volume is larger than the set data volume;
the slice image acquisition module is used for acquiring a plurality of slice images corresponding to the hierarchy identifier from a target file corresponding to the image identifier according to the image preview instruction, wherein the target file stores a plurality of slice images corresponding to each hierarchy identifier in a plurality of hierarchy identifiers, and the sizes of the plurality of slice images corresponding to different hierarchy identifiers are different;
the slice splicing module is used for splicing the plurality of slice images corresponding to the hierarchical identification to obtain a preview spliced image corresponding to the image to be previewed;
and the display module is used for displaying the preview splicing map.
In a third aspect, an embodiment of the present application provides an electronic device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, the method in any one of the first aspect is implemented.
In a fourth aspect, embodiments of the present application provide a non-transitory computer-readable storage medium storing computer instructions for causing a computer to perform the method of any one of the first aspects.
It will be evident to those skilled in the art that the present application is not limited to the details of the foregoing illustrative embodiments, and that the present application may be embodied in other specific forms without departing from the spirit or essential attributes thereof. The present embodiments are therefore to be considered in all respects as illustrative and not restrictive, the scope of the application being indicated by the appended claims rather than by the foregoing description, and all changes which come within the meaning and range of equivalency of the claims are therefore intended to be embraced therein. Any reference sign in a claim should not be construed as limiting the claim concerned.
Claims (10)
1. The large picture previewing method based on the browser is characterized by comprising the following steps of:
acquiring an image preview instruction of a user aiming at an image to be previewed, wherein the image preview instruction comprises an image identifier and a hierarchy identifier of the image to be previewed, and the image to be previewed is an image with a data volume larger than a set data volume;
acquiring a plurality of slice images corresponding to the hierarchy identifications from a target file corresponding to the image identifications according to the image preview instruction, wherein the target file stores the plurality of slice images corresponding to each hierarchy identification in the plurality of hierarchy identifications, and the sizes of the plurality of slice images corresponding to different hierarchy identifications are different;
splicing the multiple slice images corresponding to the hierarchical identification to obtain a preview spliced image corresponding to the image to be previewed;
and displaying the preview splicing picture.
2. The method for previewing large pictures based on browsers according to claim 1, wherein the method further comprises:
receiving marking instructions of the user for the preview mosaic;
and marking the preview splicing image according to the marking instruction.
3. The large picture previewing method based on the browser according to claim 2, wherein the markup instruction includes a markup type identifier and markup content, the markup type identifier is a brush markup type identifier, a box markup type identifier, a circle markup type identifier or a text markup type identifier, and the tagging the preview mosaic according to the markup instruction includes:
determining a target mark type according to the mark type identifier;
marking the marked content in the preview mosaic according to the target mark type.
4. The large browser-based picture previewing method according to any one of claims 1 to 3, wherein the target file further stores the size of each slice image corresponding to the size of the image to be previewed and the different level marks; splicing the plurality of slice images corresponding to the hierarchy identification to obtain a preview spliced image corresponding to the image to be previewed, and the method comprises the following steps:
and splicing the plurality of slice images corresponding to the hierarchy identification according to the size of the image to be previewed and the size of each slice image corresponding to the hierarchy identification to obtain a preview spliced image corresponding to the image to be previewed, wherein the size of the preview spliced image is the same as that of the image to be previewed.
5. The large-size browser-based picture previewing method according to any one of claims 1 to 3, wherein an image format of the image to be previewed is further stored in the target file, and the splicing of the plurality of slice images corresponding to the hierarchical identifier is performed to obtain a preview spliced image corresponding to the image to be previewed, and includes:
and splicing the plurality of slice images corresponding to the hierarchy identification according to the image format of the image to be previewed to obtain a preview splicing map corresponding to the image to be previewed, wherein the image format of the preview splicing map is the same as that of the image to be previewed.
6. The method for previewing large picture based on browser according to any one of claims 1 to 3, wherein said target file further stores therein a sequential identifier of each slice image corresponding to each of said plurality of hierarchical identifiers, and for each slice image corresponding to each of said hierarchical identifiers, said sequential identifier of said slice image characterizes the number of pixel rows and the number of pixel columns of said slice image in said image to be previewed;
splicing the plurality of slice images corresponding to the hierarchy identification to obtain a preview spliced image corresponding to the image to be previewed, and the method comprises the following steps:
and splicing the plurality of slice images corresponding to the hierarchy identification according to the sequence identification of each slice image corresponding to the hierarchy identification to obtain a preview spliced image corresponding to the image to be previewed.
7. The large browser-based picture preview method according to any one of claims 1 to 3, wherein the slice images corresponding to each of the hierarchical identifications are determined by:
performing at least one time of reduction processing on the image to be previewed according to a set proportion to obtain a target microimage corresponding to each of the plurality of levels, wherein for each two adjacent levels in the plurality of levels, the size proportion between the two target microimages corresponding to the two adjacent levels is the set proportion, and each level corresponds to a level identifier;
and for the target miniature image of each level, segmenting the target miniature image to obtain a plurality of slice images.
8. A large-size picture preview system based on a browser, which is applied to the large-size picture preview method based on the browser according to any one of claims 1 to 7, and which comprises:
the image preview instruction acquisition module is used for acquiring an image preview instruction of a user aiming at an image to be previewed, wherein the image preview instruction comprises an image identifier and a hierarchy identifier of the image to be previewed, and the image to be previewed is an image of which the data volume is larger than the set data volume;
the slice image acquisition module is used for acquiring a plurality of slice images corresponding to the hierarchy identifier from a target file corresponding to the image identifier according to the image preview instruction, wherein the target file stores a plurality of slice images corresponding to each hierarchy identifier in a plurality of hierarchy identifiers, and the sizes of the plurality of slice images corresponding to different hierarchy identifiers are different;
the slice splicing module is used for splicing the plurality of slice images corresponding to the hierarchy identification to obtain a preview splicing picture corresponding to the image to be previewed;
and the display module is used for displaying the preview splicing picture.
9. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, the processor implementing the method of any of claims 1-7 when executing the computer program.
10. A non-transitory computer-readable storage medium storing computer instructions that cause a computer to perform the method of any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211392249.2A CN115797168A (en) | 2022-11-08 | 2022-11-08 | Large-scale picture previewing method, system, equipment and medium based on browser |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211392249.2A CN115797168A (en) | 2022-11-08 | 2022-11-08 | Large-scale picture previewing method, system, equipment and medium based on browser |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115797168A true CN115797168A (en) | 2023-03-14 |
Family
ID=85436093
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211392249.2A Pending CN115797168A (en) | 2022-11-08 | 2022-11-08 | Large-scale picture previewing method, system, equipment and medium based on browser |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115797168A (en) |
-
2022
- 2022-11-08 CN CN202211392249.2A patent/CN115797168A/en active Pending
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109801347B (en) | Method, device, equipment and medium for generating editable image template | |
| US8935603B2 (en) | System and method for presentation creation | |
| US9111007B2 (en) | Adaptive rendering of a webpage on an electronic display device | |
| US9007405B1 (en) | Column zoom | |
| US8539342B1 (en) | Read-order inference via content sorting | |
| US20130205202A1 (en) | Transformation of a Document into Interactive Media Content | |
| US20120001922A1 (en) | System and method for creating and sharing personalized fonts on a client/server architecture | |
| CN106168874B (en) | webpage-based multimedia message editing method and device | |
| CN113535176A (en) | Page generation method and device | |
| US20170161354A1 (en) | Chart conversion system and method using metadata | |
| US20120001921A1 (en) | System and method for creating, managing, sharing and displaying personalized fonts on a client-server architecture | |
| US8462177B2 (en) | Systems and methods for providing content for use in multiple environments | |
| CN104050238A (en) | Map labeling method and map labeling device | |
| US9495334B2 (en) | Visualizing content referenced in an electronic document | |
| CN105956133B (en) | Method and device for displaying file on intelligent terminal | |
| US7865818B2 (en) | Form output control apparatus, form output control method, and computer readable program | |
| CN113515221B (en) | Picture and text comparison display method and device based on electronic document | |
| CN115797168A (en) | Large-scale picture previewing method, system, equipment and medium based on browser | |
| CN115601567A (en) | Page color pickup method, device, computer equipment, storage medium and product | |
| CN106155455B (en) | Method and device for controlling objects in interface | |
| JP2019021255A (en) | Digital publishing system, digital publishing method and computer program | |
| CN114185473B (en) | Method, device, equipment and readable storage medium for displaying pictures in page | |
| CN111259276A (en) | Method and device for displaying title content, electronic equipment and storage medium | |
| CN111949266B (en) | Webpage generation method and device and electronic equipment | |
| CN108415985B (en) | Adaptation method of HTML webpage on user equipment |
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 |