TWI410818B - Network digital authoring system and method thereof - Google Patents

Abstract

A network digital authoring system and method thereof is disclosed. By browsing a HTML document and executing embedded program of the HTML document at a client, so as to initialize a drawing area for user drawing directly by using a cursor, and providing either quoting a quoting picture from a server or inserting picture resource from an external network. After completion of drawing, the drawing is able to be stored on the server as a new quoting picture, and to be shared for other users by quoting. The mechanism is help to provide interaction of network digital authoring.

Description

Network digital creation system and method thereof

The invention relates to a network digital creation system and a method thereof, in particular to a network digital creation system and a method thereof for authoring and sharing reference images in a web browser for digital creation.

In recent years, with the popularity of computers and the rapid development of the Internet, many real-life applications have gradually been combined with computers, such as computer graphics, so application software or services that provide users with digital creation have emerged. .

In general, common digital creations have higher-order computer graphics and graffiti-type electronic whiteboards, both of which provide users with digital creation on a computer platform. The only difference is whether the functions are complete and targeted. The use of ethnic groups is also different. However, the learning threshold of computer graphics is relatively high. Therefore, the digital creation of electronic whiteboards has been accepted by the average user in the past. However, the current electronic whiteboard seems to be unable to meet the needs of more users. It can't share creative results with other users over the web, and it can't re-create with other users' creative results.

In view of this, some manufacturers have proposed more interactive electronic whiteboards, for example, combining instant messaging with electronic whiteboards to enhance the interaction between different users in the creation. However, since the above methods can only provide interaction between the two parties using instant messaging, it is still impossible to store the digitally created results, and the created results cannot be publicly shared through a web platform to provide other uses on the network. The user browses and cites, so the interaction of the digital creation itself is still insufficient for the user, so the above method still cannot effectively improve the interactiveness of the digital creation.

In summary, it can be seen that there has been a long-standing problem in the prior art that the interactiveness of digital creation cannot be effectively improved. Therefore, it is necessary to propose an improved technical means to solve this problem.

In view of the problems of the prior art, the present invention discloses a network digital authoring system and method thereof.

The network digital creation system disclosed by the invention comprises: a server and a client. The server stores a webpage file, and the server includes an image database, and the image database stores a reference image, and the reference image includes a reference drawing message.

In the client part, the client downloads and executes the webpage program embedded in the webpage file from the server, and the webpage program includes: an initial module, a setting module, a drawing module, a reference module, and an inserting module. . The initial module is used to initialize the drawing temporary storage area, the drawing block, the selection block and the search block; the setting module is used to set the drawing parameters by selecting the block, and setting the loading condition and loading through the search block. The drawing module is configured to generate an instant drawing message according to the drawing parameter and the cursor operation in the drawing block, and sequentially add the instant drawing message to the drawing temporary storage area, and generate or adjust the corresponding first according to the instant drawing message respectively. The image component is for display; the reference module, when the loading condition is a reference, generates a corresponding Quote Element Tag according to the loading parameter and attaches it to the drawing temporary storage area, and according to the reference element label self-image For example, the database loads the reference drawing information contained in the reference image, and sequentially appends the reference drawing message to the drawing temporary storage area, and generates a corresponding second image component according to the reference drawing information for display; inserting the module, When the load condition is insert, the Insert Element tag (Media Element Tag) with the load parameter embedded is generated, and the inserted element tag is attached to the drawing. a storage area, and loading a network image as an insert image message according to the inserted element tag, storing the inserted image message into the drawing temporary storage area, and forming a corresponding third image element according to the inserted image message and performing display.

The network digital authoring method of the present invention is applied to a network environment of a client and a server, and the steps include: storing a webpage file in a server, and providing a reference image in an image database of the server, the reference The image includes a reference drawing message; the client downloads and executes the webpage program embedded in the webpage file from the server; initializes the drawing temporary storage area, draws the block, selects the block and searches for the block; and sets the drawing parameter by selecting the block Generating an instant drawing message according to the drawing parameters and the cursor operation in the drawing block, and sequentially adding the instant drawing message to the drawing temporary storage area, and respectively generating or adjusting the corresponding first image component according to the instant drawing message for display Setting the loading condition and loading parameters through the search block; when the loading condition is a reference, generating a corresponding reference element label according to the loading parameter and appending it to the drawing temporary storage area, and self-image data according to the reference element label The library loads the reference drawing information contained in the reference image, and sequentially appends the reference drawing message to the drawing temporary storage area, and the root Referencing the drawing message to generate a corresponding second image element for display; when the input condition is inserting, generating an insert element label embedded with the loading parameter, and appending the inserted element label to the drawing temporary storage area, and according to the inserting element The tag loads the network image as an insert image message, stores the inserted image message into the drawing buffer area, and forms a corresponding third image element based on the inserted image message and displays it.

The system and method disclosed by the present invention are as above, and the difference from the prior art is that the present invention implements a webpage file embedded with a webpage program on a client to initialize a drawing block in the webpage file and allows the user to directly use the cursor. Draw and provide reference to the reference image pre-stored on the server or the image resource inserted into the external network for further drawing. After the user finishes drawing, the drawing result can be saved to the servo end as a reference image, and then through Share it to other users by reference.

Through the above technical means, the present invention can achieve the technical effect of improving the interaction of digital digital creation.

The embodiments of the present invention will be described in detail below with reference to the drawings and embodiments, so that the application of the technical means to solve the technical problems and achieve the technical effects can be fully understood and implemented.

