CN113096217A - Picture generation method and device, electronic equipment and storage medium - Google Patents

Picture generation method and device, electronic equipment and storage medium Download PDF

Info

Publication number
CN113096217A
CN113096217A CN202110322338.9A CN202110322338A CN113096217A CN 113096217 A CN113096217 A CN 113096217A CN 202110322338 A CN202110322338 A CN 202110322338A CN 113096217 A CN113096217 A CN 113096217A
Authority
CN
China
Prior art keywords
picture
information
text
size information
target size
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.)
Granted
Application number
CN202110322338.9A
Other languages
Chinese (zh)
Other versions
CN113096217B (en
Inventor
于明严
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Dajia Internet Information Technology Co Ltd
Original Assignee
Beijing Dajia Internet Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Dajia Internet Information Technology Co Ltd filed Critical Beijing Dajia Internet Information Technology Co Ltd
Priority to CN202110322338.9A priority Critical patent/CN113096217B/en
Publication of CN113096217A publication Critical patent/CN113096217A/en
Application granted granted Critical
Publication of CN113096217B publication Critical patent/CN113096217B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation
    • G06T11/60Editing figures and text; Combining figures or text
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00Geometric image transformations in the plane of the image
    • G06T3/40Scaling of whole images or parts thereof, e.g. expanding or contracting
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Processing Or Creating Images (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

The present disclosure relates to a method and an apparatus for generating a picture, an electronic device and a storage medium, and relates to the technical field of computers, wherein the method comprises the following steps: acquiring a picture generation request comprising text information, a frame picture and frame characteristic information; determining target size information of the text area according to the text information; determining target size information of the picture sides to be zoomed of each frame picture unit in the frame picture, target size information of other picture sides and canvas size of the canvas element according to the target size information and the frame characteristic information; and creating canvas elements according to the size of the canvas, and drawing each frame picture unit and the text area in the canvas elements according to the target size information of the picture edge to be zoomed, the target size information of other picture edges and the target size information of the text area so as to generate the target picture. The effect of carrying out non-equal-ratio scaling on the frame picture along with the text characters can be achieved at the browser end, and the application range of the frame picture with the non-equal-ratio scaling characteristic is expanded.

Description

Picture generation method and device, electronic equipment and storage medium
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for generating a picture, an electronic device, and a storage medium.
Background
At present, in order to beautify characters or make the characters capable of being highlighted, frame pictures are often required to be added to the characters. For example, when a video title is added to a video cover, a frame picture may be added to the video title, or in a chat software, a frame picture may be added to a text message. In general, a frame picture of characters needs to be capable of changing in size according to the number or size of characters, and when the size changes, the entire size of the frame picture and the size of a character region change, but the size of the edge portion of the frame picture remains unchanged, that is, the frame picture has a characteristic of being capable of scaling unequally with characters.
In the related art, usually, only in the native application program of the android system or the iOS system, the effect of scaling the frame picture in an unequal manner with the text is realized by relying on the unequal scaling technology provided by the android system or the iOS system, for example, in the chat software of the android system, the effect of scaling the frame picture in an unequal manner with the text in a manner that the size of the chat message box changes with the length of the message is realized by relying on the Nine-click technology provided by the android system, but the effect of scaling the frame picture in an unequal manner with the text cannot be realized at the browser end.
Disclosure of Invention
The present disclosure provides a picture generation method, an apparatus, an electronic device, and a storage medium, to at least solve a problem in the related art that an effect of scaling a border picture with a character in an unequal ratio cannot be achieved at a browser end.
The technical scheme of the disclosure is as follows:
according to a first aspect of the embodiments of the present disclosure, there is provided a picture generation method, including: acquiring a picture generation request; wherein the picture generation request comprises: text information and frame picture information, the frame picture information includes: frame pictures and corresponding frame characteristic information; determining target size information of a text area according to the text information; determining target size information of the picture sides to be zoomed of each frame picture unit in the frame picture, target size information of other picture sides and canvas size of canvas elements according to the target size information of the text area and the frame characteristic information; and creating the canvas element according to the canvas size, and drawing each frame picture unit and the text area in the canvas element according to the target size information of the picture edge to be zoomed of each frame picture unit, the target size information of other picture edges and the target size information of the text area so as to generate a target picture.
As a first possible case of the embodiment of the present disclosure, the text information includes: attribute information of the text characters, the number of characters in each line and the number of lines; wherein the attribute information includes: font and font size; the determining the target size information of the text region according to the text information includes: determining the size information of the text characters according to the fonts and the font sizes of the text characters; determining the width of the text area according to the size information of the text characters and the number of the characters in each line; and determining the height of the text area according to the size information and the line number of the text characters.
As a second possible case of the embodiment of the present disclosure, the target size information of the text region includes target size information corresponding to each text edge of the text region; determining, according to the target size information of the text region and the border feature information, target size information of a picture edge to be zoomed of each border picture unit in the border picture, target size information of other picture edges, and a canvas size of a canvas element, including: determining a picture edge overlapped with the text edge in each picture edge as a picture edge to be zoomed aiming at each text edge of the text area; determining the target size information of the text edge as the target size information of the image edge to be zoomed; and determining the target size information of other picture sides and the canvas size of the canvas element according to the target size information of the picture side to be zoomed and the frame characteristic information.
As a third possible case of the embodiment of the present disclosure, the border feature information includes: original size information corresponding to each picture side of each frame picture unit respectively; determining the target size information of other picture edges and the canvas size of the canvas element according to the target size information of the picture edge to be zoomed and the frame characteristic information, comprising: determining the original size information of the other image edges except the image edge to be zoomed in each image edge as the target size information of the other image edges; and determining the canvas size of the canvas element according to the target size information of the picture edge to be zoomed and the target size information of the other picture edges.
As a fourth possible case of the embodiment of the present disclosure, the drawing, according to the target size information of the picture edge to be zoomed of each frame picture unit, the target size information of other picture edges, and the target size information of the text region, each frame picture unit and the text region in the canvas element includes: determining the position information of each frame picture unit in the canvas element according to the target size information of the picture edge to be zoomed and the target size information of other picture edges; determining the position information of the text area in the canvas element according to the position information of each frame picture unit in the canvas element and the target size information of the text area; and drawing each frame picture unit and the text area in the canvas element according to the position information of each frame picture unit in the canvas element and the position information of the text area in the canvas element.
As a fifth possible case of the embodiment of the present disclosure, the border feature information further includes: positional offset information of the text region; the determining the location information of the text region in the canvas element comprises: and determining the position information of the text area in the canvas element according to the position information of each frame picture unit in the canvas element, the position offset information and the target size information of the text area.
As a sixth possible case of the embodiment of the present disclosure, the attribute information, according to the target size information of the picture side to be zoomed of each frame picture unit, the target size information of other picture sides, and the target size information of the text region, drawing each frame picture unit and the text region in the canvas element to generate the target picture, includes: drawing each frame picture unit and the text area in the canvas element according to the target size information of the picture to be zoomed, the target size information of other picture sides and the target size information of the text area to obtain a drawn canvas; and converting the format of the drawn canvas to generate the target picture.
According to a second aspect of the embodiments of the present disclosure, there is provided a picture generation apparatus including: an acquisition module configured to execute an acquisition picture generation request; wherein the picture generation request comprises: text information and frame picture information, the frame picture information includes: frame pictures and corresponding frame characteristic information; a first determination module configured to perform determining target size information of a text region according to the text information; a second determining module configured to perform determining, according to the target size information of the text region and the border feature information, target size information of a picture edge to be zoomed of each border picture unit in the border picture, target size information of other picture edges, and a canvas size of a canvas element; and the drawing module is configured to create the canvas elements according to the canvas size, and draw the frame picture units and the text area in the canvas elements according to the target size information of the picture sides to be zoomed of the frame picture units, the target size information of other picture sides and the target size information of the text area so as to generate a target picture.
As a first possible case of the embodiment of the present disclosure, the text information includes: attribute information of the text characters, the number of characters in each line and the number of lines; wherein the attribute information includes: font and font size; the first determining module is specifically configured to perform: determining the size information of the text characters according to the fonts and the font sizes of the text characters; determining the width of the text area according to the size information of the text characters and the number of the characters in each line; and determining the height of the text area according to the size information and the line number of the text characters.
As a second possible case of the embodiment of the present disclosure, the target size information of the text region includes target size information corresponding to each text edge of the text region; the second determining module includes: a first determining unit configured to perform, for each text edge of the text region, determining, as a picture edge to be zoomed, a picture edge that overlaps with the text edge among the picture edges; a second determining unit configured to determine target size information of the text edge as target size information of the image edge to be zoomed; and the third determining unit is configured to determine the target size information of other picture edges and the canvas size of the canvas element according to the target size information of the picture edge to be zoomed and the frame characteristic information.
As a third possible case of the embodiment of the present disclosure, the border feature information includes: original size information corresponding to each picture side of each frame picture unit respectively; the third determining unit is specifically configured to perform: determining the original size information of the other image edges except the image edge to be zoomed in each image edge as the target size information of the other image edges; and determining the canvas size of the canvas element according to the target size information of the picture edge to be zoomed and the target size information of the other picture edges.
As a fourth possible case of the embodiment of the present disclosure, the drawing module includes: a fourth determining unit, configured to perform determining position information of each border picture unit in the canvas element according to the target size information of the picture edge to be zoomed and the target size information of other picture edges; a fifth determining unit configured to perform determining position information of the text region in a canvas element according to the position information of the respective border picture units in the canvas element and the target size information of the text region; a first drawing unit configured to perform drawing of the respective border picture units and the text region in the canvas element according to position information of the respective border picture units and position information of the text region in the canvas element.
As a fifth possible case of the embodiment of the present disclosure, the border feature information further includes: positional offset information of the text region; the fifth determining unit is specifically configured to perform: and determining the position information of the text area in the canvas element according to the position information of each frame picture unit in the canvas element, the position offset information and the target size information of the text area.
As a sixth possible case of the embodiment of the present disclosure, the rendering module includes: a second drawing unit, configured to draw the frame picture units and the text region in the canvas element according to the target size information of the picture to be zoomed, the target size information of other picture sides, and the target size information of the text region, so as to obtain a drawn canvas; a conversion unit configured to perform format conversion on the canvas after drawing to generate the target picture.
According to a third aspect of the embodiments of the present disclosure, there is provided an electronic apparatus including: a processor; a memory for storing the processor-executable instructions; the processor is configured to execute the instructions to implement the picture generation method provided by the embodiment of the first aspect of the disclosure.
According to a fourth aspect of the embodiments of the present disclosure, there is provided a computer-readable storage medium, where instructions, when executed by a processor of an electronic device, enable the electronic device to perform the picture generation method proposed in the first aspect of the present disclosure.
According to a fifth aspect of the embodiments of the present disclosure, there is provided a computer program product, which when executed by a processor implements the picture generation method proposed in the embodiments of the first aspect of the present disclosure.
The technical scheme provided by the embodiment of the disclosure at least brings the following beneficial effects:
after a picture generation request is obtained, according to text information included in the picture generation request, target size information of a text area is determined, according to the target size information of the text area and border feature information included in the picture generation request, target size information of a picture side to be zoomed of each border picture unit in a border picture, target size information of other picture sides and a canvas size of a canvas element are determined, the canvas element is further created according to the canvas size, and according to the target size information of the picture side to be zoomed of each border picture unit, the target size information of other picture sides and the target size information of the text area, each border picture unit and the text area are drawn in the canvas element to generate a target picture, so that the effect of carrying out non-equal ratio zooming on the border picture along with text characters can be achieved at a browser end, the application range of the frame picture with the non-equal scaling characteristic is expanded.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the disclosure and are not to be construed as limiting the disclosure.
FIG. 1 is an exemplary diagram of a border picture scaled unequally with text;
FIG. 2 is a flow diagram illustrating a method of picture generation in accordance with an exemplary embodiment;
FIG. 3 is an exemplary diagram illustrating a bezel picture in accordance with one illustrative embodiment;
FIG. 4 is another exemplary diagram of a bezel picture shown in accordance with an exemplary embodiment;
FIG. 5 is a flow chart illustrating another method of picture generation in accordance with an exemplary embodiment;
FIG. 6 is a flow diagram illustrating another method of picture generation in accordance with an exemplary embodiment;
FIG. 7 is a flow chart illustrating another method of picture generation in accordance with an exemplary embodiment;
FIG. 8 is an exemplary diagram illustrating the location of bezel picture elements within a canvas element in accordance with an exemplary embodiment;
FIG. 9 is a diagram illustrating another example location of bezel picture elements in a canvas element in accordance with an exemplary embodiment;
FIG. 10 is an exemplary diagram illustrating a border picture element in accordance with one illustrative embodiment;
FIG. 11 is an exemplary diagram of a target picture shown in accordance with an exemplary embodiment;
FIG. 12 is a block diagram of a picture generation device shown in accordance with an exemplary embodiment;
FIG. 13 is a block diagram of another picture generation device shown in accordance with an exemplary embodiment;
FIG. 14 is a block diagram illustrating an electronic device for generating a target picture in accordance with an example embodiment.
Detailed Description
In order to make the technical solutions of the present disclosure better understood by those of ordinary skill in the art, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings.
It should be noted that the terms "first," "second," and the like in the description and claims of the present disclosure and in the above-described drawings are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the disclosure described herein are capable of operation in sequences other than those illustrated or otherwise described herein. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims.
At present, in order to beautify characters or make the characters capable of being highlighted, frame pictures are often required to be added to the characters. For example, when a video title is added to a video cover, a frame picture may be added to the video title, or in a chat software, a frame picture may be added to a text message. In general, a frame picture of characters needs to be capable of changing in size according to the number or size of characters, and when the size changes, the overall size of the frame picture changes, but the size of the edge portion of the frame picture remains unchanged, that is, the frame picture has a characteristic of being capable of scaling unequally according to the characters.
For example, as shown in fig. 1, the picture on the left side in fig. 1 is formed by adding a frame picture to the text when the number of the text is small, and the picture on the right side in fig. 1 is formed by adding a frame picture to the text when the number of the text is large. As can be seen from fig. 1, the text area of the frame picture is usually located in the middle portion of the frame picture, and when the number of the text is increased, the overall size of the frame picture and the size of the text area of the frame picture are increased, but the size of the edge portion of the frame picture is kept unchanged, such as the height of the upper edge portion, the height of the lower edge portion, the width of the left edge portion, and the width of the right edge portion of the frame picture are kept unchanged.
In the related art, usually, only in the native application program of the android system or the iOS system, the effect of scaling the frame picture in an unequal manner with the text is realized by relying on the unequal scaling technology provided by the android system or the iOS system, for example, in the chat software of the android system, the effect of scaling the frame picture in an unequal manner with the text in a manner that the size of the chat message box changes with the length of the message is realized by relying on the Nine-click technology provided by the android system, but the effect of scaling the frame picture in an unequal manner with the text cannot be realized at the browser end.
The disclosure provides a picture generation method mainly for solving the technical problem that the effect of non-equal scaling of a frame picture along with characters cannot be achieved at a browser end in the related art. According to the picture generation method, after a picture generation request is obtained, according to text information included in the picture generation request, target size information of a text region is determined, according to the target size information of the text region and border feature information included in the picture generation request, target size information of a picture side to be zoomed of each border picture unit in the border picture, target size information of other picture sides and canvas size of canvas elements are determined, the canvas elements are created according to the canvas sizes, and according to the target size information of the picture side to be zoomed of each border picture unit, the target size information of other picture sides and the target size information of the text region, each border picture unit and the text region are drawn in the canvas elements to generate a target picture. Therefore, the effect of carrying out unequal scaling on the frame pictures along with the text characters can be realized at the browser end, and the application range of the frame pictures with the unequal scaling characteristics is expanded.
The following describes a picture generation method provided by the embodiment of the present disclosure in detail with reference to the accompanying drawings.
Fig. 2 is a flow chart of a picture generation method shown in accordance with an exemplary embodiment.
The execution subject of the picture generation method according to the embodiment of the present disclosure may be a picture generation apparatus, which may be an electronic device, or may be configured in the electronic device, so as to achieve an effect of performing non-isometric scaling on the border picture along with the text character at a browser end.
The electronic device may be any stationary or mobile computing device capable of performing data processing, for example, a mobile computing device such as a notebook computer and a wearable device, or a stationary computing device such as a desktop computer, or other types of computing devices, which is not limited in this disclosure.
As shown in fig. 2, the picture generation method may include the following steps 101-104.
In step 101, a picture generation request is obtained, where the picture generation request includes: text information and frame picture information, frame picture information includes: the frame picture and the corresponding frame characteristic information.
The text information may include any number of text characters and attribute information such as fonts and font sizes of the text characters, and in addition, the text information may also include any other information related to the text in the target picture to be generated, such as the maximum number of characters that can be accommodated in each line of a text region in the target picture, which is not limited in this application.
It can be understood that the frame picture has a feature that the overall size changes with the text, but the size of the edge portion of the frame picture remains unchanged, in this embodiment of the application, the frame picture may be divided into a plurality of frame picture units according to the feature of the frame picture, and correspondingly, the frame feature information may include attribute information of each frame picture unit of the frame picture, such as original size information of each frame picture unit, position distribution information between each frame picture unit, and the like.
For example, referring to the frame picture shown in fig. 3, it is assumed that the frame picture has the following characteristics: the text area is located in a dashed frame area of the frame picture shown in fig. 3, the dashed frame area can be scaled with the size of the text, and in the scaling process, for a left area of a straight line where a left short side of the dashed frame is located and a right area of a straight line where a right short side of the dashed frame is located in the frame picture, the width of the area is kept unchanged, the height is changed along with the height of the dashed frame area, for an upper area of a straight line where an upper long side of the dashed frame is located and a lower area of a straight line where a lower long side of the dashed frame is located in the frame picture, the height of the area is kept unchanged, and the width is changed along with. In this embodiment, according to the characteristics of the frame picture, the frame picture may be divided into 9 frame picture units shown in fig. 4 by using 4 straight lines where 4 sides of the dashed frame are located as boundary lines. Assuming that each of the frame picture units is numbered as shown in fig. 4, a region where text is allowed to appear, i.e., a text region, is located in a region where the frame picture unit numbered 5 is located.
Accordingly, the frame characteristic information of the frame pictures shown in fig. 3 and 4 may include original size information of each frame picture unit, position distribution information between each frame picture unit, and the like, including: the original size of the frame picture unit numbered 1 is a × D pixels, the original size of the frame picture unit numbered 2 is B × D pixels, the original size of the frame picture unit numbered 3 is C × D pixels, the original size of the frame picture unit numbered 4 is a × E pixels, the original size of the frame picture unit numbered 5 is B × E pixels, the original size of the frame picture unit numbered 6 is C × E pixels, the original size of the frame picture unit numbered 7 is a × F pixels, the original size of the frame picture unit numbered 8 is B × F pixels, the original size of the frame picture unit numbered 9 is C × F pixels, and the frame picture units numbered 1 to 9 are sequentially arranged in a 3 × 3 manner.
In this embodiment, text characters included in the text information may be input into the picture generating apparatus by the user, or may be obtained by the picture generating apparatus according to touch operations such as copying and selecting by the user, which is not limited in this embodiment of the present application. Frame picture information, which can be input into the picture generation device by a user; alternatively, it may be obtained by: the method comprises the following steps that a developer of frame pictures sets frame characteristic information of each frame picture in advance and stores the frame characteristic information in a picture generation device, and after the picture generation device displays a plurality of frame pictures, the frame pictures and corresponding frame characteristic information are obtained according to the selection operation of a user on the frame pictures; alternatively, the frame picture information may also be obtained by the picture generating device through other manners, which is not limited in this embodiment of the application.
In an exemplary embodiment, the picture generation request may be triggered automatically after the user inputs text characters and selects a border picture to be added to the text characters, or triggered by touch operations such as touching a button with a picture generation function after the user inputs the text characters and selects the border picture to be added to the text characters, or triggered by other ways, which is not limited in the embodiment of the present application.
In step 102, target size information of the text region is determined based on the text information.
The text area is an area occupied by a text, the target size information of the text area is size information of the text area in the target picture to be generated, and the size information may include width information and height information of the text area.
In step 103, according to the target size information of the text region and the border feature information, target size information of the picture sides to be zoomed of each border picture unit in the border picture, target size information of other picture sides, and canvas size of the canvas element are determined.
The canvas may be a canvas capable of drawing graphics on a webpage. Among them, canvas is an HTML (hypertext Markup Language) element for drawing graphics using JavaScript script.
It can be understood that, in the process of scaling the frame picture along with the text, among the picture edges of each frame picture unit, the size of some picture edges may change along with the text, and the size of some picture edges may remain unchanged. In the embodiment of the application, the target size information of the picture edge to be zoomed of each frame picture unit in the frame picture, the target size information of other picture edges and the canvas size of the canvas element can be determined according to the target size information and the frame characteristic information of the text area.
It should be noted that, the picture sides of the frame picture units in the embodiments of the present application refer to sides of a rectangular area occupied by the frame picture units. For example, referring to fig. 3 and 4, the picture side of the frame picture unit numbered 4 refers to the side of the rectangular region with a size of a × E pixels, which is occupied by the frame picture unit numbered 4; the picture side of the frame picture element numbered 7 refers to the side of the rectangular region having a size of a × F pixels, which is occupied by the frame picture element numbered 7.
In step 104, a canvas element is created according to the canvas size, and each frame picture unit and the text region are drawn in the canvas element according to the target size information of the picture side to be zoomed of each frame picture unit, the target size information of other picture sides, and the target size information of the text region, so as to generate the target picture.
In the embodiment of the application, after the picture generation device determines the target size information of the picture to be zoomed of each frame picture unit, the target size information of other picture sides, the target size information of the text region and the canvas size of the canvas element, the canvas element can be created according to the canvas size, and then each frame picture unit and the text region can be drawn in the canvas element according to the target size information of the picture to be zoomed of each frame picture unit, the target size information of other picture sides and the target size information of the text region, so as to generate the target picture.
Because the target picture is generated by the canvas element capable of drawing a graph on a webpage, and when the target picture is generated, the target size information of the text region is determined according to the text information, the target size information of the picture side to be zoomed of each frame picture unit, the target size information of the other picture side are determined according to the target size information of the text region and the frame characteristic information, so that the target size information of the text region, the target size information of the picture side to be zoomed of each frame picture unit can be changed along with the text information, thereby leading the generated target picture to be drawn to be integrally zoomed compared with the original frame picture according to the target size information of the picture side to be zoomed of each frame picture unit, the target size information of the other picture side and the target size information of the text region, and the sizes of the edge parts of the frame pictures before and after being zoomed are kept unchanged, therefore, the effect of scaling the border picture along with the text characters in an unequal manner is achieved at the browser end.
According to the picture generation method, after a picture generation request is obtained, according to text information included in the picture generation request, target size information of a text region is determined, according to the target size information of the text region and border feature information included in the picture generation request, target size information of a picture side to be zoomed of each border picture unit in the border picture, target size information of other picture sides and canvas size of canvas elements are determined, the canvas elements are created according to the canvas sizes, and according to the target size information of the picture side to be zoomed of each border picture unit, the target size information of other picture sides and the target size information of the text region, each border picture unit and the text region are drawn in the canvas elements to generate a target picture. Therefore, the effect of carrying out unequal scaling on the frame pictures along with the text characters can be realized at the browser end, and the application range of the frame pictures with the unequal scaling characteristics is expanded.
As can be seen from the above analysis, according to the image generating method provided in the embodiment of the present application, the target size information of the text region may be determined according to the text information. Next, with reference to fig. 5, a process of determining target size information of a text region in the picture generating method provided in the embodiment of the present disclosure is described.
Fig. 5 is a flow chart illustrating another picture generation method according to an example embodiment.
As shown in fig. 5, the step 102 shown in fig. 2 may specifically include the following steps 201 and 203.
In step 201, size information of a text character is determined according to the font and font size of the text character.
The size information of a text character refers to size information of one text character, which may include width information and height information of one text character.
In an exemplary embodiment, the text information may include attribute information of the text character, wherein the attribute information may include a font and a font size, so that the size information of the text character may be determined according to the font and the font size of the text character.
In step 202, the width of the text region is determined based on the size information of the text characters and the number of characters per line.
In step 203, the height of the text region is determined based on the size information and the number of lines of the text characters.
The number of characters in each line is the maximum number of characters that can be accommodated in each line of the text area.
The line number, which is the line number occupied by the text characters included in the text information, may be determined according to the number of text characters included in the text information and the number of characters per line. For example, when the number of text characters included in the text information is less than the number of characters per line, the number of lines may be determined to be 1, and when the number of text characters included in the text information is greater than the number of characters per line, the number of lines may be determined to be the ratio of the number of text characters to the number of characters per line plus 1.
In an exemplary embodiment, the number of rows may be determined by a code as shown below.
const{width}=context.measureText(withANewLetter);
context.fillText(currentLineLetter,x,y);
y+=lineHeight;
lineCount+=1;
Specifically, after the picture generating apparatus determines the size information of the text characters, the product of the size of the text characters and the number of characters per line may be used as the width of the text region, and the product of the size of the text characters and the number of lines may be used as the height of the text region.
By the method, the target size information of the text region can be accurately determined, and a foundation is laid for accurately determining the target size information of the picture sides to be zoomed of each frame picture unit in the frame picture, the target size information of other picture sides and the canvas size of the canvas element according to the target size information and the frame characteristic information of the text region.
As can be seen from the above analysis, the picture generation method provided in the embodiment of the present application may determine the target size information of the text region, and then determine the target size information of the picture to be zoomed side of each frame picture unit in the frame picture, the target size information of the other picture sides, and the canvas size of the canvas element according to the target size information and the frame feature information of the text region. With reference to fig. 6, a process of determining target size information of a picture edge to be zoomed of each frame picture unit in a frame picture, target size information of other picture edges, and a canvas size of a canvas element in the picture generation method provided in the embodiment of the present disclosure is described below.
Fig. 6 is a flow chart illustrating another picture generation method according to an example embodiment.
As shown in fig. 6, the step 103 shown in fig. 2 may specifically include the following steps 301-303.
In step 301, for each text edge of the text region, a picture edge overlapping with the text edge among the picture edges is determined as a picture edge to be zoomed.
In step 302, the target size information of the text side is determined as the target size information of the picture side to be zoomed.
In an exemplary embodiment, the target size information of the text region may include target size information corresponding to each text side of the text region, and since a size of a picture side overlapping with the text side of the text region among the picture sides of the picture units of the frames of the picture varies with a size of the text region, for each text side of the text region, the picture side overlapping with the text side among the picture sides of the picture units of the frames may be determined as a picture side to be zoomed, and the target size information of the text side may be determined as the target size information of the picture side to be zoomed overlapping with the text side.
Referring to fig. 3 and 4, assuming that the text region is located in a region where a frame picture unit (i.e., a frame picture unit numbered 5) located in the middle of the frame picture is located, since the lower picture side of the frame picture unit numbered 2 overlaps with the upper text side of the text region, the lower picture side of the frame picture unit numbered 2 may be determined as a picture side to be scaled, and the target size information of the upper text side of the text region may be determined as the target size information of the lower picture side of the frame picture unit numbered 2, i.e., the width of the text region may be determined as the target size of the lower picture side of the frame picture unit numbered 2.
Similarly, the upper side picture side of the frame picture unit numbered 8 may be determined as the picture side to be scaled, and the target size information of the lower side text side of the text region may be determined as the target size information of the upper side picture side of the frame picture unit numbered 8, the right side picture side of the frame picture unit numbered 4 may be determined as the picture side to be scaled, and the target size information of the left side text side of the text region may be determined as the target size information of the right side picture side of the frame picture unit numbered 4, the left side picture side of the frame picture unit numbered 6 may be determined as the picture side to be scaled, and the target size information of the right side text side of the text region may be determined as the target size information of the left side picture side of the frame picture unit numbered 6.
In step 303, the target size information of the other picture edges and the canvas size of the canvas element are determined according to the target size information of the picture edge to be zoomed and the border feature information.
In an exemplary embodiment, the border feature information may include original size information corresponding to each picture edge of each border picture unit, and accordingly, step 303 may be implemented as follows:
determining original size information of other picture edges except the edge of the picture to be zoomed in each picture edge as target size information of other picture edges;
and determining the canvas size of the canvas element according to the target size information of the picture edge to be zoomed and the target size information of other picture edges.
Specifically, since the other picture sides except the picture side to be zoomed in each frame picture unit are picture sides whose sizes do not change with the text, the original size information of the other picture sides included in the frame feature information can be determined as the target size information of the other picture sides, and then the canvas size of the canvas element can be determined according to the target size information of the picture side to be zoomed and the target size information of the other picture sides. It should be noted that, because the sizes of the parallel picture sides in one frame picture unit are changed synchronously, the picture sides other than the picture side to be zoomed in each frame picture unit implemented in the present application do not include the picture side parallel to the picture side to be zoomed.
For example, referring to fig. 3 and 4, continuing the above example, assume that the original size of the frame picture unit numbered 1 of the frame picture is a × D pixels, the original size of the frame picture unit numbered 2 is B × D pixels, the original size of the frame picture unit numbered 3 is C × D pixels, the original size of the frame picture unit numbered 4 is a × E pixels, the original size of the frame picture unit numbered 5 is B × E pixels, the original size of the frame picture unit numbered 6 is C × E pixels, the original size of the frame picture unit numbered 7 is a × F pixels, the original size of the frame picture unit numbered 8 is B × F pixels, and the original size of the frame picture unit numbered 9 is C × F pixels. Suppose that the lower side picture edge of the frame picture unit numbered 2 and the upper side picture edge of the frame picture unit numbered 8 of the frame picture are to-be-zoomed picture edges, and the target sizes are both B ', the right side picture edge of the frame picture unit numbered 4 and the left side picture edge of the frame picture unit numbered 6 are to-be-zoomed picture edges, and the target sizes are both E'. The original size information of the other picture sides except the picture side to be zoomed of each frame picture unit can be determined as the target size information of the corresponding picture side, and then the width of the canvas element is determined as a + B '+ C pixel according to the target size information of the upper or lower side picture side of the frame picture unit numbered 1, 2, 3, or the target size information of the upper or lower side picture side of the frame picture unit numbered 4, 5, 6, or the target size information of the upper or lower side picture side of the frame picture unit numbered 7, 8, 9, and then the width of the canvas element is determined as a + B' + C pixel according to the target size information of the left or right side picture side of the frame picture unit numbered 1, 4, 7, or the target size information of the left or right side picture side of the frame picture unit numbered 2, 5, 8, or the target size information of the left or right side picture side of the frame picture unit numbered 3, 6, 9, the height of the canvas element is determined to be D + E' + F pixels.
The canvas size of the canvas element is determined according to the target size information of the picture edge to be zoomed and the target size information of other picture edges, so that the canvas size of the text region in the region of the frame picture unit in the middle position of the frame picture can be accurately determined.
It can be understood that, in practical applications, due to the limitation of the size of the screen on which the target picture is to be displayed, or the limitation of the size of the display area on which the target picture is to be displayed on the screen, the size of the generated target picture is generally limited, and the canvas size of the canvas element determined in the above manner is determined based on the text information and the frame characteristic information of the frame picture, in practical applications, due to the reason that the maximum number of characters per line set by a developer is large, and the like, the finally determined canvas size may exceed the maximum size of the target picture, and if the generated target picture is drawn on the canvas element of such a size, the finally generated target picture may exceed the screen size or the size of the display area on which the target picture is to be displayed on the screen, in this embodiment of the application, when the canvas size is larger than the maximum size of the target picture, and performing degradation fault tolerance processing.
Specifically, the maximum size of the target picture can be carried in the picture generation request, so that the picture generation device can determine whether the size of the canvas is larger than the maximum size of the target picture after determining the size of the canvas element according to the target size information of the text region and the frame characteristic information of the frame picture, and if the size of the canvas is not larger than the maximum size of the target picture, the determined size of the canvas is used as the size of the canvas element of the target picture to be drawn.
If the size of the canvas is larger than the maximum size of the target picture, the maximum size of the target picture can be used as the size of the canvas, or a prompt message can be returned to the user to prompt that the input number of text characters of the user exceeds the bearing capacity of a screen display area, or the size of the target picture can be reduced in a proper amount after the target picture is generated, or other modes can be adopted to realize the degradation fault tolerance.
After the size of the canvas is determined, the size of the canvas is adjusted according to the maximum size of the target picture carried in the target picture generation request, so that the size of the generated target picture drawn in the canvas element with the size of the canvas does not exceed the size of a screen or the size of a display area of the target picture to be displayed on the screen, and the abnormal display condition when the target picture is displayed is avoided.
With reference to fig. 7, a process of drawing each frame picture unit and a text region in a canvas element in the picture generating method provided in the embodiment of the present disclosure is further described.
Fig. 7 is a flow chart illustrating another picture generation method according to an example embodiment.
As shown in fig. 7, the step 104 shown in fig. 2 may specifically include the following steps 401-403.
In step 401, according to the target size information of the picture edge to be zoomed and the target size information of other picture edges, the position information of each frame picture unit in the canvas element is determined.
The position information of each frame picture unit in the canvas element may specifically refer to coordinates of each pixel point of each frame picture unit in the canvas element.
In step 402, the position information of the text region in the canvas element is determined according to the position information of each border picture unit in the canvas element and the target size information of the text region.
The position information of the text region in the canvas element may specifically refer to coordinates of each pixel point of the text region in the canvas element.
In step 403, drawing each border picture unit and the text region in the canvas element according to the position information of each border picture unit in the canvas element and the position information of the text region in the canvas element.
Specifically, after the canvas size of the canvas element is determined, the canvas element with the canvas size can be created, and each frame picture unit and the text area are drawn in the canvas element. When each frame picture unit and the text area are specifically drawn, the position information of each frame picture unit in the canvas element and the position information of the text area in the canvas element can be determined firstly, then each frame picture unit is drawn in the canvas element according to the position information of each frame picture unit in the canvas element, and the text area is drawn in the canvas element according to the position information of the text area in the canvas element.
With reference to fig. 8, a process of determining location information of each border picture unit in the canvas element and location information of the text area in the canvas element in the embodiment of the present application is further described below. It is assumed that the position distribution of each frame picture unit in the frame picture is shown in fig. 4, and the target sizes of the upper and lower sides of the frame picture units numbered 1, 4, and 7 are both a pixels, the target sizes of the upper and lower sides of the frame picture units numbered 2, 5, and 8 are both B 'pixels, the target sizes of the upper and lower sides of the frame picture units numbered 3, 6, and 9 are both C pixels, the target sizes of the left and right sides of the frame picture units numbered 1, 2, and 3 are both D pixels, the target sizes of the left and right sides of the frame picture units numbered 4, 5, and 6 are both E' pixels, and the target sizes of the left and right sides of the frame picture units numbered 7, 8, and 9 are both F pixels.
As shown in fig. 8, a rectangular coordinate system may be established with a vertex of the canvas element as an origin, and then the coordinates of the pixel points at the top left corner vertex of the frame picture unit numbered 1 may be determined to be (0,0), and according to the target size of each picture edge of the frame picture unit numbered 1, the coordinates of each pixel point of the frame picture unit numbered 1 may be determined, for example, the coordinates of the pixel points at the bottom left corner vertex of the frame picture unit numbered 1 may be determined to be (0, D), and the coordinates of the pixel points at the bottom right corner vertex may be (a, D). According to the target size of the upper side picture side of the frame picture unit with the number of 1, the coordinates of the pixel point at the top left corner vertex position of the frame picture unit with the number of 2 can be determined to be (A, 0), and according to the target size of each picture side of the frame picture unit with the number of 2, the coordinates of each pixel point of the frame picture unit with the number of 2 can be determined. According to the target size of the upper side picture side of the frame picture unit with the number of 2, the coordinates of the pixel points at the top left corner vertex position of the frame picture unit with the number of 3 can be determined to be (A + B', 0), and according to the target size of each picture side of the frame picture unit with the number of 3, the coordinates of each pixel point of the frame picture unit with the number of 3 can be determined. By analogy, the coordinates of each pixel point of each frame picture unit in the canvas element can be determined.
After the coordinates of each pixel point of each frame picture unit in the canvas element are determined, because the text area is located in the area where the frame picture unit with the number of 5 is located, the target size information of each text side of the text area is the same as the target size information of each picture side of the frame picture unit with the number of 5, the coordinates of each pixel point of the text area in the canvas element can be determined according to the coordinates of each pixel point of the frame picture unit with the number of 5 in the canvas element.
By the method, when the frame picture unit of which the text area is located in the middle of the frame picture is located in the area, the position information of each frame picture unit in the canvas element and the position information of the text area in the canvas element can be accurately determined, so that each frame picture unit can be drawn in the canvas element according to the position information of each frame picture unit in the canvas element, and the text area can be drawn in the canvas element according to the position information of the text area in the canvas element.
It should be noted that, in the above embodiments, the text region is located in the region where the frame picture unit of the middle position of the frame picture is located, and in a possible implementation form, when the frame picture is added to the text character, the frame picture may further allow the text region to have a certain position offset relative to the region where the frame picture unit of the middle position of the frame picture is located, at this time, the frame feature information corresponding to the frame picture may further include position offset information of the text region. The position offset information of the text region may represent position offset information of a region where a frame picture unit of the text region relative to a middle position of the frame picture is located, and specifically may include a coordinate offset value of each text edge of the text region relative to each picture edge of the frame picture unit of the middle position of the frame picture.
Accordingly, the position information of the text region in the canvas element may be determined according to the position information of each frame picture unit in the canvas element, the position offset information of the text region, and the target size information of the text region.
For example, assuming that the positions of the frame picture units of the frame picture in the canvas element are as shown in fig. 9, the positional offset information of the text region includes: the coordinate offset value of the upper text side of the text region with respect to the lower picture side of the frame picture unit at the middle position of the frame picture is (0, c), the coordinate offset value of the lower text side of the text region with respect to the lower picture side of the frame picture unit at the middle position of the frame picture is (0, -d), the coordinate offset value of the left text side of the text region with respect to the left picture side of the frame picture unit at the middle position of the frame picture is (-a,0), and the coordinate offset value of the right text side of the text region with respect to the right picture side of the frame picture unit at the middle position of the frame picture is (-b, 0).
The coordinates of the pixel points at the top left vertex position of the text region can be determined to be (a-a, D + c) according to the coordinates of the pixel points at the top left vertex position of the frame picture unit at the middle position of the frame picture and the position offset information of the text region, and the coordinates of each pixel point of the text region can be determined according to the target size information of each text edge of the text region.
By the method, the position information of the text region in the canvas element can be accurately determined when the text region has a certain position offset relative to the region of the frame picture unit at the middle position of the frame picture.
It should be noted that, when the border feature information corresponding to the border picture further includes the position offset information of the text region, the canvas size of the canvas element is also different from the canvas size of the canvas element when the border feature information does not include the position offset information of the text region. When the frame characteristic information corresponding to the frame picture further includes the position offset information of the text region, the canvas size of the canvas element may be determined according to the target size information of the picture side to be zoomed of each frame picture unit, the target size information of the other picture sides, and the position offset information of the text region.
In an exemplary embodiment, when each frame picture unit is drawn, each frame picture unit may be drawn sequentially according to a position distribution relationship of each frame picture unit.
In an exemplary embodiment, drawing the border picture elements in the canvas element may be implemented by:
const context=canvas.getContext('2d');
context.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);
through the above codes, for example, the frame picture unit with the original size of a × E pixels and the number of 4 shown on the left side of fig. 10 can be redrawn into the frame picture unit with the target size of a × E' shown on the right side of fig. 10 according to the position information of the frame picture unit with the number of 4 in the canvas element.
In an exemplary embodiment, drawing a text region in a canvas element may be accomplished by code as follows.
context.fillText(currentLineLetter,x,y);
By the above method, the target picture including the text characters and the frame picture, such as the target picture shown in fig. 11, can be drawn and generated at the browser end according to the target size information of the picture side to be zoomed, the target size information of the other picture sides, and the target size information of the text region.
It should be noted that, according to the target size information of the picture edge to be zoomed, the target size information of other picture edges, and the target size information of the text region, each frame picture unit and the text region are drawn in the canvas element, and the obtained canvas which is usually in a non-picture format is obtained.
In an exemplary embodiment, the conversion of the canvas to a picture format after drawing may be accomplished by the code shown below.
const$titleCanvas=this.canvas;
context2D.drawImage(
$titleCanvas,
titleCanvasX,
titleCanvasY,
$titleCanvas.width,
$titleCanvas.height
);
The picture generation method provided by the embodiment of the application determines the position information of each frame picture unit in the canvas element according to the target size information of the picture edge to be zoomed and the target size information of other picture edges, determines the position information of the text region in the canvas element according to the position information of each frame picture unit in the canvas element and the target size information of the text region, further draws each frame picture unit and the text region in the canvas element according to the position information of each frame picture unit in the canvas element and the position information of the text region in the canvas element, realizes that at a browser end, a target picture comprising text characters and frame pictures is drawn and generated according to the target size information of the picture edge to be zoomed of each frame picture unit, the target size information of other picture edges and the target size information of the text region, the effect of carrying out non-equal-ratio scaling on the frame picture along with the text characters can be achieved at the browser end, and the application range of the frame picture with the non-equal-ratio scaling characteristic is expanded.
In order to implement the above embodiments, the present disclosure provides an image generating device.
Fig. 12 is a block diagram of a picture generation apparatus shown in accordance with an example embodiment.
Referring to fig. 12, the picture generation apparatus 100 may include: an acquisition module 110, a first determination module 120, a second determination module 130, and a rendering module 140.
The obtaining module 110 is configured to execute a request for obtaining a picture generation; wherein the picture generation request includes: text information and frame picture information, frame picture information includes: frame pictures and corresponding frame characteristic information;
a first determining module 120 configured to perform determining target size information of the text region according to the text information;
a second determining module 130 configured to perform determining, according to the target size information of the text region and the border feature information, target size information of a picture side to be zoomed of each border picture unit in the border picture, target size information of other picture sides, and a canvas size of the canvas element;
and a drawing module 140 configured to create canvas elements according to the canvas size, and draw each of the frame picture units and the text region in the canvas elements according to the target size information of the picture edge to be scaled of each of the frame picture units, the target size information of the other picture edges, and the target size information of the text region to generate the target picture.
It should be noted that the picture generating apparatus 100 according to the embodiment of the present disclosure may execute the picture generating method in the foregoing embodiment, and the picture generating apparatus may be an electronic device, or may be configured in the electronic device, so as to achieve an effect of performing non-isometric scaling on the border picture along with the text character at the browser end.
The electronic device may be any stationary or mobile computing device capable of performing data processing, for example, a mobile computing device such as a notebook computer and a wearable device, or a stationary computing device such as a desktop computer, or other types of computing devices, which is not limited in this disclosure.
It should be noted that, regarding the apparatus in the above embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated herein.
The picture generation device of the embodiment of the disclosure determines, after obtaining a picture generation request, target size information of a text region according to text information included in the picture generation request, determines, according to the target size information of the text region and frame feature information included in the picture generation request, target size information of a picture side to be zoomed of each frame picture unit in the frame picture, target size information of other picture sides, and a canvas size of a canvas element, further creates the canvas element according to the canvas size, and draws each frame picture unit and the text region in the canvas element according to the target size information of the picture side to be zoomed of each frame picture unit, the target size information of other picture sides, and the target size information of the text region to generate a target picture. Therefore, the effect of carrying out unequal scaling on the frame pictures along with the text characters can be realized at the browser end, and the application range of the frame pictures with the unequal scaling characteristics is expanded.
Fig. 13 is a block diagram of another picture generation apparatus shown in accordance with an example embodiment.
Referring to fig. 13, in the picture generating apparatus 100, when the target size information of the text region includes target size information corresponding to each text edge of the text region, in addition to the target size information shown in fig. 12, the second determining module 130 may include:
a first determining unit 1301 configured to perform, for each text edge of the text region, determining, as a picture edge to be zoomed, a picture edge that overlaps with the text edge among the picture edges;
a second determining unit 1302, configured to perform determining target size information of a text side as target size information of a picture side to be zoomed;
and a third determining unit 1303 configured to determine target size information of other picture edges and a canvas size of the canvas element according to the target size information of the picture edge to be zoomed and the border feature information.
In an exemplary embodiment, the bezel feature information may include: original size information corresponding to each picture side of each frame picture unit respectively; correspondingly, the third determining unit 1303 is specifically configured to perform:
determining original size information of other picture edges except the edge of the picture to be zoomed in each picture edge as target size information of other picture edges;
and determining the canvas size of the canvas element according to the target size information of the picture edge to be zoomed and the target size information of other picture edges.
In an exemplary embodiment, the text information includes: attribute information of text characters, the number of characters in each line and the number of lines, wherein the attribute information comprises fonts and word sizes; accordingly, the first determining module 120 is specifically configured to perform:
determining the size information of the text characters according to the fonts and the font sizes of the text characters;
determining the width of a text area according to the size information of the text characters and the number of characters in each line;
and determining the height of the text area according to the size information and the line number of the text characters.
In an exemplary embodiment, the rendering module 140 may include:
a fourth determining unit 1401 configured to perform determining position information of each of the border picture units in the canvas element according to the target size information of the picture edge to be zoomed and the target size information of the other picture edges;
a fifth determining unit 1402 configured to perform determining position information of the text region in the canvas element according to the position information of the respective border picture units in the canvas element and the target size information of the text region;
a first drawing unit 1403 configured to perform drawing of each of the frame picture units and the text region in the canvas element according to the position information of each of the frame picture units and the position information of the text region in the canvas element.
In an exemplary embodiment, the border feature information may further include: positional offset information of the text region; accordingly, the fifth determining unit 1402 is specifically configured to perform:
and determining the position information of the text area in the canvas element according to the position information, the position offset information and the target size information of the text area of each frame picture unit in the canvas element.
In an exemplary embodiment, the rendering module 140 may include:
the second drawing unit is configured to draw each frame picture unit and the text area in the canvas element according to the target size information of the picture edge to be zoomed, the target size information of other picture edges and the target size information of the text area to obtain a drawn canvas;
and the conversion unit is configured to perform format conversion on the canvas after drawing so as to generate the target picture.
It should be noted that, regarding the apparatus in the above embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated herein.
The picture generation device of the embodiment of the disclosure determines, after obtaining a picture generation request, target size information of a text region according to text information included in the picture generation request, determines, according to the target size information of the text region and frame feature information included in the picture generation request, target size information of a picture side to be zoomed of each frame picture unit in the frame picture, target size information of other picture sides, and a canvas size of a canvas element, further creates the canvas element according to the canvas size, and draws each frame picture unit and the text region in the canvas element according to the target size information of the picture side to be zoomed of each frame picture unit, the target size information of other picture sides, and the target size information of the text region to generate a target picture. Therefore, the effect of carrying out unequal scaling on the frame pictures along with the text characters can be realized at the browser end, and the application range of the frame pictures with the unequal scaling characteristics is expanded.
In order to implement the above embodiments, the embodiment of the present disclosure further provides an electronic device.
Wherein, the electronic device 200 includes:
a processor 220;
a memory 210 for storing instructions executable by processor 220;
wherein the processor 220 is configured to execute the instructions to implement the picture generation method as previously described.
As an example, fig. 14 is a block diagram of an electronic device 200 for generating a target picture according to an exemplary embodiment, and as shown in fig. 14, the electronic device 200 may further include:
a memory 210 and a processor 220, a bus 230 connecting different components (including the memory 210 and the processor 220), wherein the memory 210 stores a computer program, and when the processor 220 executes the program, the picture generation method according to the embodiment of the present disclosure is implemented.
Bus 230 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, and a processor or local bus using any of a variety of bus architectures. By way of example, such architectures include, but are not limited to, Industry Standard Architecture (ISA) bus, micro-channel architecture (MAC) bus, enhanced ISA bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus.
Electronic device 200 typically includes a variety of computer-readable media. Such media may be any available media that is accessible by electronic device 200 and includes both volatile and nonvolatile media, removable and non-removable media.
Memory 210 may also include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM)240 and/or cache memory 250. The electronic device 200 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage system 260 may be used to read from and write to non-removable, nonvolatile magnetic media (not shown in FIG. 14, commonly referred to as a "hard drive"). Although not shown in FIG. 14, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 230 by one or more data media interfaces. Memory 210 may include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the disclosure.
A program/utility 280 having a set (at least one) of program modules 270, including but not limited to an operating system, one or more application programs, other program modules, and program data, each of which or some combination thereof may comprise an implementation of a network environment, may be stored in, for example, the memory 210. The program modules 270 generally perform the functions and/or methodologies of the embodiments described in this disclosure.
Electronic device 200 may also communicate with one or more external devices 290 (e.g., keyboard, pointing device, display 291, etc.), with one or more devices that enable a user to interact with electronic device 200, and/or with any devices (e.g., network card, modem, etc.) that enable electronic device 200 to communicate with one or more other computing devices. Such communication may occur via input/output (I/O) interfaces 292. Also, the electronic device 200 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network such as the Internet) via the network adapter 293. As shown in FIG. 14, the network adapter 293 communicates with the other modules of the electronic device 200 via the bus 230. It should be appreciated that although not shown in FIG. 14, other hardware and/or software modules may be used in conjunction with electronic device 200, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.
The processor 220 executes various functional applications and data processing by executing programs stored in the memory 210.
It should be noted that, for the implementation process and the technical principle of the electronic device of the embodiment, reference is made to the foregoing explanation of the picture generation method of the embodiment of the present disclosure, and details are not repeated here.
The electronic equipment provided by the embodiment of the disclosure enables the effect of non-equal-ratio scaling of the frame picture along with the text characters to be realized at the browser end, and the application range of the frame picture with the non-equal-ratio scaling characteristic is expanded.
In an exemplary embodiment, the disclosed embodiment also proposes a computer-readable storage medium comprising instructions, such as the memory 210 comprising instructions, executable by the processor 220 of the electronic device 200 to perform the above-mentioned method. Alternatively, the computer readable storage medium may be a ROM, a Random Access Memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.
In an exemplary embodiment, the present disclosure also provides a computer program product comprising a computer program which, when executed by a processor of an electronic device, enables the electronic device to perform the picture generation method as described above.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims (10)

