CN109948103A - Web-based image edit method, image editing apparatus and electronic equipment - Google Patents
Web-based image edit method, image editing apparatus and electronic equipment Download PDFInfo
- Publication number
- CN109948103A CN109948103A CN201910308307.0A CN201910308307A CN109948103A CN 109948103 A CN109948103 A CN 109948103A CN 201910308307 A CN201910308307 A CN 201910308307A CN 109948103 A CN109948103 A CN 109948103A
- Authority
- CN
- China
- Prior art keywords
- layer
- image
- content
- web
- web page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Processing Or Creating Images (AREA)
Abstract
This application provides web-based image edit method, image editing apparatus and electronic equipments.This method comprises: being rendered based on the web page element Canvas for editing image that webpage carries to original image to be edited, to obtain the first figure layer；Generating one has the second figure layer that size identical as first figure layer and transparency are 0.0；Second figure layer is fully stacked and placed on first figure layer；And the second content is generated in second figure layer, second content is drawn so that being equivalent in first figure layer in visual effect.Picture editting is carried out by the web page element Canvas for editing image that webpage carries in this way, to allow user after reopening the image that editor completes, secondary operation is carried out to the edit operation of original image, to improve the efficiency of picture editting.Also, user can be used without installing any plug-in unit i.e., and such operation mode is more friendly to user.
Description
Technical field
The present invention relates generally to field of image processing, compiles more particularly to web-based image edit method, image
Collect device and electronic equipment.
Background technique
Web application is the leading role of the cybertimes of rapid development, and the Webization of software not only becomes mobility more
By force, it is often more important that increase between user deeper into cooperation and interaction possibility.As browser manufacturer is to Web standard
The enhancing of follow-up and capability of personal computers, the image editing function based on Web are increasingly becoming reality.
Picture editting's mode currently based on Web is usually to use the browser plug-ins drawing image such as flash, in installation pair
After answering plug-in unit, user can draw newly-increased figure or image on original image.However, such picture editting side based on Web
Case has many defects in practical applications.
Firstly, needing user to install corresponding plug-in unit on the client using plug-in mode could use.For most of use
For family, one side is fitted without the use habit of plug-in unit；On the other hand, some plug-in units install complex, user
Not necessarily it will be installed.
Secondly, constantly adding new content, example substantially on original image in the way of the picture editting of plug-in unit
Such as figure or image.Once new content is excessive, user is difficult to pointedly make modification and adjustment.
Also, after having edited and having saved picture, if being again turned on the picture, originally it is directed to original image
Edit operation is automatically canceled, and user is caused to be difficult to realize editing again for the revocation to original edit operation, playback, deletion etc.
Function.In practical applications, it is common requirement that user modifies picture repeatedly, this causes inconvenience to user, reduces use
The efficiency of family picture editting.
Therefore, it is necessary to improved web-based picture editting's schemes.
Summary of the invention
In order to solve the above-mentioned technical problem, the application is proposed.The embodiment of the present application provides a kind of web-based figure
As edit methods, image editing apparatus and electronic equipment, the web page element for being used to edit image carried by webpage
Canvas carries out picture editting, wherein each step edit operation executes in the new figure layer generated by Canvas, described image
Edit methods realize the visual effect edited to original image by the stacking between each figure layer, also, save in image
And after reopening, secondary operation can be carried out to the edit operation of original image, to improve the efficiency of picture editting.
According to the one side of the application, a kind of web-based image edit method is provided, comprising: included based on webpage
The web page element Canvas for editing image original image to be edited is rendered, to obtain the first figure layer, wherein
The original image has first content；Based on the web page element Canvas, generating one has and the first figure layer phase
With the second figure layer of size, wherein the transparency of second figure layer is 0.0；Second figure layer is fully stacked and placed on institute
State the first figure layer；And the second content is generated in second figure layer, so that being equivalent in visual effect described
Second content is drawn in one figure layer.
In above-mentioned web-based image edit method, the method further includes: it is based on the web page element
Canvas generates the third figure layer with size identical as first figure layer, wherein the transparency of the third figure layer
It is 0.0；The third figure layer is fully stacked and placed on second figure layer；And it is generated in third in the third figure layer
Hold, draws the third content so that being equivalent in first figure layer in visual effect.
In above-mentioned web-based image edit method, the method further includes: it is based on 64 encoder pair of Base
Each figure layer is encoded, and the content in each figure layer is separately converted to 64 text data of Base；And it will compile
Each figure layer after code, is saved in same file according to preset order.
In above-mentioned web-based image edit method, the method further includes: open the file；And
Based on the web page element Canvas for being used to edit image that webpage carries, the content in each figure layer is carried out with preset order
Rendering, to restore the image originally edited, wherein the former edit operation of original image is retained.
In above-mentioned web-based image edit method, the method further includes: the original of original image is edited
It is operated, the operation includes at least one of revocation, playback and deletion.
In above-mentioned web-based image edit method, second content and the third content are selected from shape, road
At least one of diameter, text, image, object style and color or any several combination.
According to the another aspect of the application, a kind of image editing apparatus is provided, comprising: rendering unit, for being based on net
The included web page element Canvas for editing image of page renders original image to be edited, to obtain the first figure
Layer, wherein the original image has first content；Figure layer generation unit is generated for being based on the web page element Canvas
One the second figure layer with size identical as first figure layer, wherein the transparency of second figure layer is 0.0；It is stacked
Unit, for second figure layer to be fully stacked and placed on first figure layer, and, content generation unit, for described
The second content is generated in second figure layer, is drawn in described second in first figure layer so that being equivalent in visual effect
Hold.
In above-mentioned image editing apparatus, the figure layer generation unit is based further on the web page element Canvas, raw
At a third figure layer with size identical as first figure layer, wherein the transparency of the third figure layer is 0.0；Institute
Overlapping unit is stated, is further used for the third figure layer being fully stacked and placed on second figure layer；And the content generates
Unit is further used for generating third content in the third figure layer, so that being equivalent in visual effect described the
The third content is drawn in one figure layer.
In above-mentioned image editing apparatus, described device further comprises coding unit, is used for: being encoded based on Base 64
Device encodes each figure layer, and the content in each figure layer is separately converted to 64 text data of Base；And
By each figure layer after coding, it is saved in same file according to preset order.
In above-mentioned image editing apparatus, the rendering unit is further used for: being schemed based on what webpage carried for editing
The web page element Canvas of picture renders the content in each figure layer in the open file with preset order, with
Restore the image originally edited, wherein be retained to the former edit operation of original image.
In above-mentioned image editing apparatus, the content generation unit is further used for: editing to the original of original image
It is operated, the operation includes at least one of revocation, playback and deletion.
In above-mentioned image editing apparatus, second content and the third content are selected from shape, path, text, figure
At least one of picture, object style and color or any several combination.
According to the another aspect of the application, a kind of electronic equipment is provided, comprising: processor；And memory, described
Computer program instructions are stored in memory, the computer program instructions make the place when being run by the processor
It manages device and executes web-based image edit method as described above.
According to the another aspect of the application, a kind of computer readable storage medium is provided, computer program is stored thereon with
Instruction is operable to execute web-based figure as described above when the computer program instructions are executed by a computing apparatus
As edit methods.
Picture editting is carried out by the web page element Canvas for editing image that webpage carries, wherein each step is compiled
It collects operation to execute in the new figure layer generated by Canvas, described image edit methods pass through the stacking between each figure layer and realize
It, can be to the editor of original image to the visual effect that original image is edited, also, after image saves and reopens
Operation carries out secondary operation, to improve the efficiency of picture editting
Web-based image edit method, image editing apparatus and electronic equipment provided by the present application, can effectively lead to
It crosses the included web page element Canvas for editing image of webpage and carries out picture editting, to allow user reopening editor
After the image of completion, secondary operation is carried out to the edit operation of original image, to improve the efficiency of picture editting.Also, it uses
Family can be used without installing any plug-in unit i.e., and such operation mode is more friendly to user.
Money of the application by polynary ubiquitousization litigation services technical research (No.2016YFC0800802) project funds
It helps.
Detailed description of the invention
From the detailed description with reference to the accompanying drawing to the embodiment of the present invention, these and/or other aspects of the invention and
Advantage will become clearer and be easier to understand, in which:
Fig. 1 illustrates the flow charts according to the web-based image edit method of the embodiment of the present application.
Fig. 2 illustrates the schematic diagram that figure layer stacks in the image edit method according to the embodiment of the present application.
The effect that Fig. 3 illustrates after encoding in the image edit method according to the embodiment of the present application to each image is shown
It is intended to.
Fig. 4 illustrates the first schematic diagram of the application example according to the image edit method of the embodiment of the present application.
Fig. 5 illustrates the second schematic diagram of the application example according to the image edit method of the embodiment of the present application.
Fig. 6 illustrates the third schematic diagram of the application example according to the image edit method of the embodiment of the present application.
Fig. 7 illustrates the 4th schematic diagram of the application example according to the image edit method of the embodiment of the present application.
Fig. 8 illustrates the block diagram of the web-based image editing apparatus according to the embodiment of the present application.
Fig. 9 illustrates the block diagram of the electronic equipment according to the embodiment of the present application.
Specific embodiment
In the following, example embodiment according to the application will be described in detail with reference to the attached drawings.Obviously, described embodiment is only
A part of the embodiment of the application, rather than the whole embodiments of the application, it should be understood that the application is not by example described herein
The limitation of embodiment.
Exemplary process
Fig. 1 illustrates the flow charts according to the web-based image edit method of the embodiment of the present application.As shown in Figure 1,
According to the web-based image edit method of the embodiment of the present application, comprising: S110 is used to edit image based on what webpage carried
Web page element Canvas original image to be edited is rendered, to obtain the first figure layer, wherein original image tool
There is first content；S120 is based on the web page element Canvas, generates the with size identical as first figure layer
Two figure layers, wherein the transparency of second figure layer is 0.0；Second figure layer is fully stacked and placed on described first by S130
Figure layer；And S140, the second content is generated in second figure layer, so that being equivalent in visual effect described
Second content is drawn in one figure layer.
Correspondingly, web-based image edit method provided by the present application is schemed by what webpage carried for editing
The web page element Canvas of picture carries out picture editting, so that user can carry out image volume without installing any plug-in unit on webpage
Volume.Such image-editing operations mode is more friendly to user.
In step s 110, based on webpage carry for editing the web page element Canvas of image to be edited original
Image is rendered, to obtain the first figure layer, wherein the original image has first content.Those skilled in the art should know
Dawn, it is a new label of HTML5 that Canvas web page element, which is also known as canvas element, allows scripting language dynamic rendering position
Image.Avoid the trouble of additional installation browser plug-in using Canvas technology rendering image, and with browser scripting language
(JavaScript) interaction is convenient.
Correspondingly, in step s 110, using the primary Canvas web page element of browser to the image to be edited of acquisition
It is rendered to generate the first figure layer, in turn, is basic figure layer with first figure layer, executes subsequent image-editing operations.
Here, procedural representation image to be edited rendered using Canvas element: by original image " drafting " to be edited
(in other words, the first image is equivalent to painting canvas, and image rendering is suitable on to first figure layer created based on Canvas element
In Image Rendering).
In step S120 and S130, it is based on the web page element Canvas, generating one has and first figure layer
Second figure layer of identical size, the transparency of second figure layer are 0.0；And second figure layer is fully stacked and placed on
First figure layer.In other words, in step S120 and step S130, included using JavaScript code access webpage
Canvas element, and create one with the first figure layer have identical size (identical height and width) and transparency for 0.0 the
Two figure layers, and by second map overlay in the first figure layer.It is arranged by " figure layer stacking ", may make subsequent image editor's mistake
Journey is not drawn in base map layers, but be plotted in one it is new in the consistent transparent figure layer of base map layers.
In step S140, the second content is generated in second figure layer, so that being equivalent in visual effect
Second content is drawn in first figure layer.It would be appreciated that just because of second figure layer and first figure layer are complete
It is overlapped display entirely, therefore, from visual effect, the second figure layer of editor and the visual effect phase one for editing the first figure layer
It causes.Those skilled in the art will be appreciated that, can draw various contents based on Canvas web page element, including but not limited to: lines (packet
Include straight line and camber line), context, path, shape (for example, rectangle, five rings etc.), image, animation etc..
Compared to picture editting is directly carried out in the base map layers, stacked by figure layer and to edit the transparent of stacking
The mode of figure layer carries out picture editting, being associated between image-editing operations and figure layer can be more effectively established, after being conducive to
(here, edit operation indicates image again: reopening editor's completion of preservation for edit operation again for continuous image preservation and image
Image carries out secondary image editor).
It would be appreciated that can be created in real image editing process more for the ease of layer management and picture editting
Transparent figure layer, and successively newly created figure layer is fully stacked and placed in such a way that step S120 is disclosed into S140
In one transparent figure layer, and corresponding contents are edited in newly created transparent figure layer, effect is as shown in Figure 2.For example, based on practical
Demand can further create third figure layer, and process includes: firstly, based on the web page element Canvas, and generating one has
The third figure layer of size identical as first figure layer, wherein the transparency of the third figure layer is 0.0；Secondly, by described
Three figure layers are fully stacked and placed on second figure layer；Then, third content is generated in the third figure layer, so that in vision
It is equivalent in effect in first figure layer and draws the third content.
After picture editting for the first time completes, it is further advanced by the image that specific encoder completes editor and compiles
Code, and the image after coding is saved into file.Particularly, in the embodiment of the present application, 64 encoder pair of Base is selected
Each figure layer is encoded, and detailed process includes: to be turned picture material corresponding in each figure layer using Base64 encoder
Turn to 64 text data of Base, wherein each one figure layer of this preservation of style of writing.In turn, by each figure layer after coding, according to
Preset order is saved in same file.Fig. 3 illustrate in the image edit method according to the embodiment of the present application to each image into
Effect diagram after row coding.It is illustrated in figure 3 the image file as 9 image-editing operations and containing 10 layers of figure layer
Format (effect opened using text editor).
Each figure layer is saved into a file, conducive to scenario reduction when being again turned on, also, after reduction scene still
Secondary editor can be carried out to image-editing operations before.More specifically, during opening preservation file to restore scene,
The web page element Canvas renders the content in each figure layer according to preset order, to restore the figure originally edited
Picture, wherein corresponding figure layer is still stored in the former edit operation of original image.In other words, open what editor completed secondary
After image, original image-editing operations are effectively retained, so that secondary editor is carried out to image-editing operations before, with
Improve picture editting's efficiency.Here, secondary edit operation, including but not limited to cancel, reset and delete etc..
Correspondingly, in the embodiment of the present application, described image edit methods, further includes:
Each figure layer is encoded based on 64 encoder of Base, the content in each figure layer is converted respectively
For 64 text data of Base；And
By each figure layer after coding, it is saved in same file according to preset order.
Also, described image edit methods, further includes:
Open the file；And
Based on the web page element Canvas for being used to edit image that webpage carries, with preset order in each figure layer
Content is rendered, to restore the image originally edited, wherein is retained to the former edit operation of original image.
In addition, described image edit methods, further includes:
The former edit operation of original image is operated, the operation includes at least one in revocation, playback and deletion
Kind.
It to sum up, can be effectively included by webpage according to the web-based image edit method of the embodiment of the present application
For edit image web page element Canvas carry out picture editting, with allow user reopening editor complete image
Later, secondary operation is carried out to the edit operation of original image, to improve the efficiency of picture editting.Also, user is without installation
Any plug-in unit can be used, and such operation mode is more friendly to user.Fig. 4 illustrates the image according to the embodiment of the present application
First schematic diagram of the application example of edit methods.Fig. 5 illustrates the application of the image edit method according to the embodiment of the present application
Second schematic diagram of example.Fig. 6 is illustrated to be illustrated according to the third of the application example of the image edit method of the embodiment of the present application
Figure.Fig. 7 illustrates the 4th schematic diagram of the application example according to the image edit method of the embodiment of the present application.This apply example
In, Fig. 4 illustrates original image to be edited, and Fig. 5 illustrates to carry out wash with watercolours to the original image in Fig. 4 using Canvas element
Dye, to generate the process of first figure layer with original image, Fig. 6, which is illustrated, to be had using the creation of Canvas element with the first image
There is identical size and the second transparent figure layer, and depict rectangle frame in the second figure layer, Fig. 7 is illustrated edit operation figure
The effect of layer (the second figure layer) display Chong Die with figure layer (the first figure layer) where original image.
In order to make it easy to understand, exposition core code.Specifically, wash with watercolours is carried out to original image using in example at this
The core of dye includes, as follows:
Let img=new Image ()；
Img.src="http://www.example.com/img.jpg"；
Let baseLayer=document.createElement (" canvas ")；
BaseLayer.width=img.widht；
BaseLayer.height=img.height；
baseLayer.getContext("2d").drawImage(img,0,0)；
It is applied in example at this, create the second figure layer and draws the core code of rectangle frame in second figure layer, such as
Under:
Let topLayer=document.createElement (" canvas ")；
TopLayer.width=baseLayer.width；
TopLayer.height=baseLayer.height；
Let topLayerContext=topLayer.getContext (" 2d ")；
TopLayerContext.strokeStyle=" red "；
TopLayerContext.lineWidth=3；
topLayerContext.beginPath()；
topLayerContext.clearRect(0,0,topLayer.width,topLayer.height)；
topLayerContext.rect(x,y,width,height)；
topLayerContext.stroke()；
topLayerContext.closePath()；
It is applied in example at this, the core code by the display Chong Die with original image layer of edit operation figure layer includes, as follows:
TopLayer.style.zIndex=baseLayer.style.zIndex+1；// will editor figure layer be placed in it is original
It is shown on figure layer
TopLayer.style.position=" absolute "；
TopLayer.style.left=baseLayer.style.left；
TopLayer.style.top=baseLayer.style.top；
It should can be seen that at this using in example, there are also part operations not to show that, for example, utilizing Base32 encoder
The image completed to editor encodes；Each figure layer after coding is saved to same file；It opens and saves file to restore
Scene；Secondary editor etc. is carried out to original edit operation.Those skilled in the art will be appreciated that, any to be familiar with web page editing language
Engineer can be based on technical idea editor's respective code disclosed by the application, and implements operation disclosed by the application, is limited to
Length, details are not described herein.
Schematic apparatus
Fig. 8 illustrates the block diagram of the web-based image editing apparatus according to the embodiment of the present application.
As shown in figure 8, the web-based image editing apparatus 800 according to the embodiment of the present application includes: rendering unit
810, for being rendered based on the web page element Canvas for editing image that webpage carries to the original image of acquisition, with
Obtain the first figure layer, wherein the original image has first content；Figure layer generation unit 820, for based on the webpage member
Plain Canvas generates second figure layer with size identical as first figure layer, wherein second figure layer it is transparent
Degree is 0.0；Overlapping unit 830, for second figure layer to be fully stacked and placed on first figure layer；And content generates
Unit 840, for generating the second content in second figure layer, so that being equivalent in visual effect in first figure
Second content is drawn on layer.
In one example, in above-mentioned image editing apparatus 800, the figure layer generation unit 820 is based further on institute
Web page element Canvas is stated, generates the third figure layer with size identical as first figure layer, wherein the third figure
The transparency of layer is 0.0；The overlapping unit 830 is further used for the third figure layer being fully stacked and placed on described second
Figure layer；And the content generation unit 840, it is further used for generating third content in the third figure layer, so that
It is equivalent in visual effect in first figure layer and draws the third content.
In one example, in above-mentioned image editing apparatus 800, described image editing device 800 further includes that coding is single
Member 850, is used for: being encoded based on 64 encoder of Base to each figure layer, the content in each figure layer is turned respectively
Turn to 64 text data of Base；And it by each figure layer after coding, is saved in same file according to preset order.
In one example, in above-mentioned image editing apparatus 800, the rendering unit 810 is further used for: being based on
The included web page element Canvas for being used to edit image of webpage, with preset order to each figure layer in the open file
On content rendered, to restore the image originally edited, wherein be retained to the former edit operation of original image.
In one example, in above-mentioned image editing apparatus 800, the content generation unit 840 is further used for:
The former edit operation of original image is operated, the operation includes at least one of revocation, playback and deletion.
In one example, in above-mentioned image editing apparatus 800, second content and the third content are selected from shape
At least one of shape, path, text, image, object style and color or any several combination.
Here, it will be understood by those skilled in the art that the tool of each unit and module in above-mentioned image editing apparatus 800
Body function and operation have been described above in web-based image edit method and its application example referring to figs. 1 to Fig. 7 description
It is discussed in detail, and therefore, will omit its repeated description.
As described above, may be implemented on various browsers according to the image editing apparatus of the embodiment of the present application, such as hunt
Leopard browser, Google's browser, 9.0 or more IE browser.In this regard, not limited to by the application.
Exemplary electronic device
In the following, being described with reference to Figure 9 the electronic equipment according to the embodiment of the present application.
Fig. 9 illustrates the block diagram of the electronic equipment according to the embodiment of the present application.
As shown in figure 9, electronic equipment 10 includes one or more processors 11 and memory 12.
Processor 11 can be central processing unit (CPU) or have data-handling capacity and/or instruction execution capability
Other forms processing unit, and can control the other assemblies in electronic equipment 10 to execute desired function.
Memory 12 may include one or more computer program products, and the computer program product may include each
The computer readable storage medium of kind form, such as volatile memory and/or nonvolatile memory.The volatile storage
Device for example may include random access memory (RAM) and/or cache memory (cache) etc..It is described non-volatile to deposit
Reservoir for example may include read-only memory (ROM), hard disk, flash memory etc..It can be deposited on the computer readable storage medium
One or more computer program instructions are stored up, processor 11 can run described program instruction, to realize this Shen described above
The web-based image edit method of each embodiment please and/or other desired functions.The computer can
It reads that original image can also be stored in storage medium, save the various contents such as file.
In one example, electronic equipment 10 can also include: input unit 13 and output device 14, these components pass through
The interconnection of bindiny mechanism's (not shown) of bus system and/or other forms.
For example, the input unit 13 can be such as keyboard, mouse etc..
The output device 14 can be output to the outside various information, including save file etc..The output equipment 14 can wrap
Include such as display, loudspeaker, printer and communication network and its remote output devices connected etc..
Certainly, to put it more simply, illustrated only in Fig. 9 it is some in component related with the application in the electronic equipment 10,
The component of such as bus, input/output interface etc. is omitted.In addition to this, according to concrete application situation, electronic equipment 10 is also
It may include any other component appropriate.
Exemplary computer program product
Other than the above method and equipment, embodiments herein can also be computer program product comprising meter
Calculation machine program instruction, it is above-mentioned that the computer program instructions make the processor execute this specification when being run by processor
The step of described in " illustrative methods " part according to the web-based image edit method of the various embodiments of the application.
The computer program product can be write with any combination of one or more programming languages for holding
The program code of row the embodiment of the present application operation, described program design language includes object oriented program language, such as
Java, C++ etc. further include conventional procedural programming language, such as ", go back language or similar programming language.Journey
Sequence code can be executed fully on the user computing device, partly execute on a user device, be independent soft as one
Part packet executes, part executes on a remote computing or completely in remote computing device on the user computing device for part
Or it is executed on server.
In addition, embodiments herein can also be computer readable storage medium, it is stored thereon with computer program and refers to
It enables, the computer program instructions make the processor execute above-mentioned " the exemplary side of this specification when being run by processor
According to the step in the web-based image edit method of the various embodiments of the application described in method " part.
The computer readable storage medium can be using any combination of one or more readable mediums.Readable medium can
To be readable signal medium or readable storage medium storing program for executing.Readable storage medium storing program for executing for example can include but is not limited to electricity, magnetic, light, electricity
Magnetic, the system of infrared ray or semiconductor, device or device, or any above combination.Readable storage medium storing program for executing it is more specific
Example (non exhaustive list) includes: the electrical connection with one or more conducting wires, portable disc, hard disk, random access memory
Device (RAM), read-only memory (ROM), erasable programmable read only memory (EPROM or flash memory), optical fiber, portable compact disc
Read-only memory (CD-ROM), light storage device, magnetic memory device or above-mentioned any appropriate combination.
The basic principle of the application is described in conjunction with specific embodiments above, however, it is desirable to, it is noted that in this application
The advantages of referring to, advantage, effect etc. are only exemplary rather than limitation, must not believe that these advantages, advantage, effect etc. are the application
Each embodiment is prerequisite.In addition, detail disclosed above is merely to exemplary effect and the work being easy to understand
With, rather than limit, it is that must be realized using above-mentioned concrete details that above-mentioned details, which is not intended to limit the application,.
Device involved in the application, device, equipment, system block diagram only as illustrative example and be not intended to
It is required that or hint must be attached in such a way that box illustrates, arrange, configure.As those skilled in the art will appreciate that
, it can be connected by any way, arrange, configure these devices, device, equipment, system.Such as "include", "comprise", " tool
" etc. word be open vocabulary, refer to " including but not limited to ", and can be used interchangeably with it.Vocabulary used herein above
"or" and "and" refer to vocabulary "and/or", and can be used interchangeably with it, unless it is not such that context, which is explicitly indicated,.Here made
Vocabulary " such as " refers to phrase " such as, but not limited to ", and can be used interchangeably with it.
It may also be noted that each component or each step are can to decompose in the device of the application, device and method
And/or reconfigure.These decompose and/or reconfigure the equivalent scheme that should be regarded as the application.
The above description of disclosed aspect is provided so that any person skilled in the art can make or use this
Application.Various modifications in terms of these are readily apparent to those skilled in the art, and are defined herein
General Principle can be applied to other aspect without departing from scope of the present application.Therefore, the application is not intended to be limited to
Aspect shown in this, but according to principle disclosed herein and the consistent widest range of novel feature.
In order to which purpose of illustration and description has been presented for above description.In addition, this description is not intended to the reality of the application
It applies example and is restricted to form disclosed herein.Although already discussed above multiple exemplary aspects and embodiment, this field skill
Its certain modifications, modification, change, addition and sub-portfolio will be recognized in art personnel.
Claims (10)
1. a kind of web-based image edit method characterized by comprising
Original image to be edited is rendered based on the web page element Canvas for editing image that webpage carries, to obtain
Obtain the first figure layer, wherein the original image has first content；
Based on the web page element Canvas, second figure layer with size identical as first figure layer is generated, wherein
The transparency of second figure layer is 0.0；
Second figure layer is fully stacked and placed on first figure layer；And
The second content is generated in second figure layer, is drawn in first figure layer so that being equivalent in visual effect
Second content.
2. web-based image edit method according to claim 1, further comprises:
Based on the web page element Canvas, the third figure layer with size identical as first figure layer is generated, wherein
The transparency of the third figure layer is 0.0；
The third figure layer is fully stacked and placed on second figure layer；And
Third content is generated in the third figure layer, is drawn in first figure layer so that being equivalent in visual effect
The third content.
3. web-based image edit method according to claim 1 or 2, further comprises:
Each figure layer is encoded based on Base64 encoder, the content in each figure layer is separately converted to
Base64 text data；And
By each figure layer after coding, it is saved in same file according to preset order.
4. web-based image edit method according to claim 3, further comprises:
Open the file；And
Based on the web page element Canvas for being used to edit image that webpage carries, with preset order to the content in each figure layer
It is rendered, to restore the image originally edited, wherein the former edit operation of original image is retained.
5. web-based image edit method according to claim 4, further comprises:
The former edit operation of original image is operated, the operation includes at least one of revocation, playback and deletion.
6. -5 any web-based image edit method according to claim 1, wherein second content and described
Third content is selected from least one of shape, path, text, image, object style and color or any several combination.
7. a kind of image editing apparatus characterized by comprising
Rendering unit, the web page element Canvas for editing image for being carried based on webpage is to original image to be edited
It is rendered, to obtain the first figure layer, wherein the original image has first content；
Figure layer generation unit, for being based on the web page element Canvas, generating one has ruler identical as first figure layer
The second very little figure layer, wherein the transparency of second figure layer is 0.0；
Overlapping unit, for second figure layer to be fully stacked and placed on first figure layer；And
Content generation unit, for generating the second content in second figure layer, so that being equivalent in visual effect
Second content is drawn in first figure layer.
8. image editing apparatus according to claim 7, wherein
The figure layer generation unit is based further on the web page element Canvas, and generating one has and first figure layer
The third figure layer of identical size, wherein the transparency of the third figure layer is 0.0；
The overlapping unit is further used for the third figure layer being fully stacked and placed on second figure layer；And
The content generation unit is further used for generating third content in the third figure layer, so that in visual effect
On be equivalent in first figure layer and draw the third content.
9. a kind of electronic equipment, comprising:
Processor；And
Memory is stored with computer program instructions in the memory, and the computer program instructions are by the processing
Device makes the processor execute such as web-based image edit method of any of claims 1-6 when running.
10. a kind of computer readable storage medium, which is characterized in that be stored with computer on the computer readable storage medium
Program instruction is operable to execute as any in claim 1-6 when the computer program instructions are executed by a computing apparatus
Web-based image edit method described in.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910308307.0A CN109948103A (en) | 2019-04-17 | 2019-04-17 | Web-based image edit method, image editing apparatus and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910308307.0A CN109948103A (en) | 2019-04-17 | 2019-04-17 | Web-based image edit method, image editing apparatus and electronic equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109948103A true CN109948103A (en) | 2019-06-28 |
Family
ID=67015322
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910308307.0A Pending CN109948103A (en) | 2019-04-17 | 2019-04-17 | Web-based image edit method, image editing apparatus and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109948103A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110968196A (en) * | 2019-11-29 | 2020-04-07 | 稿定（厦门）科技有限公司 | Picture processing method and device |
| CN111355998A (en) * | 2019-07-23 | 2020-06-30 | 杭州海康威视数字技术股份有限公司 | Video processing method and device |
| CN112581559A (en) * | 2020-12-01 | 2021-03-30 | 贝壳技术有限公司 | Chart generation method and device in application and storage medium |
| CN113282852A (en) * | 2020-02-20 | 2021-08-20 | 北京沃东天骏信息技术有限公司 | Method and device for editing webpage |
| CN113961175A (en) * | 2021-12-16 | 2022-01-21 | 中电云数智科技有限公司 | Method for processing picture text and computer readable storage medium |
| CN115641400A (en) * | 2022-11-04 | 2023-01-24 | 广州大事件网络科技有限公司 | Dynamic picture generation method, system, equipment and storage medium |
| WO2023051432A1 (en) * | 2021-09-30 | 2023-04-06 | 北京字跳网络技术有限公司 | Image editing method and apparatus |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040075652A1 (en) * | 2002-10-17 | 2004-04-22 | Samsung Electronics Co., Ltd. | Layer editing method and apparatus in a pen computing system |
| CN103678685A (en) * | 2013-12-26 | 2014-03-26 | 华为技术有限公司 | Webpage labeling method and device |
| CN107369197A (en) * | 2017-07-05 | 2017-11-21 | 腾讯科技（深圳）有限公司 | Image processing method, device and equipment |
| CN108010106A (en) * | 2017-11-22 | 2018-05-08 | 努比亚技术有限公司 | A kind of method for displaying image, terminal and computer-readable recording medium |
-
2019
- 2019-04-17 CN CN201910308307.0A patent/CN109948103A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20040075652A1 (en) * | 2002-10-17 | 2004-04-22 | Samsung Electronics Co., Ltd. | Layer editing method and apparatus in a pen computing system |
| CN103678685A (en) * | 2013-12-26 | 2014-03-26 | 华为技术有限公司 | Webpage labeling method and device |
| CN107369197A (en) * | 2017-07-05 | 2017-11-21 | 腾讯科技（深圳）有限公司 | Image processing method, device and equipment |
| CN108010106A (en) * | 2017-11-22 | 2018-05-08 | 努比亚技术有限公司 | A kind of method for displaying image, terminal and computer-readable recording medium |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111355998A (en) * | 2019-07-23 | 2020-06-30 | 杭州海康威视数字技术股份有限公司 | Video processing method and device |
| CN111355998B (en) * | 2019-07-23 | 2022-04-05 | 杭州海康威视数字技术股份有限公司 | Video processing method and device |
| CN110968196A (en) * | 2019-11-29 | 2020-04-07 | 稿定（厦门）科技有限公司 | Picture processing method and device |
| CN110968196B (en) * | 2019-11-29 | 2022-09-02 | 稿定（厦门）科技有限公司 | Picture processing method and device |
| CN113282852A (en) * | 2020-02-20 | 2021-08-20 | 北京沃东天骏信息技术有限公司 | Method and device for editing webpage |
| CN112581559A (en) * | 2020-12-01 | 2021-03-30 | 贝壳技术有限公司 | Chart generation method and device in application and storage medium |
| WO2023051432A1 (en) * | 2021-09-30 | 2023-04-06 | 北京字跳网络技术有限公司 | Image editing method and apparatus |
| CN113961175A (en) * | 2021-12-16 | 2022-01-21 | 中电云数智科技有限公司 | Method for processing picture text and computer readable storage medium |
| CN115641400A (en) * | 2022-11-04 | 2023-01-24 | 广州大事件网络科技有限公司 | Dynamic picture generation method, system, equipment and storage medium |
| CN115641400B (en) * | 2022-11-04 | 2023-11-17 | 广州大事件网络科技有限公司 | Dynamic picture generation method, system, equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109948103A (en) | Web-based image edit method, image editing apparatus and electronic equipment | |
| US8756489B2 (en) | Method and system for dynamic assembly of form fragments | |
| CN105574049B (en) | Page processing method, device and system for mobile application | |
| US9507480B1 (en) | Interface optimization application | |
| WO2016054549A1 (en) | Application prototyping tool | |
| CN111428177A (en) | Method and system for WEB content generation | |
| CN103324731A (en) | Method and device for converting spreadsheet file into web format file | |
| CN104932889A (en) | Page visual generation method and device | |
| US8635518B1 (en) | Methods and systems to copy web content selections | |
| US9141596B2 (en) | System and method for processing markup language templates from partial input data | |
| US9152619B2 (en) | System and method for constructing markup language templates and input data structure specifications | |
| CN105230051A (en) | For the method for the collaborative authoring with editing function, device and computer-readable medium | |
| CN110309451A (en) | A kind of web preloads the generation method and device of the page | |
| US20170010869A1 (en) | Multistage customizing of web-based application in a browser independent of platform and operating system | |
| CN102663198A (en) | Method and system for designing and manufacturing printed matter on line by combining background and foreground of web | |
| CN104572967A (en) | Method and device for drawing pattern on page | |
| US9426202B2 (en) | Transforming application cached template using personalized content | |
| WO2018226349A1 (en) | Vector graphics handling processes for user applications | |
| CN105094753A (en) | Method, device, and system for drawing wireframe | |
| CN115659917A (en) | Document format restoration method and device, electronic equipment and storage equipment | |
| CN112597101A (en) | Method and device for converting topological graph file into SVG file based on web front end | |
| JP6053717B2 (en) | Method for extracting a color seam of a page described in a markup language, an electronic device for extracting the color seam, and a program for the electronic device | |
| KR101709186B1 (en) | Interactive multimedia E-book authoring apparatus and method | |
| US10937012B2 (en) | Remote document generation | |
| US20150161085A1 (en) | Natural language-aided hypertext document authoring |
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 | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20190628 |
|
| WD01 | Invention patent application deemed withdrawn after publication |