Before describing the network digital authoring system and method thereof disclosed in the present invention, the nouns defined by the present invention are first described. The reference image of the present invention includes a reference drawing message, and can draw a message according to the references. The image is rendered in a manner that conforms to the specification of the Extensible Markup Language (XML), and the reference image is stored in the image database of the server, usually pre-stored or completed by the user. The extended markup language stored immediately after drawing; and the drawing temporary storage area is provided to the memory space temporarily stored in the drawing process, which is generated after the webpage program is executed by the client and initialized, and is used for the drawing process. For temporary recording, when the user finishes drawing and saves immediately, the content in the drawing temporary storage area, such as instant drawing message, reference element label or insert element label, will be transmitted to the server for storage as a reference map. Like, the drawing staging area will release this memory space with the end of the web page program. In actual implementation, the drawing temporary storage area uses different memory blocks to store reference element labels conforming to the XML specification, reference drawing information, instant drawing information and inserting element labels, and storing the inserted image information. In particular, the above reason is that only the instant drawing message, the reference element label or the inserted element label in the drawing buffer area is stored as a reference image, which is intended to save memory space and avoid infringement of copyright property rights.

In addition, the reference drawing information and the instant drawing message include at least one of a brush path, a deformation, a rotation, a stamp, a color, a size, a transparency, a number, an identification code, a background, and a storage location. The difference between the reference drawing message and the instant drawing message is that the reference drawing message is pre-stored in the image database, and the instant drawing message is generated when the drawing is performed. The insert element label is used as a basis for inserting an external network image, which includes at least one of a number, a size, and a network address of the network image, and the reference element The tag is used as a basis for referencing the reference image stored on the server, and includes at least one of a number, an identification code, a size, and the like. In particular, the reference drawing message, the instant drawing message, the reference element label, and the insert element label are all in accordance with the XML specification syntax, which will be described in detail later with the schema.

The network digit creation system and the method thereof are further described below with reference to the drawings. First, the network digit creation system of the present invention will be described first. Please refer to "FIG. 1", "FIG. 1" is the network of the present invention. A system block diagram of the digital number creation system, comprising: a client 10, a server 20, and a network 30. The client 10 and the server 20 communicate and transmit through the network 30. In actual implementation, the client 10 can communicate with the web album server 40 through the network 30 (for example, "Flickr", "Picasa". ...etc.) Network transmission to download the network image, the download method will be explained later.

In the part of the server 20, the server 20 stores a webpage file (not shown) to provide download and execution of the client 10, and the server 20 includes an image database 201. The image database 201 is used to store the reference image, and each reference image includes at least one reference drawing message. Since the reference image has been described in the previously defined noun, it is not used here. Narration. In particular, the image database 201 can be an associated database and allows editing and deletion of reference images stored therein using a structured query language.

Then, in a part of the client 10, the client 10 downloads the webpage file 11 from the server 20 through the network 30, and executes the webpage program 110 embedded in the webpage file 11. In fact, the client 10 can be regarded as The browser for browsing the webpage file 11 includes an initial module 111, a setting module 112, a drawing module 113, a reference module 114, and an insertion module 115. The initial module 111 is configured to initialize a drawing temporary storage area, a drawing block, a selection block, and a search block, where the drawing temporary storage area is used to record a drawing message generated by the user in the operation of drawing the block. (That is, the so-called instant drawing message), since the drawing temporary storage area has been described in the above-mentioned self-defined nouns, it will not be described here. In addition, the drawing block is an operation area for the user to draw; the selection block is a drawing tool required for the user to select, such as: a brush, a line, a stamp, etc.; Is to provide users to search and reference / insert other reference images or network images. In practical implementation, the selection block may include a brush, a line, a stamp, a deformation, a clear, a background tool selection, and after selecting one of them, a setting option corresponding to the selected tool may be provided to set the tool at The drawing parameters used in use will be described in detail later with the drawing.

The setting module 112 is configured to receive the drawing parameters set by the user in the selected block, and receive the input of the user in the search block to set the loading condition and the loading parameter. As mentioned earlier, the selection block can include tool selections such as brush, line, stamp, deformation, clear, background, etc., and after selecting one of them, provide corresponding setting options to set the drawing parameters, for example, assuming the user Select "brush", then select the block to further provide the corresponding settings of the "brush", such as: transparency, size, etc., for the user to make further settings, and by setting The module 112 takes the above settings as drawing parameters. In addition, the loading condition includes two types of references and insertions, which are used to determine whether the user desires to refer to the reference image in the image database 201 or to be stored in the web album server 40. Network image; the load parameter includes at least one of storage location, identification code, and network address, etc., for example, recording the network address of the reference image or network image. . In practical implementation, the search block may also allow the user to input the query condition on the client terminal 10, and query the reference image from the image database 201 of the server 20 according to the query condition, and then display the reference image. In the search block of the client 10, there may be more than one reference image. After the user selects the required reference image, the setting module 112 sets the selected identification code of the reference image as the loading parameter. .

The drawing module 113 is configured to draw and generate a corresponding instant drawing message according to the set drawing parameter and the user's cursor operation in the drawing block, and sequentially add the instant drawing message to the drawing temporary storage area, and respectively according to Instantly draw a message to generate or adjust the corresponding first image element for display. For example, if the drawing parameter is set to “brush; color: 240; transparency 1; size 5”, the user will generate an instant drawing message after the cursor is operated in the drawing block, for example: “<Pen id= "i_1" ix="-79" iy="2" b="5" c="240" a="1" ox="165" oy="91"></Pen>", where "Pen " represents a brush; "id" represents a number; "ix" and "iy" represent the initial coordinate position of the drawing; "b" represents the size; "c" represents the color; "a" represents transparency; "ox" and "oy ""x-axis" and "y-axis" representing the center coordinates, respectively. Then, according to the instant drawing message, the corresponding first image component is generated or adjusted in the drawing block and displayed, and the instant drawing message is added to the drawing temporary storage area, wherein the first image component is a vector Graphics.