1. A picture generation method is characterized by comprising the following steps:
acquiring a picture generation request; wherein the picture generation request comprises: text information and frame picture information, the frame picture information includes: frame pictures and corresponding frame characteristic information;
determining target size information of a text area according to the text information;
determining target size information of the picture sides to be zoomed of each frame picture unit in the frame picture, target size information of other picture sides and canvas size of canvas elements according to the target size information of the text area and the frame characteristic information;
and creating the canvas element according to the canvas size, and drawing each frame picture unit and the text area in the canvas element according to the target size information of the picture edge to be zoomed of each frame picture unit, the target size information of other picture edges and the target size information of the text area so as to generate a target picture.
2. The picture generation method according to claim 1, wherein the text information includes: attribute information of the text characters, the number of characters in each line and the number of lines; wherein the attribute information includes: font and font size;
the determining the target size information of the text region according to the text information includes:
determining the size information of the text characters according to the fonts and the font sizes of the text characters;
determining the width of the text area according to the size information of the text characters and the number of the characters in each line;
and determining the height of the text area according to the size information and the line number of the text characters.
3. The picture generation method according to claim 1, wherein the target size information of the text region includes target size information corresponding to each text edge of the text region;
determining, according to the target size information of the text region and the border feature information, target size information of a picture edge to be zoomed of each border picture unit in the border picture, target size information of other picture edges, and a canvas size of a canvas element, including:
determining a picture edge overlapped with the text edge in each picture edge as a picture edge to be zoomed aiming at each text edge of the text area;
determining the target size information of the text edge as the target size information of the image edge to be zoomed;
and determining the target size information of other picture sides and the canvas size of the canvas element according to the target size information of the picture side to be zoomed and the frame characteristic information.
4. The picture generation method according to claim 3, wherein the frame feature information includes: original size information corresponding to each picture side of each frame picture unit respectively;
determining the target size information of other picture edges and the canvas size of the canvas element according to the target size information of the picture edge to be zoomed and the frame characteristic information, comprising:
determining the original size information of the other image edges except the image edge to be zoomed in each image edge as the target size information of the other image edges;
and determining the canvas size of the canvas element according to the target size information of the picture edge to be zoomed and the target size information of the other picture edges.
5. The method according to claim 1, wherein the drawing the respective border picture unit and the text region in the canvas element according to the target size information of the picture edge to be zoomed of the respective border picture unit, the target size information of the other picture edges, and the target size information of the text region comprises:
determining the position information of each frame picture unit in the canvas element according to the target size information of the picture edge to be zoomed and the target size information of other picture edges;
determining the position information of the text area in the canvas element according to the position information of each frame picture unit in the canvas element and the target size information of the text area;
and drawing each frame picture unit and the text area in the canvas element according to the position information of each frame picture unit in the canvas element and the position information of the text area in the canvas element.
6. The picture generation method according to claim 5, wherein the frame feature information further includes: positional offset information of the text region;
the determining the location information of the text region in the canvas element comprises:
and determining the position information of the text area in the canvas element according to the position information of each frame picture unit in the canvas element, the position offset information and the target size information of the text area.
7. A picture generation apparatus, comprising:
an acquisition module configured to execute an acquisition picture generation request; wherein the picture generation request comprises: text information and frame picture information, the frame picture information includes: frame pictures and corresponding frame characteristic information;
a first determination module configured to perform determining target size information of a text region according to the text information;
a second determining module configured to perform determining, according to the target size information of the text region and the border feature information, target size information of a picture edge to be zoomed of each border picture unit in the border picture, target size information of other picture edges, and a canvas size of a canvas element;
and the drawing module is configured to create the canvas elements according to the canvas size, and draw the frame picture units and the text area in the canvas elements according to the target size information of the picture sides to be zoomed of the frame picture units, the target size information of other picture sides and the target size information of the text area so as to generate a target picture.
8. An electronic device, comprising:
a processor;
a memory for storing the processor-executable instructions;
wherein the processor is configured to execute the instructions to implement the picture generation method of any one of claims 1 to 6.
9. A computer-readable storage medium, whose instructions, when executed by a processor of an electronic device, enable the electronic device to perform the picture generation method of any of claims 1 to 6.
10. A computer program product comprising a computer program, characterized in that the computer program, when being executed by a processor, implements the picture generation method of any one of claims 1 to 6.
CN202110322338.9A 2021-03-25 2021-03-25 Picture generation method and device, electronic equipment and storage medium Active CN113096217B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110322338.9A CN113096217B (en) 2021-03-25 2021-03-25 Picture generation method and device, electronic equipment and storage medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110322338.9A CN113096217B (en) 2021-03-25 2021-03-25 Picture generation method and device, electronic equipment and storage medium

