CN113238827A - Picture preview method, system, electronic equipment and storage medium - Google Patents
Picture preview method, system, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN113238827A CN113238827A CN202110534717.4A CN202110534717A CN113238827A CN 113238827 A CN113238827 A CN 113238827A CN 202110534717 A CN202110534717 A CN 202110534717A CN 113238827 A CN113238827 A CN 113238827A
- Authority
- CN
- China
- Prior art keywords
- picture
- button
- component
- previewing
- zoom
- 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
- 238000000034 method Methods 0.000 title claims abstract description 42
- 230000006870 function Effects 0.000 claims abstract description 24
- 238000012546 transfer Methods 0.000 claims abstract description 3
- 238000004590 computer program Methods 0.000 claims description 9
- 238000004891 communication Methods 0.000 description 9
- 238000011161 development Methods 0.000 description 5
- 238000010586 diagram Methods 0.000 description 5
- 238000013461 design Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 239000002131 composite material Substances 0.000 description 2
- 238000004519 manufacturing process Methods 0.000 description 2
- 239000011159 matrix material Substances 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 239000003086 colorant Substances 0.000 description 1
- 230000006378 damage Effects 0.000 description 1
- 238000013079 data visualisation Methods 0.000 description 1
- 238000005538 encapsulation Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000011156 evaluation Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 238000007639 printing Methods 0.000 description 1
- 230000009467 reduction Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4482—Procedural
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses a picture previewing method, a system, electronic equipment and a storage medium, wherein the picture previewing method comprises the following steps: a function transfer step: introducing url addresses of pictures needing to be previewed and di sp ay and callback functions for changing the di sp ay of the picture previewing component; a component setting step: setting an operation button on the picture preview component; a picture previewing step: when the picture previewing component previews the picture, the picture is operated through the operation buttons, and then the operated picture is displayed in real time. The invention improves the usability of the picture preview, improves the reusability of the picture preview component, and packages the picture preview component to be provided for different modules for use.
Description
Technical Field
The present application relates to development of computer software products, and in particular, to a method, a system, an electronic device, and a storage medium for previewing pictures.
Background
In our EIP products, there are places where previewing of pictures is required, and operations such as zooming in, zooming out, and rotating are performed on the pictures, and these operations are implemented by the picture previewing component. The implementation scheme of the image preview component for implementing the operation is that a block of area is independently obtained through the absolute positioning of the cs to perform corresponding operation on the image. If the picture is not absolutely positioned, any operation on the picture can cause redrawing of the page, the user feels that the page is refreshed, and the user experience of previewing the picture is not smooth. Most of the existing products only show pictures simply, but do not add other corresponding operations, and in addition, if the pictures are too large, scroll bars may be added, so that a picture preview component which can improve the convenience of picture preview and improve the reusability of the picture preview component is needed to solve a series of problems.
Disclosure of Invention
The embodiment of the application provides a picture previewing method, a picture previewing system, electronic equipment and a storage medium, so that the problems that most components in the prior art are inconvenient to preview pictures and poor in reusability of the picture previewing components are solved at least through the picture previewing method and the picture previewing system.
The invention provides a picture previewing method, which comprises the following steps:
a function transfer step: introducing a url address of a picture to be previewed and a display of a picture previewing component and changing a callback function of the display;
a component setting step: setting an operation button on the picture preview component;
a picture previewing step: when the picture previewing component previews the picture, the picture is operated through the operation buttons, and then the operated picture is displayed in real time.
In the above picture preview method, the operation buttons include a close button, an enlarge button, a reduce button, a clockwise button, and a counterclockwise button.
In the above-mentioned picture previewing method, the component setting step further includes setting a preset multiple value when the zoom-in button and the zoom-out button are clicked through a scale in cs, and setting a preset rotation angle value when the clockwise button and the counterclockwise button are clicked through a rotate in cs.
In the above method for previewing pictures, the step of previewing pictures includes:
an initial value recording step: setting src as the url address of the picture by using an img label, previewing the picture, and recording the current initial value of the zoom multiple and the initial value of the rotation angle of the picture;
picture operation steps: and adjusting the picture by clicking at least one of the zoom-in button, the zoom-out button, the clockwise rotation button and the anticlockwise rotation button, and displaying the adjusted picture.
The invention also provides a picture previewing system, which is suitable for the picture previewing method, and the picture previewing system comprises:
a function transfer-in unit: introducing a url address of a picture to be previewed and a display of a picture previewing component and changing a callback function of the display;
a component setting unit: setting an operation button on the picture preview component;
a picture preview unit: when the picture previewing component previews the picture, the picture is operated through the operation buttons, and then the operated picture is displayed in real time.
In the above picture preview system, the operation buttons include a close button, a zoom-in button, a zoom-out button, a clockwise button, and a counterclockwise button.
In the above-mentioned picture preview system, the preset value of the multiple when the zoom-in button and the zoom-out button are clicked is set by the scale in the css in the component setting unit, and the preset value of the rotation angle when the clockwise button and the counterclockwise button are clicked is set by the rotate in the css.
In the above picture preview system, the picture preview unit includes:
an initial value recording module: setting src as the url address of the picture by using an img label, previewing the picture, and recording the current initial value of the zoom multiple and the initial value of the rotation angle of the picture;
the picture operation module: and adjusting the picture by clicking at least one of the zoom-in button, the zoom-out button, the clockwise rotation button and the anticlockwise rotation button, and displaying the adjusted picture.
The present invention also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements any one of the above-mentioned picture preview methods when executing the computer program.
The invention further provides an electronic device readable storage medium, on which computer program instructions are stored, which, when executed by the processor, implement any of the above-mentioned picture preview methods.
Compared with the prior art, according to the method and the device, src is set to the incoming url address of the picture to be previewed by the img label through the incoming url address of the picture, the display of the component and the callback function of the display are changed, the zoom multiple and the rotation angle are set through the css, and the operation button is arranged on the picture previewing component, so that convenience of picture previewing is improved, fluency of user experience of picture previewing is improved, and reusability of the picture previewing component and retrieval result evaluation performance are improved.
The details of one or more embodiments of the application are set forth in the accompanying drawings and the description below to provide a more thorough understanding of the application.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:
FIG. 1 is a flowchart of a method for previewing pictures according to an embodiment of the present application;
FIG. 2 is a picture preview component display diagram according to an embodiment of the present application;
FIG. 3 is a schematic structural diagram of a picture preview system according to the present invention;
fig. 4 is a frame diagram of an electronic device according to an embodiment of the present application.
Wherein the reference numerals are:
a function transfer-in unit: 51;
a component setting unit: 52;
a picture preview unit: 53;
an initial value recording module: 531;
the picture operation module: 532;
80 parts of a bus;
a processor: 81;
a memory: 82;
a communication interface: 83.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application will be described and illustrated below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments provided in the present application without any inventive step are within the scope of protection of the present application.
It is obvious that the drawings in the following description are only examples or embodiments of the present application, and that it is also possible for a person skilled in the art to apply the present application to other similar contexts on the basis of these drawings without inventive effort. Moreover, it should be appreciated that such a development effort might be complex and tedious, but would nevertheless be a routine undertaking of design, fabrication, and manufacture for those of ordinary skill having the benefit of this disclosure, and thus should not be construed as a limitation of this disclosure.
Reference in the specification to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the specification. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of ordinary skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments without conflict.
Unless defined otherwise, technical or scientific terms referred to herein shall have the ordinary meaning as understood by those of ordinary skill in the art to which this application belongs. Reference to "a," "an," "the," and similar words throughout this application are not to be construed as limiting in number, and may refer to the singular or the plural. The present application is directed to the use of the terms "including," "comprising," "having," and any variations thereof, which are intended to cover non-exclusive inclusions; for example, a process, method, system, article, or apparatus that comprises a list of steps or modules (elements) is not limited to the listed steps or elements, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus. Reference to "connected," "coupled," and the like in this application is not intended to be limited to physical or mechanical connections, but may include electrical connections, whether direct or indirect. The term "plurality" as referred to herein means two or more. "and/or" describes an association relationship of associated objects, meaning that three relationships may exist, for example, "A and/or B" may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship. Reference herein to the terms "first," "second," "third," and the like, are merely to distinguish similar objects and do not denote a particular ordering for the objects.
The Component (Component) is a simple encapsulation of data and methods. In C + + Builder, a component is a specific object derived from TComponent. The components may have their own properties and methods. An attribute is a simple visitor to component data. The method is some simple and visible function of the component. The use of components can enable drag-and-drop programming, fast property handling, and true object-oriented design. The components are divided into composite components, extension components and custom components. A composite component: the existing various components are combined to form a new component, and the performance of the centralized component is centralized. An extension component: derived from entry of an assembly of existing assembliesAnd a new component is produced, and new performance is added to the original component or the control energy of the original component is changed. Self-defining the components: the Control class provides all entry capabilities required by the component, including keyboard and mouse event handling. The user-defined component is the most flexible and most big method, but the requirement on a developer is higher, you must write source codes for OnPaint events of Control types, you can also rewrite the WndProc method of Control types to process lower-layer windows messages, so you should learn GDI + and windows API. The three main items that the component developer should master are: attributes, events and methods. Professional third party controls due to higher complexity of component development[1]Some methods and attributes can be rewritten or expanded, so that some new functions can be realized, and meanwhile, the functions have larger customizability, and different characteristics can be set according to the needs of users, so that the requirements of specific projects are completely met. Common third party controls include form controls, report controls, user interface controls, and the like. The user interface component is used for developing and constructing a component of a User Interface (UI) and helping to complete the development of interface elements such as windows, text boxes, buttons, pull-down menus and the like in software development; the chart component is used for developing a component of a chart, helps software to realize data visualization, and realizes a complex chart which is difficult to independently complete during development; the report component is used for developing a report component and realizing the functions of browsing, viewing, designing, editing, printing and the like of the report in software; the form component is specially used for developing a form (CELL) component and mainly realizes the functions of data processing and operation in the grid.
A picture refers to a flat medium composed of graphics, images, and the like. The formats of pictures are many, but the pictures can be generally divided into two categories, namely dot matrix graphics and vector graphics, the formats of BMP, JPG and the like are commonly used as dot matrix graphics, and the formats of SWF, CDR, AI and the like belong to vector graphics. CSS (english-language full name: cascoding style Sheets) is a computer language used to represent file styles such as HTML (an application of standard general markup language) or XML (a subset of standard general markup language). The CSS can not only statically modify the web page, but also dynamically format elements of the web page in coordination with various scripting languages. The CSS can accurately control the typesetting of element positions in the webpage at a pixel level, supports almost all font and font styles and has the capability of editing webpage objects and model styles. CSS provides a style description for the HTML markup language that defines the way elements are displayed therein. CSS is a breakthrough in the field of Web design. With which it is possible to modify all page elements to which a small style update is related. CSS has the characteristics that CSS provides rich document style appearance and the ability to set text and background attributes; allowing a border to be created for any element, and the distance between the element border and other elements, and the distance between the element border and the element content; the case mode, the modification mode and other page effects of the text are allowed to be changed at will; CSS can define the style in the style attribute of HTML element, or define it in the header part of HTML document, or declare the style in a special CSS file for reference by HTML page. In a word, the CSS style sheet can store all style statements in a unified way for unified management; elements with the same style can be classified and defined by using the same style, a certain style can be applied to all HTML tags with the same name, and a CSS style can be assigned to a certain page element; the CSS style sheets can be separately stored in one CSS file, so that the same CSS style sheet can be used in a plurality of pages; the CSS style sheet does not theoretically belong to any pagefile, and can be referenced in any pagefile. Thus, the unification of a plurality of page styles can be realized; cascading is to set the same style for an element multiple times, which will use the last set attribute value. For example, the same set of CSS style sheets are used for a plurality of pages in a site, and some elements in some pages want to use other styles, so that one style sheet can be separately defined for the styles and applied to the pages; in a website using HTML to define page effects, a large number of or repeated table and font elements are often required to form various specifications of text styles, and as a result, a large number of HTML tags are generated, so that the size of a page file is increased. The statement of the style is independently put into the CSS style sheet, so that the volume of the page can be greatly reduced, and the time for loading the page can be greatly reduced; in addition, the multiplexing of the CSS style sheets with larger programs reduces the size of the page and reduces the downloading time. CSS is a language that defines style structures such as fonts, colors, locations, etc., and is used to describe the way information on a web page is formatted and realistic. CSS styles may be stored directly on the HTML web page or in a separate style sheet file. Either way, the style sheet contains rules that apply the style to elements of the specified type. For external use, style sheet rules are placed in an external style sheet document with file extension _ css. Style rules are formatting instructions that may be applied to elements in a web page, such as text paragraphs or links. A style rule consists of one or more style attributes and their values. The internal style sheet is directly placed in a webpage, the external style sheet is stored in an independent document, and the webpage is linked with the external style sheet through a special label. The "cascading" in the name CSS indicates the manner in which style sheet rules are applied to HTML document elements. Specifically, styles in the CSS style sheet form a hierarchy, with more specific styles overlaying common styles. The priority of the style rules is determined by the CSS according to this hierarchy, thereby achieving a cascading effect.
The invention provides a picture preview method, a system, an electronic device and a storage medium, wherein src is set to an incoming picture url address by transferring the url address of a picture and a display of a component and changing a callback function of the display, and then a zoom multiple and a rotation angle are set by css after the incoming picture url address is used for displaying a picture to be previewed, and an operation button is arranged on a picture preview component, so that the convenience of picture preview is improved, the fluency of a user experiencing picture preview is improved, and the reusability of the picture preview component is improved.
The present invention will be described with reference to specific examples.
Example one
The embodiment provides a picture preview method. Referring to fig. 1 to 2, fig. 1 is a flowchart illustrating a method for previewing pictures according to an embodiment of the present disclosure; fig. 2 is a picture preview assembly display diagram according to an embodiment of the present application, and as shown in the figure, the picture preview method includes the following steps:
the function transfer-in step S1: introducing a url address of a picture to be previewed and a display of a picture previewing component and changing a callback function of the display;
component setting step S2: setting an operation button on the picture preview component;
picture preview step S3: when the picture previewing component previews the picture, the picture is operated through the operation buttons, and then the operated picture is displayed in real time.
In an embodiment, the operation buttons include a close button, an enlarge button, a reduce button, a clockwise button, and a counterclockwise button.
In specific implementation, the device only needs to transmit the url of the picture to be previewed, the display and the callback function for changing the display, wherein the url of the picture to be previewed is used for displaying the picture to be previewed, and the display is used for controlling the display and destruction of the device and changing the display. And setting a closing button at the upper right corner of the picture preview component, and setting the display at the outermost layer of the component to be none through callback when the closing button is clicked to realize the closing operation of the picture preview component. And setting a closing button at the upper right corner of the picture preview component, and setting the display at the outermost layer of the component to be none through callback when the closing button is clicked to realize the closing operation of the picture preview component. Four buttons are arranged at the center of the bottom of the picture preview component, namely a zoom-in button, a zoom-out button, a clockwise button and an anticlockwise button.
In an embodiment, the step S2 of setting the components further includes setting preset values of multiples when the zoom-in button and the zoom-out button are clicked through scale in css, and setting preset values of rotation angles when the clockwise button and the counterclockwise button are clicked through rotate in css.
In specific implementation, the magnification is increased by 5% each time of clicking, the reduction magnification is reduced by 5%, the rotation angle of the clockwise rotation button is increased by 90 degrees, the rotation angle of the anticlockwise rotation button is reduced by 90 degrees, and the magnification or the rotation angle is updated after each operation.
In an embodiment, the picture previewing step S3 includes:
an initial value recording step: setting src as the url address of the picture by using an img label, previewing the picture, and recording the current initial value of the zoom multiple and the initial value of the rotation angle of the picture;
picture operation steps: and adjusting the picture by clicking at least one of the zoom-in button, the zoom-out button, the clockwise rotation button and the anticlockwise rotation button, and displaying the adjusted picture.
In specific implementation, when a picture to be previewed is clicked, the display value is changed into block, at this time, the picture previewing component is displayed at the topmost layer of the page, and at this time, a user can perform corresponding zooming and rotating operations on the picture. All operations on the picture are in the component, and the refreshing of the page is not caused.
Example two
Referring to fig. 3, fig. 3 is a schematic structural diagram of a picture preview system according to the present invention. As shown in fig. 3, the picture preview system of the present invention is suitable for the above picture preview method, and includes:
function transfer-in unit 51: introducing a url address of a picture to be previewed and a display of a picture previewing component and changing a callback function of the display;
the component setting unit 52: setting an operation button on the picture preview component;
picture preview unit 53: when the picture previewing component previews the picture, the picture is operated through the operation buttons, and then the operated picture is displayed in real time.
In the present embodiment, the operation buttons include a close button, an enlarge button, a reduce button, a clockwise button, and a counterclockwise button.
In this embodiment, the preset value of the magnification when the zoom-in button and the zoom-out button are clicked is set by the scale in the css in the component setting unit 52, and the preset value of the rotation angle when the clockwise button and the counterclockwise button are clicked is set by the rotate in the css.
In this embodiment, the picture preview unit 53 includes:
initial value recording module 531: setting src as the url address of the picture by using an img label, previewing the picture, and recording the current initial value of the zoom multiple and the initial value of the rotation angle of the picture;
the picture operation module 532: and adjusting the picture by clicking at least one of the zoom-in button, the zoom-out button, the clockwise rotation button and the anticlockwise rotation button, and displaying the adjusted picture.
EXAMPLE III
Referring to fig. 4, this embodiment discloses a specific implementation of an electronic device. The electronic device may include a processor 81 and a memory 82 storing computer program instructions.
Specifically, the processor 81 may include a Central Processing Unit (CPU), or A Specific Integrated Circuit (ASIC), or may be configured to implement one or more Integrated circuits of the embodiments of the present Application.
The memory 82 may be used to store or cache various data files for processing and/or communication use, as well as possible computer program instructions executed by the processor 81.
The processor 81 implements any of the picture preview methods in the above embodiments by reading and executing computer program instructions stored in the memory 82.
In some of these embodiments, the electronic device may also include a communication interface 83 and a bus 80. As shown in fig. 4, the processor 81, the memory 82, and the communication interface 83 are connected via the bus 80 to complete communication therebetween.
The communication interface 83 is used for implementing communication between modules, devices, units and/or equipment in the embodiment of the present application. The communication port 83 may also be implemented with other components such as: and the external equipment, the image/picture previewing equipment, the database, the external storage, the image/picture previewing workstation and the like are in data communication.
The bus 80 includes hardware, software, or both to couple the components of the electronic device to one another. Bus 80 includes, but is not limited to, at least one of the following: data Bus (Data Bus), Address Bus (Address Bus), Control Bus (Control Bus), Expansion Bus (Expansion Bus), and Local Bus (Local Bus). By way of example, and not limitation, Bus 80 may include an Accelerated Graphics Port (AGP) or other Graphics Bus, an Enhanced Industry Standard Architecture (EISA) Bus, a Front-Side Bus (FSB), a Hyper Transport (HT) Interconnect, an ISA (ISA) Bus, an InfiniBand (InfiniBand) Interconnect, a Low Pin Count (LPC) Bus, a memory Bus, a microchannel Architecture (MCA) Bus, a PCI (Peripheral Component Interconnect) Bus, a PCI-Express (PCI-X) Bus, a Serial Advanced Technology Attachment (SATA) Bus, a Video Electronics Bus (audio Electronics Association), abbreviated VLB) bus or other suitable bus or a combination of two or more of these. Bus 80 may include one or more buses, where appropriate. Although specific buses are described and shown in the embodiments of the application, any suitable buses or interconnects are contemplated by the application.
The electronic device may be connected to a picture preview system to implement the method described in connection with fig. 1-2.
The technical features of the embodiments described above may be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the embodiments described above are not described, but should be considered as being within the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
In summary, according to the invention, by transferring the url address of the picture and the display of the component and changing the callback function of the display, after the img tag sets src as the transferred url address of the picture to be previewed for displaying the picture to be previewed, the zoom factor and the rotation angle are set through css, and the operation button is arranged on the picture previewing component, so that convenience of picture previewing is improved, fluency of user experience picture previewing is improved, and reusability of the picture previewing component is improved.
The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent application shall be subject to the protection scope of the appended claims.
Claims (10)
1. A picture preview method is characterized by comprising the following steps:
a function transfer step: introducing a url address of a picture to be previewed and a display of a picture previewing component and changing a callback function of the display;
a component setting step: setting an operation button on the picture preview component;
a picture previewing step: when the picture previewing component previews the picture, the picture is operated through the operation buttons, and then the operated picture is displayed in real time.
2. The picture preview method according to claim 1, wherein the operation buttons include a close button, a zoom-in button, a zoom-out button, a clockwise button, and a counterclockwise button.
3. The picture previewing method according to claim 2, wherein the setting step further comprises setting a preset value of a multiple when the zoom-in button and the zoom-out button are clicked by a scale in cs, and setting a preset value of a rotation angle when the clockwise button and the counterclockwise button are clicked by a rotate in cs.
4. The picture previewing method according to claim 2, wherein said picture previewing step comprises:
an initial value recording step: setting src as the url address of the picture by using an img label, previewing the picture, and recording the current initial value of the zoom multiple and the initial value of the rotation angle of the picture;
picture operation steps: and adjusting the picture by clicking at least one of the zoom-in button, the zoom-out button, the clockwise rotation button and the anticlockwise rotation button, and displaying the adjusted picture.
5. A picture preview system, which is adapted to the picture preview method of any one of the above claims 1 to 4, the picture preview system comprising:
a function transfer-in unit: introducing a url address of a picture to be previewed and a display of a picture previewing component and changing a callback function of the display;
a component setting unit: setting an operation button on the picture preview component;
a picture preview unit: when the picture previewing component previews the picture, the picture is operated through the operation buttons, and then the operated picture is displayed in real time.
6. The picture preview system of claim 5, wherein the operation buttons include a close button, a zoom-in button, a zoom-out button, a clockwise button, and a counterclockwise button.
7. The picture preview system of claim 6, wherein the preset value of the magnification when the zoom-in button and the zoom-out button are clicked is set by a scale in css in the component setting unit, and the preset value of the rotation angle when the clockwise button and the counterclockwise button are clicked is set by a rotate in css.
8. The picture preview system of claim 7, wherein the picture preview unit comprises:
an initial value recording module: setting src as the url address of the picture by using an img label, previewing the picture, and recording the current initial value of the zoom multiple and the initial value of the rotation angle of the picture;
the picture operation module: and adjusting the picture by clicking at least one of the zoom-in button, the zoom-out button, the clockwise rotation button and the anticlockwise rotation button, and displaying the adjusted picture.
9. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor implements the picture preview method of any of claims 1 to 4 when executing the computer program.
10. An electronic device readable storage medium having stored thereon computer program instructions which, when executed by the processor, implement the picture preview method of any of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110534717.4A CN113238827A (en) | 2021-05-17 | 2021-05-17 | Picture preview method, system, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110534717.4A CN113238827A (en) | 2021-05-17 | 2021-05-17 | Picture preview method, system, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113238827A true CN113238827A (en) | 2021-08-10 |
Family
ID=77134666
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110534717.4A Pending CN113238827A (en) | 2021-05-17 | 2021-05-17 | Picture preview method, system, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113238827A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103677552A (en) * | 2012-09-12 | 2014-03-26 | 腾讯科技（深圳）有限公司 | Webpage picture control and display method and device thereof |
| CN104679432A (en) * | 2015-03-04 | 2015-06-03 | 成都品果科技有限公司 | Method for viewing pictures by cross-platform human-computer interaction based on mobile terminal viewer |
| CN110688595A (en) * | 2019-09-09 | 2020-01-14 | 上海凯京信达科技集团有限公司 | File online preview method, device, equipment and storage medium |
| CN111966274A (en) * | 2020-08-27 | 2020-11-20 | 广东巴金斯科技有限公司 | WeChat applet picture preview processing method, device, equipment and storage medium |
-
2021
- 2021-05-17 CN CN202110534717.4A patent/CN113238827A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103677552A (en) * | 2012-09-12 | 2014-03-26 | 腾讯科技（深圳）有限公司 | Webpage picture control and display method and device thereof |
| CN104679432A (en) * | 2015-03-04 | 2015-06-03 | 成都品果科技有限公司 | Method for viewing pictures by cross-platform human-computer interaction based on mobile terminal viewer |
| CN110688595A (en) * | 2019-09-09 | 2020-01-14 | 上海凯京信达科技集团有限公司 | File online preview method, device, equipment and storage medium |
| CN111966274A (en) * | 2020-08-27 | 2020-11-20 | 广东巴金斯科技有限公司 | WeChat applet picture preview processing method, device, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8645849B2 (en) | Method and apparatus for providing portioned web pages in a graphical user interface | |
| AU2005202722B2 (en) | Common charting using shapes | |
| US7263670B2 (en) | Information displaying method, information displaying device, and computer program | |
| US7412644B2 (en) | System and process for delivering and rendering scalable web pages | |
| US10366155B2 (en) | Method and apparatus for displaying data grids | |
| WO2020048326A1 (en) | Interface display method and system, and terminal device | |
| US20070180148A1 (en) | Method and apparatus for creating scalable hi-fidelity HTML forms | |
| US10210142B1 (en) | Inserting linked text fragments in a document | |
| CN106021394A (en) | Website construction method and apparatus | |
| CN106469047A (en) | A kind of list implementation method and device | |
| JP6975339B2 (en) | Backdrop rendering of digital components | |
| US11126787B2 (en) | Generating responsive content from an electronic document | |
| CN116383546B (en) | File processing method, system, computer device and computer readable storage medium | |
| CN113190781A (en) | Page layout method, device, equipment and storage medium | |
| CN115039064A (en) | Dynamic typesetting | |
| CN105956133A (en) | Method and apparatus for displaying file in intelligent terminal | |
| CN117055987A (en) | Webpage display method and device, electronic equipment and computer readable storage medium | |
| CN113238827A (en) | Picture preview method, system, electronic equipment and storage medium | |
| CN112417827B (en) | Method, device, electronic equipment and storage medium for on-line document editing and displaying | |
| CN110309449A (en) | Page rendering method and device | |
| CN114995699A (en) | Interface interaction method and device | |
| JP2004038334A (en) | Operating position storing method, structured document displaying method, structured document display unit, its program, and operating position storage data | |
| JP2019021255A (en) | Digital publishing system, digital publishing method and computer program | |
| CN111563157A (en) | Thumbnail display method and device | |
| TW200921417A (en) | A page setup system and method |
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 |