As mentioned above, in actual implementation, the instant drawing message may further include a brush path, such as: "<p px="-79"py="1"/>". Where "p" represents the brush path; "px" and "py" represent the coordinate points that make up the brush path, in other words, when the user is drawing the coordinate position within the block ("-79", "1" When drawing a straight line from top to bottom to the coordinate position ("-49", "1"), the instant drawing message will contain "<p px="-79"py="1"/>", "< p px="-77"py="1"/>", "<p px="-75" py="1"/>"... and so on to "<p px="- 49" py="1"/>". In particular, although the present invention illustrates the recording form of the instant drawing message and the brush path by the above example, it is not used as a limitation of the instant drawing message and the brush path.

Referring to the module 114, when the user loads the reference image from the image database 201 through the search block selection, the loading condition is set as a reference, and the reference module 114 is set according to the same search block. The load parameter produces the corresponding reference element label, such as: "<QArt...>......</QArt>" and is attached to the drawing buffer, and the label is based on the reference element label. The database 201 loads the reference drawing information included in the reference image, and sequentially appends the reference drawing message to the current drawing temporary storage area, and generates a corresponding second image element for display according to the reference drawing information. . For example, suppose the load condition is a reference, and the corresponding reference element label is generated according to the identifier of the load parameter (for example: the value "4"), such as: "<QArt id="i_1" qid="4". .....>...</QArt>", where "QArt" is the distinguished name of the referenced element tag; "id" represents the number of the referenced element tag; "qid" represents the identification of the referenced drawing message code. And loading a reference image (ie, XML format data) from the image database 201 according to "qid" in the reference element tag, the reference image containing a reference drawing message, such as: "<Pen...>...< /Pen>", then the reference module 114 will load the reference drawing image directly after it is loaded in the drawing temporary storage area, and draw the message according to the reference in the drawing temporary storage area. The two image elements are displayed in the drawing block, and in actual implementation, the second image element is a vector graphic or a dot pattern. In particular, the reference drawing message "<Pen...>...</Pen>" is attached to the drawing staging area and will be labeled "<Quote qid="4"... >" and "</Quote>" are included, where the value of "qid" is the same as the value of "qid" in the corresponding reference element label. In addition, when the user repeatedly selects to load the same reference image, a corresponding number of reference element tags will be generated, but only the reference drawing message will be loaded once, and each reference element tag has a different number (ie, "id").

Inserting the module 115, when the user selects to load the network image through the search block, the loading condition is set to be inserted, and the inserting module 115 will generate the embedded loading parameter (also set by the search block). Insert the element label, and attach the insert element label to the drawing buffer area, and load the network image as the insert image message according to the insert element label, and save the inserted image message to the drawing temporary The storage area (that is, the network image is only temporarily stored in the memory), and the corresponding third image element is formed according to the inserted image information and displayed in the drawing block. As mentioned above, the setting module 112 can set the loading condition and the loading parameter through the search block, assuming that the loading condition is set to be inserted, and the loading parameter is set to a network address, such as: "http://abc/ A.jpg", the insert module 115 will generate an insert element tag embedded with a load parameter, such as: "<Media id="i_6" url="http://abc/a.jpg"..... .>...</Media>", where "Media" is the distinguished name of the inserted element tag, and "id" and "url" respectively represent the number of the inserted image message and the inserted network image. The network address and append the resulting inserted element label to the drawing staging area. Next, the insert module 115 loads the network image (the file name is "a.jpg") according to the "url" of the inserted element tag as the inserted image message (that is, "a.jpg" of the "binary" Data"), and storing the inserted image message into the drawing temporary storage area, and forming a corresponding third image element according to the inserted image information and displaying it, in actual implementation, the third image element will be based on The loaded network image becomes a vector graphic or a dot matrix graphic, that is, if the network image is a vector graphic (for example, a "Flash file" whose name is "SWF", etc. The third image component generated by the insertion module 115 is also a vector graphic. Conversely, if the network image is a dot matrix graphic (for example, the auxiliary file name is JPG, GIF..... The picture file of the etc., the third image element generated by the insertion module 115 is a dot pattern. In particular, the reference module 114 and the insertion module 115 may be used in turn or individually according to the user's operation, and the number of uses is not limited. In addition, when the user repeatedly selects to load the same network image, a corresponding number of inserted element tags will be generated, but only the network image is loaded once as an inserted image message to save memory space. And each inserted element tag has a different number (ie "id").

In addition, the webpage program 110 can further include a play module 116 and a storage module 117. The play module 116 sequentially selects the "immediately drawn message" or "referenced element tag" in the drawing temporary storage area after the user selects the playback component (for example, button or image) provided on the webpage through the cursor. Referring to the drawing message" or "inserting the element label and inserting the image message", thereby generating or adjusting the corresponding first image element or the second image element or the third image element for playing in the drawing area, in actual implementation The above-mentioned drawing information (including reference and insertion), element label (including reference and insertion), and the inserted image message may be temporarily stored in different memory blocks in the drawing temporary storage area, or even temporarily stored in a temporary storage file. Such as: "temp.xml" to save memory space. In this way, you can create animations for digital creation. In particular, since the same reference image or network image is referenced or inserted by the user two or more times, only one reference drawing message or one insertion image message is stored in the drawing buffer area. Therefore, in addition to saving memory space, processing efficiency can be greatly improved.

As for the storage module 117, after the user selects the storage component (for example, a button or an image) provided on the webpage through the cursor, all the contents in the temporary storage area (which may include an instant drawing message or a reference element label) Or inserting the element label) to the image database 201 in the server 20 as a reference image, that is, when the user located at the client 10 determines that the drawing is completed, the drawing result can be stored through the storage module 117 to The image database 201 of the server 20 is intended to be browsed or referenced by other users. In particular, the play module 116 can allow the user to control the display content through a time axis provided on the web page file when playing the first image element or the second image element or the third image element. The ratio can even be set by the setting button on the webpage file, and the display speed of the image component is controlled according to the speed parameter. For example, if there are ten instant drawing messages recorded in the drawing temporary storage area, Then, through the timeline, one of the ten instant drawing messages can be designated as the starting point of the playing, and the sequence is played to the last stroke, and the speed parameter can set the number of instant drawing messages played in one second, for example, for example. : Playing ten instant rendering messages in one second means that the display speed is "high", and playing an instant drawing message in one second means that the display speed is "slow".