Publications (2)

Publication Number Publication Date
CN113096217A true CN113096217A (en) 2021-07-09
CN113096217B CN113096217B (en) 2023-05-09

Family

ID=76669680

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110322338.9A Active CN113096217B (en) 2021-03-25 2021-03-25 Picture generation method and device, electronic equipment and storage medium

Country Status (1)

Country Link
CN (1) CN113096217B (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114398125A (en) * 2021-12-31 2022-04-26 深圳市珍爱捷云信息技术有限公司 Point nine effect graph generation method and related device thereof

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6741270B1 (en) * 2000-01-19 2004-05-25 Xerox Corporation Systems and methods scaling a captured image using predetermined scale information
US7590947B1 (en) * 2004-05-28 2009-09-15 Adobe Systems Incorporated Intelligent automatic window sizing
CN107577403A (en) * 2017-09-12 2018-01-12 珠海智汇网络设备有限公司 Text box method of combination, hand-held bill printer and its program recorded medium
US20190188887A1 (en) * 2017-12-14 2019-06-20 Adobe Inc. Text border tool and enhanced corner options for background shading
CN112085818A (en) * 2019-06-14 2020-12-15 腾讯数码(天津)有限公司 Picture processing method and device
CN113011131A (en) * 2021-03-22 2021-06-22 掌阅科技股份有限公司 Typesetting method based on picture electronic book, electronic equipment and storage medium

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6741270B1 (en) * 2000-01-19 2004-05-25 Xerox Corporation Systems and methods scaling a captured image using predetermined scale information
US7590947B1 (en) * 2004-05-28 2009-09-15 Adobe Systems Incorporated Intelligent automatic window sizing
CN107577403A (en) * 2017-09-12 2018-01-12 珠海智汇网络设备有限公司 Text box method of combination, hand-held bill printer and its program recorded medium
US20190188887A1 (en) * 2017-12-14 2019-06-20 Adobe Inc. Text border tool and enhanced corner options for background shading
CN112085818A (en) * 2019-06-14 2020-12-15 腾讯数码(天津)有限公司 Picture processing method and device
CN113011131A (en) * 2021-03-22 2021-06-22 掌阅科技股份有限公司 Typesetting method based on picture electronic book, electronic equipment and storage medium

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114398125A (en) * 2021-12-31 2022-04-26 深圳市珍爱捷云信息技术有限公司 Point nine effect graph generation method and related device thereof
CN114398125B (en) * 2021-12-31 2024-02-27 深圳市珍爱捷云信息技术有限公司 Point nine effect graph generation method and related device thereof

Also Published As

Publication number Publication date
CN113096217B (en) 2023-05-09

Similar Documents

Publication Publication Date Title
JP4498146B2 (en) MEDIA DISPLAY METHOD FOR COMPUTER DEVICE, COMPUTER DEVICE, COMPUTER PROGRAM
US8907990B2 (en) Display system, display method, program, and recording medium
USRE43742E1 (en) Method and system for enhanced detail-in-context viewing
US8515176B1 (en) Identification of text-block frames
CN107204023B (en) Method and apparatus for avoiding distortion of graphics drawn in canvas
CN105930464B (en) Web rich media cross-screen adaptation method and device
US9135885B2 (en) Resolution independent client side rendering
CN113536173B (en) Page processing method and device, electronic equipment and readable storage medium
US7675529B1 (en) Method and apparatus to scale graphical user interfaces
US10417310B2 (en) Content inker
CN111915705A (en) Picture visual editing method, device, equipment and medium
CN110443772B (en) Picture processing method and device, computer equipment and storage medium
CN106484388B (en) Method and device for realizing user interface
CN107122104B (en) Data display method and device
CN113096217B (en) Picture generation method and device, electronic equipment and storage medium
JP6395160B2 (en) Document layout of electronic display
JP2007047942A (en) Data display method, data display device, and program
CN109800039B (en) User interface display method and device, electronic equipment and storage medium
JP2996933B2 (en) Drawing display device
US10846878B2 (en) Multi-axis equal spacing smart guides
CN102681755A (en) Method, device and equipment for realizing display transformation of display object
CN113420581A (en) Correction method and device for written document image, electronic equipment and readable medium
CN111523288B (en) Display method and device for aerial view of PDF document
CN111782333B (en) Interface display method and device in game, storage medium and terminal equipment
CN116382552A (en) View display method and device, electronic equipment and storage medium

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