CN112148398B - Image processing method and device - Google Patents
Image processing method and device Download PDFInfo
- Publication number
- CN112148398B CN112148398B CN201910574361.XA CN201910574361A CN112148398B CN 112148398 B CN112148398 B CN 112148398B CN 201910574361 A CN201910574361 A CN 201910574361A CN 112148398 B CN112148398 B CN 112148398B
- Authority
- CN
- China
- Prior art keywords
- target image
- aspect ratio
- canvas
- display area
- width
- 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.)
- Active
Links
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
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformation in the plane of the image
- G06T3/40—Scaling the whole image or part thereof
Abstract
The invention provides an image processing method and device, comprising the following steps: acquiring a first aspect ratio of a display area in a front-end interface container and a second aspect ratio of a target image to be displayed, wherein the display area is configured with a canvas and displays the canvas; comparing the magnitude of the first aspect ratio with the magnitude of the second aspect ratio; configuring the height of the canvas to be equal to the height of the display area if the first aspect ratio is greater than the second aspect ratio, the width of the canvas being equal to the product of the height of the display area and the second aspect ratio; configuring the width of the canvas to be equal to the width of the display area if the first aspect ratio is less than the second aspect ratio, the height of the canvas being equal to the quotient of the width of the display area and the second aspect ratio; and filling the target image into the configured canvas. The invention can display the target image in a fast self-adaptive manner according to different sizes of the display area, and improves the image processing efficiency.
Description
Technical Field
The present invention relates to the field of image processing technologies, and in particular, to an image processing method and apparatus.
Background
With the rapid development of networks, the internet is applied more and more. People can browse a wide variety of information, including text, tables, images, etc., through a browser or app. The image is the most intuitive and clear way in the aspect of information transmission, so the display quality of the image directly influences the user experience.
Some website configuration image designers aim at the images required to be displayed, and aim at different screen sizes to process the images of each display area in a targeted manner, so that the displayed image effect is optimal, but due to the diversification of the screen terminal sizes, the processing mode is very low in efficiency, and the processing requirements of a large number of images are difficult to meet.
How to quickly and properly present images is therefore a problem facing various websites and apps.
Disclosure of Invention
In view of this, the present invention provides an image processing method and apparatus, so as to solve the problem of how to quickly and appropriately display an image on a terminal.
In one embodiment, there is provided an image processing method including:
acquiring a first aspect ratio of a display area in a front-end interface container and a second aspect ratio of a target image to be displayed, wherein the display area is configured with a canvas and displays the canvas;
comparing the first aspect ratio to the second aspect ratio;
configuring the height of the canvas to be equal to the height of the display area if the first aspect ratio is greater than the second aspect ratio, the width of the canvas being equal to the product of the height of the display area and the second aspect ratio;
if the first aspect ratio is less than the second aspect ratio, configuring the width of the canvas to be equal to the width of the display area, and the height of the canvas to be equal to the width of the display area divided by the second aspect ratio;
and filling the target image into the configured canvas.
In another embodiment, there is provided an image processing method including:
acquiring a first aspect ratio of a display area and a second aspect ratio of a target image to be displayed;
comparing the first aspect ratio to the second aspect ratio;
if the first aspect ratio is larger than the second aspect ratio, keeping the second aspect ratio unchanged, and adjusting the height of the target image to be equal to the height of the display area;
if the first aspect ratio is smaller than the second aspect ratio, keeping the second aspect ratio unchanged, and adjusting the width of the target image to be equal to the width of the display area;
and loading and displaying the adjusted target image in the display area.
In another embodiment, there is provided an image processing apparatus including:
an acquisition module: acquiring a first aspect ratio of a display area in a front-end interface container and a second aspect ratio of a target image to be displayed, wherein the display area is configured with a canvas and displays the canvas;
a comparison module: comparing the magnitude of the first aspect ratio with the magnitude of the second aspect ratio;
a first processing module: configuring the height of the canvas to be equal to the height of the display area if the first aspect ratio is greater than the second aspect ratio, the width of the canvas being equal to the product of the height of the display area and the second aspect ratio;
a second processing module: configuring the width of the canvas to be equal to the width of the display area if the first aspect ratio is less than the second aspect ratio, the height of the canvas being equal to the quotient of the width of the display area and the second aspect ratio;
a display module: and filling the target image into the configured canvas.
In another embodiment, there is provided an image processing apparatus including:
an acquisition module: acquiring a first aspect ratio of a display area and a second aspect ratio of a target image to be displayed;
a comparison module: comparing the magnitude of the first aspect ratio with the magnitude of the second aspect ratio;
a first processing module: if the first aspect ratio is larger than the second aspect ratio, keeping the second aspect ratio unchanged, and adjusting the height of the target image to be equal to the height of the display area;
a second processing module: if the first aspect ratio is smaller than the second aspect ratio, keeping the second aspect ratio unchanged, and adjusting the width of the target image to be equal to the width of the display area;
a display module: and loading and displaying the adjusted target image in the display area.
In another embodiment, the present invention also provides a non-transitory computer readable storage medium storing instructions that, when executed by a processor, cause the processor to perform the steps in the image processing method described above.
In another embodiment, the present invention also provides an image processing apparatus including a processor and the non-transitory computer readable storage medium described above.
The image processing method and the device provided by the invention can rapidly and adaptively display the target image according to the size of the display area, and can restore the imaging effect of the real image on the appointed display equipment to the maximum extent without carrying out secondary or multiple development aiming at different display areas of different display equipment, so that on one hand, the secondary or multiple development is not required, the image processing efficiency is improved, on the other hand, the step of adjusting the target image is simple and clear, the adjusting time of the target image is reduced, and the image processing efficiency is further improved.
In addition, the method of the invention also supports various operations of the target image, such as amplification, reduction, dragging, resetting, downloading and the like, or displays the real position information and RGB color value of the target image corresponding to the mouse according to the position of the mouse, thereby expanding the function supported by the target image and enriching the user experience.
Drawings
The following drawings are only schematic illustrations and explanations of the present invention, and do not limit the scope of the present invention:
FIG. 1 is a first flowchart of an image processing method according to an embodiment of the present invention;
FIG. 2 is a second flowchart of an image processing method according to an embodiment of the present invention;
FIG. 3 is a diagram illustrating a first structure of an image processing apparatus according to an embodiment of the present invention;
fig. 4 is a second structural diagram of the image processing apparatus according to the embodiment of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is further described in detail below with reference to the accompanying drawings and examples.
Example one
The invention provides an image processing method, which is applied to front-end development (the front-end development is a process of creating a Web or app front-end interface to be presented to a user, and user interface interaction of Internet products is realized through HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) and JavaScript as well as various derived technologies, frames and solutions), as shown in figure 1, the method comprises the following steps:
s101: acquiring a first aspect ratio of a display area in a front-end interface container and a second aspect ratio of a target image to be displayed, wherein the display area is configured with a canvas and displays the canvas;
the display area may be a partial area or a full area of the container. For example, the width of the display area may be the width of the container or the difference between the container width and a preset gap; the height of the display area may be the height of the container or the difference between the container height and the preset gap.
S102: comparing the first aspect ratio to the second aspect ratio;
s103: configuring the height of the canvas to be equal to the height of the display area if the first aspect ratio is greater than the second aspect ratio, the width of the canvas being equal to the product of the height of the display area and the second aspect ratio;
s104: if the first aspect ratio is less than the second aspect ratio, configuring a width of the canvas equal to a width of the display area and a height of the canvas equal to a quotient of the width of the display area and the second aspect ratio;
s105: and filling the target image into the configured canvas.
If the first aspect ratio is equal to the second aspect ratio, S103 may be performed, i.e., the height of the canvas is configured to be equal to the height of the display area and the width of the canvas is equal to the product of the height of the display area and the second aspect ratio, or S104 may be performed, i.e., the width of the canvas is configured to be equal to the width of the display area and the height of the canvas is equal to the quotient of the width of the display area and the second aspect ratio, or the height of the canvas may be configured to be equal to the height of the display area and the width of the canvas is configured to be equal to the width of the display area.
A detailed description of the application of the method of FIG. 1 to a browser is given below, with other front-end interfaces similar to browsers.
The display area in fig. 1 is determined according to the spatial position and width height (or the width height after considering the preset gap) allocated by the browser to the Container (an interface component which can accommodate other components such as windows, dialog boxes, etc.), and is used as the boundary of the target image presentation.
After the Container is placed, a canvas (an interface object, which sets an area and can dynamically draw images) needs to be configured, and an initialization state of the canvas is set, where the initialization state is a state of the canvas before the target image is loaded into the Container, and the size of the canvas is not fixed at this time, and the size of the target image needs to be determined by acquiring the size of the target image transmitted through a browser. The invention does not limit the size of the canvas in the initial state. The method of FIG. 1 is described below in the initial state of the canvas which is full of Container containers display area.
When the width of the display area of the container is w1, the height thereof is h1, and the first aspect Ratio is Ratio1= w1/h1, the width of the canvas which is laid over the entire display area at the time of initialization is w1, the height thereof is h1, and the aspect Ratio is w1/h1.
When the canvas is initialized, the compatibility check of the browser is needed, which includes: the canvas object is created and it is determined whether the browser can generate an available canvas drawing context. Only if the drawing context is available, the canvas attributes can be adjusted and the method of FIG. 1 performed.
After the canvas is initialized, the browser receives a target image transmitted from the internet or the local, acquires size information of the target image, and records the real width as w2 and the real height as h2, so that the second aspect Ratio is Ratio2= w2/h2. The target image true width w2 is the width of the target image without any processing acquired by the browser, and the target image true height h2 is the height of the target image without any processing acquired by the browser. The original image is not processed, including not being subjected to any stretching, extending, stretching, rotating and the like, and is the size of the original image required to be displayed on the browser.
Comparing the relative magnitude of Ratio2 and Ratio 1:
when Ratio1> Ratio2, the height of the canvas arranged in the Container before is kept unchanged (when the height of the canvas in the initial state ≠ h1, then the height of the canvas is made = h 1), and the width of the canvas in the Container is configured as: h1 Ratio2. Optionally, the adjusted canvas is set to be displayed horizontally centered in the Container.
When Ratio1< Ratio2, the width of the canvas that was previously arranged in the Container is kept unchanged (when the width of the canvas in the initial state ≠ w1, then the width of the canvas = w 1), the high configuration of the canvas in the Container is: w1/Ratio2. Optionally, the adjusted canvas is set to be displayed vertically centered in the Container.
When Ratio1= Ratio2, the canvas sizes w1 and h1 in the initialization state are kept unchanged (when the width ≠ w1 and the height ≠ h1 of the canvas in the initialization state, the width = w1 and the height = h1 of the canvas are made).
The adjustment of the canvas size can be realized by using the width and the height as the attribute assignment of the canvas object, where the attribute assignment includes the canvas size (width and height) assignment and the canvas pixel size assignment, and at the same time, the width and the height of the CSS (cascading style sheet) also need to be assigned at the same time, and are used as the subsequent scaling operation.
After the canvas is set, the target image is filled into the canvas as a background, and the canvas is covered with the whole canvas.
In the embodiment, the browser adapts the target image by adjusting the size of the canvas of canvas, and then fills the canvas with the target image as the background picture, so as to achieve the purpose of fast adaptive display of the target image.
HTML5 is the latest revised version of HTML, and the standards set by W3C (World Wide Web Consortium) in 2014 for 10 months have been aimed to replace the HTML4.01 and XHTML1.0 standards set in 1999.
In the WEB of HTML5, the canvas is widely used. The Canvas is an important attribute added in the HTML5 and is specially used for displaying and drawing images. Setting a canvas tag on a webpage corresponds to placing a "canvas" on the webpage, and then displaying and drawing an image on the canvas. Since the images displayed and drawn in the canvas are generally realized by adopting the JavaScript language, the pixels related to the codes written by the JavaScript language on the standard display equipment correspond to the minimum display units of the display equipment one by one, and the image effect displayed on the browser finally can obtain the clearest effect.
Optionally, when a change in the width and/or height of the display area is detected, for example, after the browser rearranges the container size, the method of fig. 1 may be automatically triggered until the target image is filled into the reconfigured canvas to achieve adaptive adjustment of the target image.
Filling the canvas with the target image as a background has the further advantages of: other function interfaces can be added to the canvas to draw a required ROI (region of interest) map, so as to implement more operations on the target image, which specifically includes: responding to a first trigger signal, and executing a first operation on a target image, wherein the first operation at least comprises the following steps: the target image is enlarged in the display area with the second aspect ratio of the target image unchanged, the target image is reduced in the display area with the second aspect ratio of the target image unchanged, the target image is dragged in the display area, and the target image is reset or downloaded in the display area. Wherein the target image remains unchanged at the second aspect ratio before and after the reset, and the target image after the reset is maximally displayed in the canvas.
For example, after the target image is arranged, an icon button for enlargement, reduction, dragging, reset, saving is provided in the upper right corner or other area of the entire Container. The user can perform corresponding operation according to the requirement.
Icon buttons displayed on the front-end interface are represented as nodes at the rear end of the interface, each first operation corresponds to one node, and different first operations can be triggered by binding corresponding button clicking events to each node.
The amplifying function of the amplifying button is amplifying according to an array of specified multiples, and the array can be set as follows:
largeArray＝[1,1.5,2,3,4,5,6,7,8,12,16,20,25,30,35,40,50,60,80,100]；
when the user selects the largeArray [ N ], the conversion magnification is performed on the target image to a largeArray [ N ] multiple, and no magnification is performed when the maximum value is obtained.
The zoom-out function of the zoom-out button is to zoom in according to an array of specified multiples, which can be set as follows:
smallArray＝[1,1.5,2,3,4,5,6,7,8,12,16,20,25,30,35,40,50,60,80,100]；
when the user selects smallArray [ N ], the conversion is carried out on the target image and the target image is reduced to smallArray [ N ] times, and the target image is not reduced after the target image is taken to the minimum value.
In addition to zooming the target image according to the transform attribute of the CSS (cascading style sheet), the target image may also be zoomed according to the characteristic of the canvas pixelized image, each pixel of the target image is scaled in equal proportion (without changing the aspect ratio of the pixel), and the RGB value of the pixel is not changed, and when the scaling is finished, the canvas is rendered again. When the target image is amplified to the limit (namely the last item of the largeArray array), the target image is displayed in a rectangular pixel point mode, so that the target image can be ensured not to be distorted to the maximum extent.
For example, after the target image is laid out, the target image is displayed in an enlarged or reduced size by scrolling the mouse wheel on the canvas.
When a mouse wheel rolls, a browser is required to monitor the type of a wheel event, and the wheel events supported by all browsers include two types: mousewheel and dommoursescroll. When the mousewheel or the DOMMouseScroll is monitored in the container, acquiring a node with a zooming-out function and a node with a zooming-in function, judging whether the current roller event is zooming-in operation or zooming-out operation, and calling a zooming-in image function when the current roller event is zooming-in operation; otherwise, calling the image reduction function for reduction operation. The input parameters of the reduced image function are the container and the node of the reduction function, and the input parameters of the enlarged image function are the container and the node of the enlargement function.
When the target image is reduced to the width = the width of the canvas and the height of the target image is less than or equal to the height of the canvas, or when the height = the height of the canvas and the width of the target image is less than or equal to the width of the canvas, the reduced display of the target image is no longer supported, and the state at this time is the minimum state or the first display state of the target image.
When the mouse wheel or the click magnification icon performs the magnification operation on the target image, the magnification operation on the target image is not performed when the set limit value is reached, and the state at this time is the maximum state of the target image.
The reset function of the reset button refers to resetting the target image to a state before the browser zoom operation regardless of whether the target image is dragged or zoomed. This state is: the zoom factor of the target image is 1, the transform attribute of the css (cascading style sheet) takes the scale (1), and the aspect ratio of the target image is still the second aspect ratio.
The downloading and saving functions of the downloading button need to consider the problem of incompatibility among browsers, and different codes are needed to be respectively used for realizing the downloading and saving functions between the IE browser and other browsers.
And when the browser is an IE browser, acquiring a storage path of the target image, creating an asynchronous thread, and storing the target image to the storage path.
And when the object image is not the IE browser, creating a connection tag, setting the storage name of the target image, continuously setting the attribute of the connection tag as undisplayed or hidden, setting the content of the connection tag as the storage path of the target image, then inserting the connection tag into the body, automatically starting downloading after detecting the clicking action of the connection tag, and deleting the tag after downloading.
Dragging the target image in the display area includes: the target image is arbitrarily dragged in the display area based on the mouse, and when the target image is in the zoom state, the target image in the zoom state can also be arbitrarily dragged in the display area without being influenced by the zoom state. In the dragging process, the size and definition of the target image are not affected.
In addition, the canvas is filled with the target image as the background, and the canvas has the following advantages: when the mouse is positioned on the canvas, the coordinate and/or the pixel value of the target image pixel corresponding to the position of the mouse are supported to be displayed, so that the user can know the information of the target image conveniently.
For example, the coordinates of the target image pixel corresponding to the current mouse position are displayed at a first preset position (e.g., the lower right corner of the Container or other area) of the front-end interface, and the real RGB color value of the target image pixel corresponding to the current mouse position is displayed at a second preset position (e.g., the lower right corner of the Container is adjacent to the first preset position or other area) of the front-end interface. The displayed coordinates and real RGB color values can be dynamically changed in real time as the mouse moves over the canvas without delay problems.
Alternatively, the pixel coordinates of the position of the mouse in the target image can be displayed by:
the first step is as follows: when the mouse is on the canvas, calculating pixel coordinates (PosX, posY) of the position of the mouse in the target image according to the position coordinates (curMouseX, curMouseY) of the mouse on the front-end interface, the coordinates (curX, curY) of the container on the front-end interface, the zoom multiple largeRatio of the target image, the ratio raWid of the display width and the real width of the target image in the container and the ratio raHei of the display height and the real height of the target image in the container;
the second step is that: displaying pixel coordinates (PosX, posY) at a first preset position of the front-end interface;
wherein, the abscissa PosX in the pixel coordinate is in positive correlation with the abscissa curMouseX in the position coordinate of the mouse on the front-end interface, the display width of the target image in the container is in a negative correlation with the abscissa curX in the coordinates of the container on the front-end interface, the zoom multiple largeRatio of the target image, and the ratio raWid of the display width and the real width of the target image in the container;
the ordinate PosY in the pixel coordinate is in positive correlation with the ordinate curMouseY in the position coordinate of the mouse on the front end interface, and is in negative correlation with the ordinate curY in the coordinate of the container on the front end interface, the zoom multiple largeRatio of the target image, and the ratio raHei of the display height and the real height of the target image in the container.
Such as:
PosX＝(curMouseX-curX)/(raWid*(largeRatio))；
PosY＝(curMouseY-curY)/(raHei*(largeRatio))；
it should be noted that: when (curMouseX, curMouseY) is the coordinate of the mouse relative to the upper left corner of the browser, then (curX, curY) is the coordinate of the upper left corner of the container relative to the upper left corner of the browser; when (curMouseX, curMouseY) is the coordinate of the mouse relative to the lower left corner of the browser, then (curX, curY) is the coordinate of the lower left corner of the container relative to the lower left corner of the browser.
Optionally, displaying the pixel value of the position of the mouse in the target image at a second preset position of the front-end interface may be implemented by the following steps:
the first step is as follows: when the mouse is positioned on the canvas, acquiring a drawing context of the canvas, and inputting a pixel coordinate (PosX, posY) of the position of the mouse in the target image, a ratio raWid of a display width and a real width of the target image in a container and a ratio raHei of a display height and a real height of the target image in the container into an API interface getImageData function of the drawing context to obtain a pixel value of the position of the mouse in the target image;
the second step is that: and displaying the pixel value at a second preset position of the front-end interface.
When the mouse is located on the canvas, the first preset position and the second preset position of the front-end interface display the real position (PosX, posY) and the real RGB color value of the position of the mouse in the target image.
When the mouse position is not on the canvas, or exceeds the canvas boundary, at this time, the first preset position and the second preset position of the front interface do not display the (PosX, posY) value and the real RGB color value, or display the real coordinates (PosX, posY) as 0 or null value, and the real RGB color value as 000 or null value, regardless of whether the mouse is in the Container.
When the browser does not acquire the target image, the canvas cannot display the target image at this time, and the canvas fills the entire Container or does not display the canvas.
When the browser does not obtain the target image, the operation icons of zooming, resetting, downloading and saving on the browser of the front-end interface are all grayed, and the operation is not allowed.
When the browser does not obtain the target image, the first preset position and the second preset position of the front-end interface browser do not display the (PosX, posY) value and the real RGB color value, or display that the real coordinate (PosX, posY) is 0 or null value, and the real RGB color value is 000 or null value.
Example two
As shown in fig. 2, the image processing method of the present invention includes:
s201: acquiring a first aspect ratio of a display area and a second aspect ratio of a target image to be displayed;
s202: comparing the magnitude of the first aspect ratio with the magnitude of the second aspect ratio;
s203: if the first aspect ratio is larger than the second aspect ratio, keeping the second aspect ratio unchanged, and adjusting the height of the target image to be equal to the height of the display area;
assuming that the width and height of the display region is w1, h1, ratio1= w1/h1, the width and height of the target image is w2, h2, and ratio2= w2/h2, the adjusted h2'= h1, w2' = h1 × ratio2.
S204: if the first aspect ratio is smaller than the second aspect ratio, keeping the second aspect ratio unchanged, and adjusting the width of the target image to be equal to the width of the display area;
assuming that the width and height of the display region are w1, h1, ratio1= w1/h1, the width and height of the target image are w2, h2, and ratio2= w2/h2, the adjusted w2'= w1, h2' = w1/ratio2.
S205: and loading and displaying the adjusted target image in the display area.
In the second embodiment of the method, the steps S201 to S204 may be implemented in a terminal, or may be implemented in a server side, and the server (or the terminal) adjusts the size of the target image in the steps 202 to 204 by acquiring the first aspect ratio of the display area and the second aspect ratio information of the target image, and then displays the target image in the terminal.
In addition, when detecting that the width and/or height of the display area changes, the method of fig. 2 may be set to be automatically triggered until the target image is filled into the reconfigured canvas, so as to achieve adaptive adjustment of the target image.
The image processing method provided by the invention can be used for rapidly and adaptively displaying the target image according to the size of the display area (steps S201-S204), on one hand, secondary or multiple development is not needed, and the image processing efficiency is improved, on the other hand, the step of adjusting the target image is simple and clear, the adjusting time of the target image is reduced, and the image processing efficiency is further improved.
The present invention also provides an image processing apparatus, as shown in fig. 3, applied to front-end development, including:
an acquisition module (301): acquiring a first aspect ratio of a display area in a front-end interface container and a second aspect ratio of a target image to be displayed, wherein the display area is configured with a canvas and displays the canvas;
a comparison module (302): comparing the first aspect ratio to the second aspect ratio;
first processing module (303): if the first aspect ratio is greater than or equal to the second aspect ratio, configuring the height of the canvas to be equal to the height of the display area, and the width of the canvas to display the product of the height of the area and the second aspect ratio;
second processing module (304): if the first aspect ratio is less than the second aspect ratio, configuring a width of the canvas equal to a width of the display area and a height of the canvas equal to a quotient of the width of the display area and the second aspect ratio;
display module (305): and filling the target image into the configured canvas.
The apparatus may further comprise:
a detection module: and when the width and/or the height of the display area are/is changed, returning to the acquisition module until the target image is filled into the reconfigured canvas.
The apparatus may further comprise:
a triggering module: responding to a first trigger signal, and executing a first operation on the target image, wherein the first operation at least comprises the following steps: enlarging the target image in the display area with the second aspect ratio of the target image unchanged, reducing the target image in the display area with the second aspect ratio of the target image unchanged, dragging the target image in the display area, resetting the target image, or downloading the target image.
The apparatus may further comprise:
a pixel coordinate display module: when the mouse is on the canvas, calculating pixel coordinates (PosX, posY) of the position of the mouse in the target image according to the position coordinates (curMouseX, curMouseY) of the mouse on the front end interface, the coordinates (curX, curY) of the container on the front end interface, the zoom multiple largeRatio of the target image, the ratio raWid of the display width and the real width of the target image in the container and the ratio raHei of the display height and the real height of the target image in the container;
displaying pixel coordinates (PosX, posY) at a first preset position of a front-end interface;
the system comprises a container, a front end interface, a mouse, a pixel coordinate, a display width and a real width, wherein an abscissa PosX in the pixel coordinate and an abscissa curMouseX in a position coordinate of the mouse on the front end interface are in a positive correlation relationship, and a negative correlation relationship is formed between the abscissa curX in a coordinate of the container on the front end interface, a zoom multiple largeRatio of a target image and a ratio raWid of the display width and the real width of the target image in the container;
the ordinate PosY in the pixel coordinate is in positive correlation with the ordinate curMouseY in the position coordinate of the mouse on the front end interface, and is in negative correlation with the ordinate curY in the coordinate of the container on the front end interface, the zoom multiple largeRatio of the target image, and the ratio raHei of the display height and the real height of the target image in the container.
The apparatus may further comprise:
a pixel value display module: when the mouse is positioned on the canvas, acquiring a drawing context of the canvas, and inputting a pixel coordinate (PosX, posY) of the position of the mouse in the target image, a ratio raWid of a display width and a real width of the target image in a container, and a ratio raHei of a display height and a real height of the target image in the container into an API interface getImageData function of the drawing context to obtain a pixel value of the position of the mouse in the target image;
and displaying the pixel value at a second preset position of the front-end interface.
The present invention also includes an image processing apparatus, as shown in fig. 4, comprising:
an acquisition module (401): acquiring a first aspect ratio of a display area and a second aspect ratio of a target image to be displayed;
a comparison module (402): comparing the magnitude of the first aspect ratio with the magnitude of the second aspect ratio;
first processing module (403): if the first aspect ratio is larger than the second aspect ratio, keeping the second aspect ratio unchanged, and adjusting the height of the target image to be equal to the height of the display area;
second processing module (404): if the first aspect ratio is smaller than the second aspect ratio, keeping the second aspect ratio unchanged, and adjusting the width of the target image to be equal to the width of the display area;
display module (405): and loading and displaying the adjusted target image in the display area.
The apparatus may further comprise:
a detection module: and when the width and/or the height of the display area are/is changed, returning to the acquisition module until the target image is filled into the reconfigured canvas.
The present invention also provides a non-transitory computer readable storage medium storing instructions that, when executed by a processor, cause the processor to perform the steps in the image processing method described above.
The present invention also provides an image processing apparatus comprising a processor and the non-transitory computer readable storage medium described above.
The above description is only for the purpose of illustrating the preferred embodiments of the present invention and is not to be construed as limiting the invention, and any modifications, equivalents, improvements and the like made within the spirit and principle of the present invention should be included in the scope of the present invention.
Claims (13)
1. An image processing method, comprising:
acquiring a first aspect ratio of a display area in a front-end interface container and a second aspect ratio of a target image to be displayed, wherein the display area is configured with a canvas and displays the canvas;
comparing the magnitude of the first aspect ratio to the second aspect ratio;
configuring a height of the canvas equal to a height of the display area if the first aspect ratio is greater than the second aspect ratio, the width of the canvas equal to a product of the height of the display area and the second aspect ratio;
configuring a width of the canvas equal to a width of the display area and a height of the canvas equal to a quotient of the width of the display area and the second aspect ratio if the first aspect ratio is less than the second aspect ratio;
filling the target image into the configured canvas;
when a mouse is positioned on the canvas, calculating the pixel coordinates of the position of the mouse in the target image according to the position coordinates of the mouse on a front end interface, the coordinates of the container on the front end interface, the zoom multiple of the target image, the ratio of the display width to the real width of the target image in the container and the ratio of the display height to the real height of the target image in the container;
and displaying the pixel coordinate at a first preset position of the front-end interface.
2. The method of claim 1, further comprising:
and when the width and/or the height of the display area are/is changed, returning to the step of acquiring the first aspect ratio of the display area in the front-end interface container and the second aspect ratio of the target image to be displayed until the target image is filled into the reconfigured canvas.
3. The method according to claim 1 or 2, characterized in that the method further comprises: responding to a first trigger signal, and executing a first operation on the target image, wherein the first operation at least comprises the following steps: enlarging the target image in the display area while keeping the second aspect ratio of the target image unchanged, reducing the target image in the display area while keeping the second aspect ratio of the target image unchanged, dragging the target image in the display area, resetting the target image, or downloading the target image.
4. The method according to claim 1 or 2, wherein the abscissa in the pixel coordinates is in a positive correlation with the abscissa of the mouse in the position coordinates of the front end interface, and is in a negative correlation with the abscissa in the coordinates of the container on the front end interface, the zoom factor of the target image, and the ratio of the display width and the real width of the target image in the container;
the vertical coordinate in the pixel coordinate and the vertical coordinate of the mouse in the position coordinate of the front end interface are in positive correlation, and the vertical coordinate of the container in the coordinate on the front end interface, the zoom multiple of the target image and the ratio of the display height and the real height of the target image in the container are in negative correlation.
5. The method of claim 4, wherein after the target image is populated into the configured canvas, the method further comprises:
when the position of a mouse is on the canvas, acquiring a drawing context of the canvas, and inputting the pixel coordinate of the position of the mouse in the target image, the ratio of the display width to the real width of the target image in the container and the ratio of the display height to the real height of the target image in the container into an API interface getImageData function of the drawing context to obtain the pixel value of the position of the mouse in the target image;
and displaying the pixel value at a second preset position of the front-end interface.
6. An image processing method, comprising:
acquiring a first aspect ratio of a display area in a front-end interface container and a second aspect ratio of a target image to be displayed, wherein the display area is configured with a canvas and displays the canvas;
comparing the magnitude of the first aspect ratio to the second aspect ratio;
configuring a height of the canvas equal to a height of the display area if the first aspect ratio is greater than the second aspect ratio, the width of the canvas equal to a product of the height of the display area and the second aspect ratio;
configuring a width of the canvas equal to a width of the display area and a height of the canvas equal to a quotient of the width of the display area and the second aspect ratio if the first aspect ratio is less than the second aspect ratio;
filling the target image into the configured canvas;
when the position of a mouse is on the canvas, obtaining a drawing context of the canvas, inputting the pixel coordinate of the position of the mouse in the target image, the ratio of the display width to the real width of the target image in the container and the ratio of the display height to the real height of the target image in the container into an API interface getImageData function of the drawing context, and obtaining the pixel value of the position of the mouse in the target image;
and displaying the pixel value at a second preset position of the front-end interface.
7. The method of claim 6, further comprising:
and when the width and/or the height of the display area are/is changed, returning to the step of acquiring the first aspect ratio of the display area and the second aspect ratio of the target image to be displayed until the target image is reloaded and displayed in the changed display area.
8. The method of claim 6, further comprising: responding to a first trigger signal, and executing a first operation on the target image, wherein the first operation at least comprises the following steps: enlarging the target image in the display area while keeping the second aspect ratio of the target image unchanged, reducing the target image in the display area while keeping the second aspect ratio of the target image unchanged, dragging the target image in the display area, resetting the target image, or downloading the target image.
9. The method of claim 6 or 7, wherein after the target image is populated into the configured canvas, the method further comprises:
when a mouse is positioned on the canvas, calculating the pixel coordinates of the position of the mouse in the target image according to the position coordinates of the mouse on a front end interface, the coordinates of the container on the front end interface, the zoom multiple of the target image, the ratio of the display width to the real width of the target image in the container and the ratio of the display height to the real height of the target image in the container;
and displaying the pixel coordinate at a first preset position of the front-end interface.
10. An image processing apparatus, applied to front-end development, comprising:
an acquisition module: acquiring a first aspect ratio of a display area in a front-end interface container and a second aspect ratio of a target image to be displayed, wherein the display area is configured with a canvas and displays the canvas;
a comparison module: comparing the magnitude of the first aspect ratio to the second aspect ratio;
a first processing module: configuring a height of the canvas equal to a height of the display area if the first aspect ratio is greater than or equal to the second aspect ratio, the width of the canvas equal to a product of the height of the display area and the second aspect ratio;
a second processing module: configuring a width of the canvas equal to a width of the display area and a height of the canvas equal to a quotient of the width of the display area and the second aspect ratio if the first aspect ratio is less than the second aspect ratio;
a display module: populating the canvas with the target image as a background image; when a mouse is positioned on the canvas, calculating the pixel coordinates of the position of the mouse in the target image according to the position coordinates of the mouse on a front end interface, the coordinates of the container on the front end interface, the zoom multiple of the target image, the ratio of the display width to the real width of the target image in the container and the ratio of the display height to the real height of the target image in the container; and displaying the pixel coordinate at a first preset position of the front-end interface.
11. An image processing apparatus characterized by comprising:
an acquisition module: acquiring a first aspect ratio of a display area in a front-end interface container and a second aspect ratio of a target image to be displayed, wherein the display area is configured with a canvas and displays the canvas;
a comparison module: comparing the magnitude of the first aspect ratio to the second aspect ratio;
a first processing module: configuring a height of the canvas equal to a height of the display area if the first aspect ratio is equal to or greater than the second aspect ratio, the width of the canvas equal to a product of the height of the display area and the second aspect ratio;
a second processing module: configuring a width of the canvas equal to a width of the display area and a height of the canvas equal to a quotient of the width of the display area and the second aspect ratio if the first aspect ratio is less than the second aspect ratio;
a display module: populating the canvas with the target image as a background image; when the position of a mouse is on the canvas, obtaining a drawing context of the canvas, inputting the pixel coordinate of the position of the mouse in the target image, the ratio of the display width to the real width of the target image in the container and the ratio of the display height to the real height of the target image in the container into an API interface getImageData function of the drawing context, and obtaining the pixel value of the position of the mouse in the target image;
and displaying the pixel value at a second preset position of the front-end interface.
12. A non-transitory computer readable storage medium storing instructions that, when executed by a processor, cause the processor to perform the steps in the image processing method of any of claims 1 to 9.
13. An image processing apparatus comprising a processor and the non-transitory computer readable storage medium of claim 12.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910574361.XA CN112148398B (en) | 2019-06-28 | 2019-06-28 | Image processing method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910574361.XA CN112148398B (en) | 2019-06-28 | 2019-06-28 | Image processing method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112148398A CN112148398A (en) | 2020-12-29 |
| CN112148398B true CN112148398B (en) | 2022-10-11 |
Family
ID=73869264
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910574361.XA Active CN112148398B (en) | 2019-06-28 | 2019-06-28 | Image processing method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112148398B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113721879B (en) * | 2021-09-02 | 2022-09-30 | 北京城市网邻信息技术有限公司 | Image processing method, device, equipment and computer readable storage medium |
| CN114327213A (en) * | 2021-12-30 | 2022-04-12 | 深圳市欧瑞博科技股份有限公司 | Canvas scaling method and device, electronic equipment and storage medium |
Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6825860B1 (en) * | 2000-09-29 | 2004-11-30 | Rockwell Automation Technologies, Inc. | Autoscaling/autosizing user interface window |
| CN103996167A (en) * | 2014-05-30 | 2014-08-20 | 广州金山网络科技有限公司 | Thumbnail display method and user equipment |
| CN104270579A (en) * | 2014-09-24 | 2015-01-07 | 青岛海信移动通信技术股份有限公司 | Terminal application interface pixel adjusting method and terminal |
| CN105162120A (en) * | 2015-10-08 | 2015-12-16 | 南京南瑞继保电气有限公司 | Web-GIS-based real-time geographical tidal current display method of large power grid |
| CN106354491A (en) * | 2016-08-22 | 2017-01-25 | 天脉聚源（北京）教育科技有限公司 | Picture processing method and device |
| CN108205398A (en) * | 2016-12-16 | 2018-06-26 | 腾讯科技（深圳）有限公司 | The method and apparatus that web animation is adapted to screen |
| CN108595239A (en) * | 2018-04-18 | 2018-09-28 | 腾讯科技（深圳）有限公司 | image processing method, device, terminal and computer readable storage medium |
| CN109308155A (en) * | 2018-08-21 | 2019-02-05 | 中国平安人寿保险股份有限公司 | Adjust method, apparatus, computer equipment and the storage medium of the page |
| CN109471631A (en) * | 2018-11-21 | 2019-03-15 | 北京京东尚科信息技术有限公司 | The generation method and device of masking-out material |
| CN109634703A (en) * | 2018-12-13 | 2019-04-16 | 北京旷视科技有限公司 | Image processing method, device, system and storage medium based on canvas label |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150103092A1 (en) * | 2013-10-16 | 2015-04-16 | Microsoft Corporation | Continuous Image Optimization for Responsive Pages |
-
2019
- 2019-06-28 CN CN201910574361.XA patent/CN112148398B/en active Active
Patent Citations (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6825860B1 (en) * | 2000-09-29 | 2004-11-30 | Rockwell Automation Technologies, Inc. | Autoscaling/autosizing user interface window |
| CN103996167A (en) * | 2014-05-30 | 2014-08-20 | 广州金山网络科技有限公司 | Thumbnail display method and user equipment |
| CN104270579A (en) * | 2014-09-24 | 2015-01-07 | 青岛海信移动通信技术股份有限公司 | Terminal application interface pixel adjusting method and terminal |
| CN105162120A (en) * | 2015-10-08 | 2015-12-16 | 南京南瑞继保电气有限公司 | Web-GIS-based real-time geographical tidal current display method of large power grid |
| CN106354491A (en) * | 2016-08-22 | 2017-01-25 | 天脉聚源（北京）教育科技有限公司 | Picture processing method and device |
| CN108205398A (en) * | 2016-12-16 | 2018-06-26 | 腾讯科技（深圳）有限公司 | The method and apparatus that web animation is adapted to screen |
| CN108595239A (en) * | 2018-04-18 | 2018-09-28 | 腾讯科技（深圳）有限公司 | image processing method, device, terminal and computer readable storage medium |
| CN109308155A (en) * | 2018-08-21 | 2019-02-05 | 中国平安人寿保险股份有限公司 | Adjust method, apparatus, computer equipment and the storage medium of the page |
| CN109471631A (en) * | 2018-11-21 | 2019-03-15 | 北京京东尚科信息技术有限公司 | The generation method and device of masking-out material |
| CN109634703A (en) * | 2018-12-13 | 2019-04-16 | 北京旷视科技有限公司 | Image processing method, device, system and storage medium based on canvas label |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112148398A (en) | 2020-12-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107885848B (en) | Webpage screen capturing method based on web technology | |
| CN110837617B (en) | Webpage self-adaptive layout method, server and computer readable storage medium | |
| CN102314502B (en) | A kind of method and apparatus for showing webpage body content on mobile terminals | |
| CN108920048B (en) | Large drawing browsing method, system, server and computer readable storage medium | |
| JP5324411B2 (en) | Advertisement distribution apparatus, method and program | |
| US8745515B2 (en) | Presentation of large pages on small displays | |
| US9195637B2 (en) | Proportional font scaling | |
| US8463075B2 (en) | Dynamically resizing text area on a display device | |
| KR101472844B1 (en) | Adaptive document displaying device and method | |
| US10339209B2 (en) | Webpage display method and device | |
| CN106502659B (en) | A kind of layout method and system of mobile device webpage single-page | |
| CN108319683B (en) | Webpage display method and device and terminal | |
| CN112148398B (en) | Image processing method and device | |
| US11551392B2 (en) | Graphic drawing method and apparatus, device, and storage medium | |
| CN113127784A (en) | Large-screen data visual display method and device, storage medium and computer equipment | |
| WO2014094533A1 (en) | Method and apparatus for displaying a webpage | |
| CN111638818B (en) | Window position adjusting method and device and electronic equipment | |
| CN115237522A (en) | Page self-adaptive display method and device | |
| JP5563703B2 (en) | Content distribution apparatus, content distribution method, content distribution program, and terminal program | |
| JP6339550B2 (en) | Terminal program, terminal device, and terminal control method | |
| CN109766530B (en) | Method and device for generating chart frame, storage medium and electronic equipment | |
| CN108132716B (en) | Adjustment method and device of browsing page and computer readable storage medium | |
| CN111222302A (en) | Webpage rendering control method, control device and computer readable medium | |
| CN103853530A (en) | Method for quickly displaying medical image on browser | |
| CN115033335B (en) | Display processing method applied to same screen of webpage |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CP03 | Change of name, title or address | ||
| CP03 | Change of name, title or address |
Address after: 310051 room 304, B / F, building 2, 399 Danfeng Road, Binjiang District, Hangzhou City, Zhejiang Province Patentee after: Hangzhou Hikvision Robot Co.,Ltd. Address before: 310052 5 / F, building 1, building 2, no.700 Dongliu Road, Binjiang District, Hangzhou City, Zhejiang Province Patentee before: HANGZHOU HIKROBOT TECHNOLOGY Co.,Ltd. |