As shown in "Figure 2A" and "Figure 2B", "2A" and "2B" are flowcharts of the method for creating a digital digitization method of the present invention, the steps of which include: storing webpage files in the server And the image database of the server provides a reference image, each reference image includes a reference drawing message (step 210); the client downloads and executes the webpage program embedded in the webpage file from the server (step 220); Drawing a temporary storage area, drawing a block, selecting a block, and searching for a block (step 230); setting a drawing parameter by selecting the block (step 240); generating an instant drawing message according to the drawing parameter and the cursor operation in the drawing block, and Instantly drawing the instant drawing message to the drawing temporary storage area, and respectively generating or adjusting the corresponding first image component according to the instant drawing message for displaying (step 250); setting the loading condition and the loading parameter through the searching block ( Step 260); when the loading condition is a reference, the corresponding reference element label is generated according to the loading parameter and is attached to the drawing temporary storage area, and the reference image is loaded from the image database according to the reference element label. The included reference drawing message, and the reference drawing message is sequentially attached to the drawing temporary storage area, and the corresponding second image element is generated according to the reference drawing information for display (step 270); when the loading condition is insertion, Generating an insert element tag with a load parameter embedded, and attaching the insert element tag to the drawing buffer, and loading the network image as an insert image message according to the inserted element tag, and storing the inserted image message to Drawing a temporary storage area, and forming a corresponding third image element according to the inserted image message and displaying (step 280), in particular, step 270 and step 280 are set according to the user in the search block. The load condition is selectively executed.

Through the above steps, the webpage file 11 embedded with the webpage program 110 can be executed at the client 10 to initialize the drawing block in the webpage file 11 and allow the user to directly draw with the cursor, and can provide the reference in advance to be stored on the server. The reference image of 20 or the image resource of the external network (that is, stored in the web album server 40) is further drawn, and the user can complete the drawing and save the drawing result to the server to become the reference image. And share it with other users by reference.

In addition, after step 280, the message or the instant drawing message or the insertion image message may be sequentially drawn according to the reference in the drawing temporary storage area to generate or adjust the corresponding first image element or the second image element or a third image element for playing (step 281); allowing adjustment of the time axis to control the display order of the first image element or the second image element or the third image element (step 282); setting the speed parameter, and according to a speed parameter to control a display speed of the first image element or the second image element or the third image element to be generated or adjusted (step 283); and inserting or inserting an instant drawing message or reference element in the drawing buffer area The element tag is transmitted to the image database in the server as a reference image (step 284). In the step 281, the user can understand the detailed drawing process by playing the animation, and the display order and speed of the image element are controlled by steps 282 and 283. Through the step 284, the drawing performed by the user at the client 10 in the drawing block can be stored in the image database 201 of the server 20 through the network 30 for browsing or reference by other users.

The following is a description of the following examples in conjunction with "3" to "6". Please refer to "3", "3" is a schematic diagram of the creation interface of the network digital creation of the present invention, including : authoring interface 300, cursor 301, drawing block 310, selecting block 320, brush element 321, line element 322, stamp element 323, deforming element 324, clearing element 325, background element 326, setting element 327, search block 330, internal reference 331, external insertion 332, reduction element 341, redo element 342, clear element 343, storage element 344, playback element 345, and full screen element 350. In particular, the invention does not limit the number and type of components included in the authoring interface 300.

When the user wants to perform digital creation (that is, a so-called drawing image), the client 10 can connect to the server 20 via the network 30 to download the webpage file 11 and execute the webpage program embedded in the webpage file 11. 110 to open the authoring interface 300, at this time, the initial module 111 will initialize the drawing temporary storage area, the drawing block 310, the selection block 320 and the search block 330, and the initialization refers to establishing a drawing temporarily available for the drawing process. The storage area, for example, declares the memory space or creates a temporary file "temp.xml", and displays the drawing block 310, the selection block 320, and the search block 330. After the initial module 111 completes the initialization, the user located at the client 10 can be allowed to perform the drawing operation through the web browser.

As shown in "4A" to "4G", "4A" to "4G" are schematic diagrams for drawing with the present invention. As mentioned above, the initial module 111 allows the user to perform the drawing operation after the initialization is completed. At this time, the user can draw in the drawing block 310 through the cursor 301. For example, the user can select the cursor 301. The brush element 321 in the block 320 is selected, and the transparency and size are further set through the setting element 327 (for example, the transparency is set to a value of "1" and the size is set to a value of "5"). At this time, the setting module 112 will The settings made by the user are used as drawing parameters. Next, the user moves the cursor 301 to the drawing block 310. When the user presses the left mouse button and drags and then releases the left mouse button, the drawing module 113 will draw the block according to the user. The cursor operation and drawing parameters in 310 generate an instant drawing message and generate a first image element 311 as shown in "FIG. 4A" for display according to the instant drawing message, and append the instant drawing message to the drawing temporary storage. In the district.

In addition, after the user selects the line component 322, the user can also set the transparency and size through the setting component 327 (for example, the transparency is set to a value of "1" and the size is set to a value of "5"), and is drawn in the drawing block 310. Pressing the left mouse button and dragging it horizontally and then releasing the left mouse button will generate the corresponding instant drawing message and generate the first image element 312 as shown in "Fig. 4B". Taking the generated instant drawing message as an example, if the left mouse button is pressed, the position of the cursor 301 is a coordinate ("5", "5"), and when the horizontal drag is performed, the left mouse button is released. The position of the cursor 301 is a coordinate ("10", "5"). At this time, the instant drawing message generated by the drawing module 113 is as follows: "<Line id="i_1" ix="5" iy="5" b ="5" a="1"...>...</Line>", where "Line" represents the line; "id" represents the number; "ix" and "iy" represent the initial coordinate position of the drawing ("5", "5"), then, the rendering module 113 will generate a corresponding first image element 312 based on this instant rendering message. In particular, in actual implementation, the first image elements (311, 312) generated above are all vector graphics.

After the user clicks on the stamp component 323, the setting component 327 can also be used for advanced setting (for example, the "star" is selected as the designated stamp by the cursor 301), and this setting is used as a drawing parameter, and then the drawing block is drawn. After the operation of the cursor 301 in 310, the first image element 313a is generated as shown in "FIG. 4C", and the difference between the manner in which the first image element 313a is generated and the manner in which the brush and the line are generated is that the difference lies only in The format of the instant drawing message is different, so I won't go into details here. In particular, the user can deform and move the display position of the first image element (311, 312, and 313a) generated by the pointing deformation element 324 by the user selecting the deformation element 324. The first image element 313a to be adjusted is selected in the drawing block 310. At this time, the drawing module 113 will generate a corresponding instant drawing message, such as: "<Trans tg="i_1"...>", Wherein "Trans" represents a deformation; "tg="i_1"" represents a deformation or movement of the first image element (for example, the first image element 313a) of the number "i_1". Then, the drawing module 113 adjusts the corresponding first image element 313a for display according to the instant drawing message, and appends the instant drawing message to the drawing temporary storage area. Assuming that the instant rendering message is to deform the first image element 313a, the first image element 313a is enlarged to the first image element 313b as shown in "4D", and may even be moved through the cursor 301. The image element 313b generates a corresponding instant rendering message, and the rendering module 113 generates a first image element 313c as illustrated in "FIG. 4E" for display based on the instant rendering message.

Taking "4C" to "4E" above as an example, the instant drawing messages recorded in the drawing temporary storage area are as follows:

Where "Stamp" represents the use of the stamp; "i_8" represents the number of the stamp; "star" represents the type of the stamp as a star; "Trans tg="i_8"" represents the adjustment of the stamp numbered "i_8". In addition, "<p px="50" py="50" r="0" sx="1" sy="1"/>" to "<p px="50" py="50" r=" 0" sx="6" sy="6"/>" and "<p px="50" py="50" r="0" sx="6" sy="6"/>" to "< p px="50" py="50" r="-5" sx="6" sy="6"/>" represents the detailed adjustment steps, where "px" and "py" are the coordinates of the stamp Position; "r" is the axis angle of the stamp, clockwise rotation is positive, counterclockwise is negative; "sx" and "sy" are the size of the stamp. In particular, although the present invention uses the above example to illustrate the instant drawing message recorded in the drawing temporary storage area, it is not used as a limitation of the parameters and names of the instant drawing message.

After the user selects the clearing component 325, the first image component 313c to be cleared can be clicked in the drawing block 310, and the corresponding instant in the drawing temporary storage area is deleted according to the number of the first image component 313c. Draw a message, which is cleared as shown in Figure 4F. Alternatively, the background element 326 can also be selected to set the background color, assuming that the message is drawn immediately, such as: <Art canvasColor="111">...</Art>, where "Art" represents the drawing. The starting point; "/Art" represents the end point of the drawing; "canvasColor" represents the canvas color (also known as the background color); "111" is the specified color. If the user specifies a color, the value "111" will change with the specified color. Conversely, if the user does not specify a color, the preset background color can be used. After the user specifies the color, the drawing block 310 as shown in "4G" shows the specified color (the color is represented by a halftone dot).

Please refer to "5A" to "5C". "5A" to "5C" are schematic diagrams for applying the reference image of the present invention or inserting a network image for re-rendering. In addition to the selection by the selection block 320, the user can click on the internal reference 331 to open the browsing window 400 to connect to the image database 201 to view the reference image as shown in FIG. 5A. Thumbnail 411a, and after the user clicks on the reference image thumbnail 411a, the setting module 112 sets the loading condition to "reference", and references the reference image corresponding to the image thumbnail 411a. The identification code (for example: "gYcMt") is set as the loading parameter. At this time, since the loading condition is "reference", the reference module 114 generates a corresponding reference element label according to the loading parameter, such as: "<QArt Id="i_1" qid="gYcMt"...></QArt>" and append to the drawing staging area, and load from the image repository 201 based on the "qid" of the referenced element tag Corresponding reference image, and attaching the reference drawing information included in the reference image to the drawing temporary storage area, and generating a second image element 411b as shown in "Fig. 5B" according to the included reference drawing message Display. At this point, the user can again render the second image element 411b through the matching selection block 320 and the drawing block 310.

The following is a description of the changes in the drawing staging area before and after the reference element label is attached, assuming that the content of the message recorded in the drawing staging area is as follows:

The reference drawing information recorded in the reference image corresponding to the reference image thumbnail 411a is as follows:

Then, when the reference module 114 appends the reference drawing information included in the reference image to the drawing temporary storage area, the content recorded in the drawing temporary storage area is as follows:

The part of the bold type is the reference element label newly attached to the drawing temporary storage area. The number of the referenced element label is "i_1"; and the identifier of the reference drawing information is "gYcMt". In addition, the reference drawing information contained in the referenced reference image will be stored in the drawing temporary storage area and recorded in "<Quote qid="gYcMt"...>" and "</Quote>" between. In particular, the reference element label has the same "qid" as the corresponding reference drawing message. In the above example, the "qid" is "gYcMt".

In addition, the user can click on the external insertion 332 to input the network address of the network image (for example, "http://abc/apple.gif"). At this time, the setting module 112 will set the loading condition. To "plug in" and set this network address as a load parameter. Then, since the loading condition is "insert", the insert module 115 will generate an insert element tag embedded with the load parameter, such as "http://abc/apple.gif", for example: "<Media url= "http://abc/apple.gif"...>...</Media>" and append this insert element tag to the drawing stanza and load the net based on the inserted element tag A network image with the address "http://abc/apple.gif" is used as an image insertion message and stored in the drawing buffer area, and the image information is formed according to the "5C picture". The illustrated third image element 412 is displayed and displayed. In this example, since the network image is a bitmap image, the resulting third image element 412 is also a bitmap image.

The following describes the changes in the drawing staging area before and after the insertion of the element label, assuming that the contents recorded in the drawing staging area are as follows:

Then, when the insert module 115 attaches the insert element tag "<Media url="http://abc/apple.gif"...>...</Media>" to the drawing staging area The content recorded in the drawing staging area is as follows:

The part of the bold type is the inserted element label newly attached to the drawing temporary storage area. In actual implementation, the inserted element label can further include a number, such as: "<Media id="i_6" url="http: //abc/apple.gif"...>...</Media>", where "id="i_6"" represents the number of this inserted element tag "i_6" and the corresponding insert image The messages also have the same number so that the corresponding inserted image message can be displayed according to this number.

In particular, when the user draws the drawing block 310, the user can restore the previous drawing step by clicking the restore component 341, that is, deleting the previous one of the label "</Art>" in the drawing temporary storage area. Instantly draw a message or reference an element tag or insert an element tag; or click the redo element 342 to restore the deleted instant draw message or reference element tag or insert element tag; even click clear element 343 to delete all drawing staging areas All in the content. In addition, the storage element 344 can be selected to transmit the reference element label or the instant drawing message or the insertion element label in the drawing temporary storage area to the server terminal 20 through the storage module 117, and store it in the image database 201 as Referencing the image; and clicking the playback component 345 to sequentially load the instant drawing message or the reference drawing message or the insertion image message from the drawing temporary storage area, and draw the message or insert according to the loaded instant drawing message or reference The image message sequentially generates or adjusts the corresponding first image element or second image element or third image element for playback. When the user clicks on the full screen component 350, the authoring interface 300 (ie, full screen display) can be enlarged to facilitate the user to draw in the drawing block 310.

Finally, please refer to "Fig. 6", and "Picture 6" is a schematic diagram of the management of the album by applying the present invention. In actual implementation, browsing window 400 (please refer to "5A") can display the network image stored in the network photo album (stored in the web album server 40), so for convenience and Successfully browsing the web album, the user can click on the hyperlink in the webpage (not shown) to open the setting window 500 to obtain the authorization code of the web album, and the authorization code is obtained through the album. The selection component 510 selects a web album used by the user to connect to the corresponding web album server 40 (eg, "Flickr", "Picasa", etc.), and from the network. The album server 40 downloads the login web page to be displayed in the login sub-page 520. At this time, the user can input the account number and password in the account input block 521 and the password input block 522 respectively, and then log in through the cursor 301 to log in to the component 523, and after the login is successful, the web album server is successfully authenticated. 40 obtain the authorization code, so that the browsing window 400 can normally open the network image of the network album that requires the account and password. In addition, when the user inputs the wrong account number and password, the user can click the recovery component 524 to restore the state before the input, and even click the cancel component 525 to cancel the login.

In particular, in actual implementation, the server 20 may further include a member database (not shown) for storing the member account and the member password, so as to provide the user to log in, and only allow the user to successfully log in. After the authoring interface 300 is operated, if the user successfully logs in to the web album server 40 through the login web page displayed on the login sub-page 520 and obtains the authorization code, the member database can store the authorization code and perform the authorization code with the member account. correspond.

In summary, it can be seen that the difference between the present invention and the prior art is that the webpage file 11 embedded with the webpage program 110 is executed at the client 10 to initialize the drawing block 310 in the webpage file 11 and allow the user to directly use the cursor. The 301 performs drawing, and can provide a reference image pre-stored on the server 20 or an image resource inserted into the external network for further drawing. After the user finishes drawing, the drawing result can be saved to the server 20 as a reference map. For example, it can be shared with other users by reference, and this technical means can solve the problems existing in the prior art, thereby achieving the technical effect of improving the interaction of digital digital creation.

While the present invention has been described above in the foregoing embodiments, it is not intended to limit the invention, and the invention may be modified and modified without departing from the spirit and scope of the invention. The scope of patent protection shall be subject to the definition of the scope of the patent application attached to this specification.

10. . . Client

11. . . Web page file

20. . . Servo end

30. . . network

40. . . Web album server

110. . . Web application

111. . . Initial module

112. . . Setting module

113. . . Drawing module

114. . . Reference module

115. . . Insert module

116. . . Playback module

117. . . Storage module

201. . . Image database

300. . . Creative interface

301. . . cursor

310. . . Draw block

311, 312. . . First image element

313a~313c. . . First image element

320. . . Select block

321. . . Brush component

322. . . Line component

323. . . Stamp component

324. . . Deformation element

325. . . Clear component

326. . . Background component

327. . . Setting component

330. . . Search block

331. . . Internal reference

332. . . External insertion

341. . . Reduction element

342. . . Redo component

343. . . Clear component

344. . . Storage element

345. . . Playback component

350. . . Full screen component

400. . . Browse window

411a. . . Reference image thumbnail

411b. . . Second image element

412. . . Third image element

500. . . Setting window

510. . . Album selection component

520. . . Login subpage

521. . . Account entry block

522. . . Password input block

523. . . Login component

524. . . Recovery component

525. . . Cancel component

Step 210: storing a webpage file in the server, and providing at least one reference image in an image database of the server, each of the reference images including at least one reference drawing message

Step 220: The client downloads and executes a webpage program embedded in the webpage file from the server.

Step 230 initializes a drawing temporary storage area, a drawing block, a selection block, and a search block.

Step 240 sets a drawing parameter through the selection block.

Step 250, in the drawing block, generating at least one instant drawing message according to the drawing parameter and the cursor operation, and sequentially adding the at least one instant drawing message to the drawing temporary storage area, and generating respectively according to the at least one instant drawing message Or adjusting a corresponding first image element for display

Step 260 sets a loading condition and a loading parameter through the search block.

Step 270: when the loading condition is a reference, generate a corresponding reference element label according to the loading parameter and attach to the drawing temporary storage area, and load the reference drawing from the image database according to the reference element label. The at least one reference drawing message is included, and the at least one reference drawing message is sequentially attached to the drawing temporary storage area, and a corresponding second image element is generated according to the at least one reference drawing message for display.

Step 280: when the loading condition is inserting, generate an insert element tag embedded with the loading parameter, and attach the insert element tag to the drawing temporary storage area, and load a network map according to the inserted element label. Forming an image message as an insert, attaching the inserted image message to the drawing temporary storage area, and forming a corresponding third image element according to the inserted image message and displaying

Step 281 sequentially generates or adjusts the corresponding first image element or the second image element according to the instant drawing messages or the reference drawing information or the inserted image information in the drawing temporary storage area. Or the third image element for playing

Step 282 allows adjusting a time axis to control the display order of the first image element or the second image element or the third image element

Step 283 sets a speed parameter, and according to the speed parameter, controls the display speed of the first image element or the second image element or the third image element to be generated or adjusted.

Step 284: transmitting the instant drawing message or the reference element label or the insertion element label in the drawing temporary storage area to the image database in the server as the reference image

1 is a system block diagram of a network digital authoring system of the present invention.

2A and 2B are flowcharts of a method for creating a network digital bit according to the present invention.

Figure 3 is a schematic diagram of the authoring interface of the network digital creation of the present invention.

4A to 4G are schematic views of the drawing by the application of the present invention.

5A to 5C are diagrams for applying the reference image of the present invention or inserting a network image for re-rendering.

Figure 6 is a schematic diagram of the management of the album using the present invention.

10. . . Client

11. . . Web page file

20. . . Servo end

30. . . network

40. . . Web album server

110. . . Web application

111. . . Initial module

112. . . Setting module

113. . . Drawing module

114. . . Reference module

115. . . Insert module

116. . . Playback module

117. . . Storage module

201. . . Image database

Claims (22)

A network digital creation system includes: a server for storing a webpage file, the server comprising: an image database for storing at least one reference image, each of the reference images including at least one reference drawing And a client for downloading and executing a webpage program embedded in the webpage file from the server, the webpage program comprising: an initial module for initializing a drawing temporary storage area and a drawing area a block, a selection block and a search block; a setting module for setting a drawing parameter through the selection block, and setting a loading condition and a loading parameter through the search block; And generating at least one instant drawing message according to the drawing parameter and the cursor operation in the drawing block, and sequentially adding the at least one instant drawing message to the drawing temporary storage area, and respectively drawing the message according to the at least one instant drawing Generating or adjusting a corresponding first image element for display; a reference module, when the loading condition is a reference, generating a corresponding reference element label according to the loading parameter Adding to the drawing temporary storage area, loading the at least one reference drawing message included in the reference image from the image database according to the reference element label, and sequentially attaching the at least one reference drawing message to the Drawing a temporary storage area, and generating a corresponding second image element for display according to the at least one reference drawing message; and inserting a module, when the loading condition is inserting, generating a one embedded with the loading parameter Inserting an element tag, attaching the insert element tag to the drawing staging area, and loading a web image as an insert image message according to the insert element tag, and storing the inserted image message to the drawing a temporary storage area, and forming a corresponding third image element according to the inserted image message and displaying. The network digital authoring system of claim 1, wherein the webpage program further comprises a playing module, configured to sequentially draw the information according to the instant drawing messages or the references in the drawing temporary storage area. Or inserting the image message to generate or adjust the corresponding first image element or the second image element or the third image element for playback. The network digital authoring system of claim 2, wherein the playing module comprises allowing adjustment of a time axis to control the first image element or the second image element or the third image element. display order. The network digital authoring system of claim 2, wherein the playing module further comprises setting a speed parameter, and controlling the first image element or the second image element according to the speed parameter or The display speed at which the third image element is generated or adjusted. The network digital authoring system of claim 1, wherein the webpage program further comprises a storage module for inserting the instant drawing message or the reference element label or the insert in the drawing temporary storage area. The element tag is transmitted to the image database in the server as the reference image. The network digital authoring system of claim 1, wherein the reference drawing message and the instant drawing message at least include a brush path, a deformation, a rotation, a stamp, a color, a size, a transparency, a number, an identification code, and a background. And a storage location, wherein the inserted element label includes at least one of a number, a size, and a network address, and the reference element label includes at least one of a number, an identifier, and a size. The network digital authoring system of claim 1, wherein the selection block includes a brush, a line, a stamp, a deformation, a clear, a background selection, and after selecting one of the selection blocks, providing a corresponding setting option. To set the drawing parameters. The network digital authoring system of claim 1, wherein the search block allows a query condition to be entered, and the at least one reference image that matches the image database is queried and displayed according to the query condition. And after selecting the at least one reference image that matches the setting, setting the loading condition as a reference, and setting an identification code of the selected at least one reference image to the loading parameter. The network digital authoring system of claim 1, wherein the loading parameter comprises at least one of a storage location, an identification code, and a network address. The network digital authoring system of claim 1, wherein the drawing temporary storage area is a memory space, and the reference element label conforming to the XML specification, the at least one reference is separately stored in different memory blocks. Drawing a message, the at least one instant drawing message and the inserted element tag, and storing the inserted image message. The network digital authoring system of claim 1, wherein when the reference element label or the insert element label has the same loading parameter, only the reference image or the network is loaded and stored once. Image to the drawing staging area. A network digital creation method is applied to a network environment having a client and a server. The steps include: storing a webpage file in the server, and providing at least one image database in the server. Referring to the image, each of the reference images includes at least one reference drawing message; the client downloads and executes a webpage program embedded in the webpage file from the server; and the client executes the webpage program to perform the following steps : initializing a drawing temporary storage area, a drawing block, a selecting block, and a searching block; setting a drawing parameter through the selecting block; generating at least one instant according to the drawing parameter and the cursor operation in the drawing block Draw a message, and sequentially add the at least one instant drawing message to the drawing temporary storage area, and respectively generate or adjust a corresponding first image component according to the at least one instant drawing message for display; and set the search block by using the search block a load condition and a load parameter; when the load condition is a reference, a corresponding reference element label is generated according to the load parameter and is attached to Loading the at least one reference drawing message included in the reference image from the image database according to the reference element label, and sequentially attaching the at least one reference drawing message to the drawing temporary storage And generating a corresponding second image element for display according to the at least one reference drawing message; and when the loading condition is inserting, generating an insert element label embedded with the loading parameter, and inserting the An element tag is attached to the drawing temporary storage area, and a network image is loaded according to the inserted element label as an inserted image message, and the inserted image message is attached to the drawing temporary storage area, and according to the insertion The image message forms a corresponding third image element and is displayed. The method for creating a network digital number according to claim 12, wherein the method further comprises: sequentially, according to the instant drawing information in the drawing temporary storage area or the reference drawing information or the inserted image information, The step of generating or adjusting the corresponding first image element or the second image element or the third image element for playback. The network digit creation method of claim 12, wherein the method further comprises allowing adjustment of a time axis to control display of the first image element or the second image element or the third image element. The sequence of steps. The network digit creation method of claim 12, wherein the method further comprises setting a speed parameter, and controlling the first image element or the second image element or the third according to the speed parameter. The step of the display speed at which the image element is produced or adjusted. The network digital authoring method of claim 12, wherein the method further comprises: transmitting the instant drawing message or the reference element label or the inserting element label in the drawing temporary storage area to the server. The image database serves as the step of the reference image. The network digital authoring method of claim 12, wherein the reference drawing message and the instant drawing message at least include a brush path, a deformation, a rotation, a stamp, a color, a size, a transparency, a number, an identification code, and a background. And a storage location, wherein the inserted element label includes at least one of a number, a size, and a network address, and the reference element label includes at least one of a number, an identifier, and a size. The network digit creation method according to claim 12, wherein the selection block includes a brush, a line, a stamp, a deformation, a clear, a background selection, and after selecting one of the selection blocks, providing a corresponding setting option. To set the drawing parameters. The network digit creation method according to claim 12, wherein the search block allows a query condition to be input, and the at least one reference image that is matched is displayed and displayed from the image database according to the query condition. And after selecting the at least one reference image that matches the setting, setting the loading condition as a reference, and setting an identification code of the selected at least one reference image to the loading parameter. The network digital authoring method of claim 12, wherein the loading parameter comprises at least one of a storage location, an identification code, and a network address. The network digit creation method according to claim 12, wherein the drawing temporary storage area is a memory space, and the reference element label conforming to the XML specification is respectively stored in different memory blocks, and the at least one reference is used. Drawing a message, the at least one instant drawing message and the inserted element tag, and storing the inserted image message. The network digit authoring method of claim 12, wherein when the reference element label or the insert element label has the same loading parameter, only the reference image or the network is loaded and stored once. Image to the drawing staging area.