WO2020140650A1 - 一种图像处理方法及装置、存储介质、电子设备 - Google Patents

一种图像处理方法及装置、存储介质、电子设备 Download PDF

Info

Publication number
WO2020140650A1
WO2020140650A1 PCT/CN2019/120968 CN2019120968W WO2020140650A1 WO 2020140650 A1 WO2020140650 A1 WO 2020140650A1 CN 2019120968 W CN2019120968 W CN 2019120968W WO 2020140650 A1 WO2020140650 A1 WO 2020140650A1
Authority
WO
WIPO (PCT)
Prior art keywords
image
editing
received
editing operation
processed
Prior art date
Application number
PCT/CN2019/120968
Other languages
English (en)
French (fr)
Inventor
杨涛
Original Assignee
深圳壹账通智能科技有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 深圳壹账通智能科技有限公司 filed Critical 深圳壹账通智能科技有限公司
Publication of WO2020140650A1 publication Critical patent/WO2020140650A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation

Definitions

  • the present application relates to the field of image processing technology, and in particular, to an image processing method and device, storage medium, and electronic equipment.
  • the ⁇ canvas> element of Hypertext Markup Language 5 (HyperText Markup Language 5, HTML5) is used to generate images in real time on the web page of the browser.
  • the ⁇ canvas> tag is just a graphics container, and scripts (usually JavaScript) must be used to draw graphics .
  • the graphics drawn on the Canvas cannot be scaled, so whenever the height or width of the Canvas is reset, the canvas content will be cleared.
  • the present application provides an image processing method and device, storage medium, and electronic equipment.
  • a first aspect of the embodiments of the present application discloses an image processing method.
  • the method includes:
  • a second aspect of an embodiment of the present application discloses an image processing device, the device including:
  • a first detection unit configured to detect whether a first image editing operation for the original image to be processed is received
  • the editing unit is configured to, when receiving the first image editing operation, edit the dom element in the original image to be processed according to the first image editing operation to obtain the first image;
  • the first detection unit is also used to detect whether a second image editing operation for the first image is received
  • the editing unit is further configured to, when receiving the second image editing operation, edit the dom element in the first image according to the second image editing operation to obtain a second image;
  • the generating unit is configured to, when receiving the image generating operation, call Canvas to generate the target image matching the second image with the preset format to be output.
  • a third aspect of the embodiments of the present application discloses an electronic device.
  • the electronic device includes:
  • the technical solution provided by the embodiments of the present application enables each editing operation to be performed only on the dom element in the image during image editing, without clearing the original image and re-editing. It can reduce the memory occupancy rate in the process of picture editing, solve the stuck problem, and then improve the efficiency of picture editing and enhance the user experience.
  • FIG. 1 is a schematic structural diagram of an image processing device disclosed in an embodiment of the present application.
  • FIG. 3 is a flowchart of another image processing method disclosed in an embodiment of the present application.
  • FIG. 5 is a schematic structural diagram of an image processing apparatus disclosed in an embodiment of the present application.
  • FIG. 6 is a schematic structural diagram of another image processing device disclosed in an embodiment of the present application.
  • FIG. 7 is a schematic structural diagram of yet another image processing device disclosed in an embodiment of the present application.
  • the implementation environment of the present application may be electronic devices, such as smart phones, tablet computers, and desktop computers.
  • the original image to be processed extracted by the electronic device may be: an image downloaded from an Internet webpage or a video image.
  • the audio component 110 is configured to output and/or input audio signals.
  • the audio component 110 includes a microphone (Microphone, MIC for short).
  • the microphone is configured to receive an external audio signal.
  • the received audio signal may be further stored in the memory 104 or sent via the communication component 116.
  • the audio component 110 further includes a speaker for outputting audio signals.
  • the image processing apparatus 100 may be implemented by one or more application specific integrated circuits (Application Specific Integrated Circuit (ASIC for short), digital signal processor, digital signal processing device, programmable logic device, field programmable gate Arrays, controllers, microcontrollers, microprocessors or other electronic components are implemented to perform the following methods.
  • ASIC Application Specific Integrated Circuit
  • FIG. 2 is a schematic flowchart of an image processing method disclosed in an embodiment of the present application. As shown in FIG. 2, the image processing method may include the following steps:
  • the editing type of the first image editing operation includes the first type editing or the second type editing, wherein the first type editing includes at least shape editing, and the second type editing includes at least color editing.
  • the dom element in the original image can be obtained according to the actual situation.
  • the dom element in the original image to be processed is an editable area of the original image to be processed.
  • step 203 may include:
  • the first type of editing includes at least shape editing, which affects the geometric properties of the dom element
  • the original image to be processed is processed according to the first image editing operation.
  • the dom elements are rearranged to obtain the first image, including:
  • the geometric attributes of the dom elements in the original image to be processed are recalculated and rearranged to obtain the first image.
  • the image can be edited according to the editing type to which the first image editing operation belongs, thereby further improving the image editing efficiency.
  • the geometric attribute of the dom element when the change of the dom element affects the geometric attribute of the dom element, the geometric attribute of the dom element needs to be recalculated, and the geometric attributes of other elements in the image may be affected. In such a case, it occurs
  • the operation of reconstructing the rendering tree is called rearrangement.
  • the editing type of the second image editing operation includes the first type editing or the second type editing, wherein the first type editing includes at least shape editing, and the second type editing includes at least color editing.
  • step 204 the following steps may also be performed:
  • the dom element in the first image can be obtained. It can be seen that by implementing this embodiment, the dom element in the first image can be obtained according to the actual situation.
  • the dom element in the first image is an editable area in the first image.
  • step 205 may include:
  • the editing type to which the second image editing operation belongs is determined; when the second image editing operation belongs to the first type of editing, the dom elements in the first image are rearranged according to the second image editing operation To obtain a second image; when the second image editing operation belongs to the second type of editing, redraw the dom element in the first image according to the second image editing operation to obtain the second image.
  • the first type of editing includes at least shape editing, which affects the geometric properties of the dom element
  • the second image editing operation belongs to the first type of editing
  • the first image is edited according to the second image editing operation. Rearrange the dom elements to obtain the second image, including:
  • call Canvas When receiving the image generation operation, call Canvas to generate the second image to generate a target image that matches the preset format to be output.
  • the preset format to be output includes at least a base64 format.
  • the method of invoking Canvas to generate the second image to a target image that matches the preset format to be output is specifically:
  • Canvas is called through the plug-in htmltocanvas, and the second image is generated according to the development platform (openapi) of the plug-in htmltocanvas to generate a target image that matches the preset output format; openapi is to encapsulate a software component or a web service into a series of computer-readable
  • the data interface is open to the application programming interface (API) for use by third-party developers.
  • API application programming interface
  • the storage instruction includes at least a name for the first storage operation; when the storage is received When instructing, save the named first storage operation to the history operation list; after performing step 205, detect whether a storage instruction for storing the second image editing operation as a history operation is received, the storage instruction includes at least the second storage operation Naming; when receiving the above storage instruction, save the named second storage operation to the history operation list.
  • FIG. 3 is a schematic flowchart of another image processing method disclosed in an embodiment of the present application. As shown in FIG. 3, the image processing method may include the following steps:
  • the dom element in the previous image is edited according to the image editing operation to obtain the Nth image. It can be seen that with this implementation mode, in each image editing operation, only the dom element in the previous image needs to be edited without clearing the canvas, which solves the stuck problem and improves the image editing efficiency.
  • the storage instruction includes at least a name for the third storage operation; when the above storage is received When instructing, save the named third storage operation to the history operation list. It can be seen that, in the implementation of this embodiment, when it is necessary to perform the same editing operation on the image with the same graphic element in the video file, the historical operation stored in the historical operation list can be called to further improve the editing efficiency.
  • call Canvas When receiving the image generation operation, call Canvas to generate the third image to a target image that matches the preset format to be output.
  • the manner in which Canvas is called to generate the target image that matches the preset image to be output with the third image is specifically:
  • Canvas is called through the plugin htmltocanvas, and the third image is generated according to the development platform (openapi) of the plugin htmltocanvas to generate the target image matching the preset output format; openapi is to encapsulate a software component or a web service into a series of computer-readable
  • the data interface is open to the application programming interface (API) for use by third-party developers.
  • API application programming interface
  • FIG. 4 is a schematic flowchart of another image processing method disclosed in an embodiment of the present application.
  • the image processing method in this embodiment further includes the following steps.
  • the target storage format may be BMP format, JPEG format, GIF format, PNG format or PSD format, which is not limited in the embodiment of the present application
  • the generating unit 504 is configured to call Canvas to generate a target image that matches the preset format to be output when the image generating operation is received.
  • the first detection unit 502 is also used to detect whether a third image editing operation for the second image is received.
  • the editing unit 503 is further configured to edit the dom element in the second image according to the third image editing operation when the third image editing operation is received, to obtain the third image.
  • the dom element in the previous image is edited according to the image editing operation to obtain the Nth image.
  • the Canvas When receiving the image generation operation, the Canvas is called to generate the third image with the target image matching the preset format to be output.
  • the generating unit 504 is configured to call Canvas to generate a target image that matches the third image with the preset format to be output when receiving the image generating operation as follows:
  • Canvas is called through the plugin htmltocanvas, and the third image is generated according to the development platform (openapi) of the plugin htmltocanvas to generate the target image matching the preset output format; openapi is to encapsulate a software component or a web service into a series of computer-readable
  • the data interface is open to the application programming interface (API) for use by third-party developers.
  • API application programming interface
  • the output unit 507 is used to output the updated video file and detect whether a video file storage operation is received.
  • the first storage unit 508 is configured to store the updated video file when the video file storage operation is received.
  • the setting unit 509 is configured to set the current state of the updated video file to the editing incomplete state when the video file storage operation is not received.
  • the editing unit 503 is further configured to edit the dom element in the original image to be processed according to the first image editing operation when the first image editing operation is received. After obtaining the first image, detect Whether a storage instruction to store the first image editing operation as a historical operation is received, the storage instruction includes at least the naming of the first storage operation; when the above storage instruction is received, the named first storage operation is saved to the historical operation List
  • the editing unit 503 is also used to edit the dom element in the first image according to the second image editing operation when the second image editing operation is received, after obtaining the second image, to detect whether the second image editing operation is received Storing as a storage instruction of a historical operation, the storage instruction including at least the naming of the second storage operation; when the above storage instruction is received, the named second storage operation is saved to the historical operation list;
  • the editing unit 503 is configured to edit the dom element in the original image to be processed according to the first image editing operation when receiving the first image editing operation, and the method of obtaining the first image is specifically:
  • the edit type to which the first image editing operation belongs is determined; when the first image editing operation belongs to the first type of editing, the dom element in the original image to be processed is repeated according to the first image editing operation Row to obtain the first image; when the first image editing operation belongs to the second type of editing, the dom element in the original image to be processed is redrawn according to the first image editing operation to obtain the first image.
  • the above-mentioned editing unit 503 is used when the first image editing operation belongs to the first type of editing, based on the first image
  • the editing operation rearranges the dom elements in the original image to be processed, and the method of obtaining the first image is specifically:
  • the geometric attributes of the dom elements in the original image to be processed are recalculated and rearranged to obtain the first image.
  • the second detection unit 510 is further configured to detect whether a second definition operation for defining an editable area in the first image is received within a preset duration.
  • the obtaining unit 511 is further configured to obtain the dom element in the first image according to the second definition operation when the second definition operation is received within a preset duration, the dom element in the first image corresponding to the editable in the first image area.
  • the obtaining unit 511 is also used to identify the graphics in the original image to be processed when the second definition operation is not received within the preset duration, and use the area occupied by the graphics in the original image as the original image to be processed. Edit the area to obtain the dom element in the first image.
  • the dom element in the first image corresponds to the editable area in the first image.
  • the type of editing to which the second image editing operation belongs is determined; when the second image editing operation belongs to the first type of editing, the dom element in the first image is repeated according to the second image editing operation Row to obtain the second image; when the second image editing operation belongs to the second type of editing, the dom element in the first image is redrawn according to the second image editing operation to obtain the second image.
  • the above editing unit 503 is used when the second image editing operation belongs to the first type of editing, according to the second The image editing operation rearranges the dom elements in the first image, and the method for obtaining the second image is specifically:
  • the geometric attributes of the dom elements in the first image are recalculated and rearranged to obtain the second image.
  • the image can be edited according to the editing type to which the second image editing operation belongs, thereby further improving the image editing efficiency.
  • the second storage unit 512 is configured to convert the target image into an image to be uploaded matching the target storage format according to the storage operation when the storage operation is received, and store the image to be uploaded to a local hard disk.
  • the third detection unit 513 is configured to detect whether an upload operation is received.
  • the uploading unit 514 is configured to upload the image to be uploaded to the webpage when the upload operation is received.
  • each image editing operation when implementing the atomic service orchestration device based on the microservice architecture described in FIG. 7, each image editing operation only needs to operate on the dom element in the image without clearing the original image and then re-editing . It can reduce the memory occupancy rate in the process of image editing, solve the problem of stagnation, and thereby improve the efficiency of image editing and improve the user experience; in addition, it can also decide to rearrange or reorganize the dom element by judging the type of editing to which the image editing operation belongs. Is to redraw to improve the efficiency of image editing.
  • This application also provides an electronic device, which includes:
  • a memory which stores computer readable instructions.
  • the computer readable instructions are executed by the processor, an image processing method as described above is implemented.
  • the electronic device may be the image processing apparatus 100 shown in FIG. 1.
  • the present application further provides a computer-readable storage medium on which a computer program is stored.
  • a computer program is stored on a computer-readable storage medium.
  • an image processing method as described above is implemented.

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Processing Or Creating Images (AREA)

Abstract

一种图像处理方法及装置、存储介质以及电子设备，该方法包括：从网页中提取待处理原始图像；检测是否接收到针对待处理原始图像的第一图像编辑操作；若接收到第一图像编辑操作，根据第一图像编辑操作对待处理原始图像中的dom元素进行编辑，获得第一图像；检测是否接收到针对第一图像的第二图像编辑操作；若接收到第二图像编辑操作，根据第二图像编辑操作对第一图像中的dom元素进行编辑，获得第二图像；当接收到图像生成操作时，调用Canvas将第二图像生成与预设待输出格式匹配的目标图像。图像编辑操作均在dom元素上实现，只需在生成目标图像时调用Canvas，通过传输协议进行协议封装，能够解决卡顿问题，提高图片编辑效率。

Description

一种图像处理方法及装置、存储介质、电子设备
本申请要求于2019年01月03日提交中国专利局、申请号为201910003254.1、申请名称为“一种图像处理方法及装置、存储介质、电子设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及图像处理技术领域，特别涉及一种图像处理方法及装置、存储介质以及电子设备。
背景技术
超文本标记语言5(Hyper Text Markup Language 5，HTML5)的<canvas>元素用于在浏览器的网页上实时生成图像，<canvas>标签只是图形容器，必须使用脚本(通常是JavaScript)来绘制图形。在Canvas(画布)上面绘制的图形是不可以缩放的，因此，每当Canvas的高度或宽度被重设时，画布内容就会被清空。
通常情况下，当开发人员需要对网页中的图像进行编辑时，会使用Canvas来完成该编辑工作。但是，使用Canvas编辑图像会存在以下问题：每次重设Canvas的高度或宽度时，都需要把画布清空，再对图像进行编辑。这样会导致内存占用率过大进而导致卡顿，以及编辑效率低的问题。
发明内容
为了解决相关技术中利用Canvas重新编辑图像时会存在内存占用率大而造成的卡顿问题，本申请提供了一种图像处理方法及装置、存储介质、电子设备。
本申请实施例第一方面公开了一种图像处理方法，所述方法包括：
从网页中提取待处理原始图像；
检测是否接收到针对所述待处理原始图像的第一图像编辑操作；
若接收到所述第一图像编辑操作，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行编辑，获得第一图像；
检测是否接收到针对所述第一图像的第二图像编辑操作；
若接收到所述第二图像编辑操作，根据所述第二图像编辑操作对所述第一图像中的dom元素进行编辑，获得第二图像；
当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像。
本申请实施例第二方面公开了一种图像处理装置，所述装置包括：
提取单元，用于从网页中提取待处理原始图像；
第一检测单元，用于检测是否接收到针对所述待处理原始图像的第一图像编辑操作；
编辑单元，用于当接收到所述第一图像编辑操作时，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行编辑，获得第一图像；
所述第一检测单元，还用于检测是否接收到针对所述第一图像的第二图像编辑操作；
所述编辑单元，还用于当接收到所述第二图像编辑操作时，根据所述第二图像编辑操作对所述第一图像中的dom元素进行编辑，获得第二图像；
生成单元，用于当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像。
本申请实施例第三方面公开了一种电子设备，所述电子设备包括：
处理器；
存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现本申请实施例第一方面公开的一种图像处理方法。
本申请实施例第四方面公开了一种计算机可读存储介质，其存储计算机程序，所述计算机程序使得计算机执行本申请实施例第一方面公开的一种图像处理方法。可选的，该计算机可读存储介质可以为计算机非易失性可读存储介质。
本申请的实施例提供的技术方案使得在进行图像编辑时，每一次编辑操作，只需对图像中的dom元素进行操作，而无需清空原有图像，再重新编辑。能够减小图片编辑过程中的内存占用率，解决卡顿问题，进而提高图片编辑效率，提升用户体验。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并于说明书一起用于解释本申请的原理。
图1是本申请实施例公开的一种图像处理装置的结构示意图；
图2是本申请实施例公开的一种图像处理方法的流程图；
图3是本申请实施例公开的另一种图像处理方法的流程图；
图4是本申请实施例公开的又一种图像处理方法的流程图；
图5是本申请实施例公开的一种图像处理装置的结构示意图；
图6是本申请实施例公开的另一种图像处理装置的结构示意图；
图7是本申请实施例公开的又一种图像处理装置的结构示意图。
具体实施方式
这里将详细地对示例性实施例执行说明，其示例表示在附图中。
实施例一
本申请的实施环境可以是电子设备，例如智能手机、平板电脑、台式电脑。电子设备所提取的待处理原始图像可以是：从互联网网页下载的图像或者视频图像等。
图1是本申请实施例公开的一种图像处理装置的结构示意图。图像处理装置100可以是上述电子设备。如图1所示，图像处理装置100可以包括以下一个或多个组件：处理组件102，存储器104，电源组件106，多媒体组件108，音频组件110，传感器组件114以及通信组件116。
处理组件102通常控制图像处理装置100的整体操作，诸如与显示，电话呼叫，数据通信，相机操作以及记录操作相关联的操作等。处理组件102可以包括一个或多个处理器118来执行指令，以完成下述的方法的全部或部分步骤。此外，处理组件102可以包括一 个或多个模块，用于便于处理组件102和其他组件之间的交互。例如，处理组件102可以包括多媒体模块，用于以方便多媒体组件108和处理组件102之间的交互。
存储器104被配置为存储各种类型的数据以支持在图像处理装置100的操作。这些数据的示例包括用于在图像处理装置100上操作的任何应用程序或方法的指令。存储器104可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read Only Memory，简称EPROM)，可编程只读存储器(Programmable Red-Only Memory，简称PROM)，只读存储器(Read-Only Memory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。存储器104中还存储有一个或多个模块，用于该一个或多个模块被配置成由该一个或多个处理器118执行，以完成如下所示方法中的全部或者部分步骤。
电源组件106为图像处理装置100的各种组件提供电力。电源组件106可以包括电源管理系统，一个或多个电源，及其他与为图像处理装置100生成、管理和分配电力相关联的组件。
多媒体组件108包括在图像处理装置100和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(Liquid Crystal Display，简称LCD)和触摸面板。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。屏幕还可以包括有机电致发光显示器(Organic Light Emitting Display，简称OLED)。
音频组件110被配置为输出和/或输入音频信号。例如，音频组件110包括一个麦克风(Microphone，简称MIC)，当图像处理装置100处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器104或经由通信组件116发送。在一些实施例中，音频组件110还包括一个扬声器，用于输出音频信号。
传感器组件114包括一个或多个传感器，用于为图像处理装置100提供各个方面的状态评估。例如，传感器组件114可以检测到图像处理装置100的打开/关闭状态，组件的相对定位，传感器组件114还可以检测图像处理装置100或图像处理装置100一个组件的位置改变以及图像处理装置100的温度变化。在一些实施例中，该传感器组件114还可以包括磁传感器，压力传感器或温度传感器。
通信组件116被配置为便于图像处理装置100和其他设备之间有线或无线方式的通信。图像处理装置100可以接入基于通信标准的无线网络，如WiFi(Wireless-Fidelity，无线保真)。在本申请实施例中，通信组件116经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在本申请实施例中，通信组件116还包括近场通信(Near Field Communication，简称NFC)模块，用于以促进短程通信。例如，在NFC模块可基于射频识别(Radio Frequency Identification，简称RFID)技术，红外数据协会(Infrared Data Association，简称IrDA)技术，超宽带(Ultra Wideband，简称UWB)技术，蓝牙技术和 其他技术来实现。
在示例性实施例中，图像处理装置100可以被一个或多个应用专用集成电路(Application Specific Integrated Circuit，简称ASIC)、数字信号处理器、数字信号处理设备、可编程逻辑器件、现场可编程门阵列、控制器、微控制器、微处理器或其他电子元件实现，用于执行下述方法。
实施例二
请参阅图2，图2是本申请实施例公开的一种图像处理方法的流程示意图。如图2所示该图像处理方法可以包括以下步骤：
201、从网页中提取待处理原始图像。
本申请实施例中，当开发人员需要对浏览器的网页上所存在的图像进行编辑时，就需要先加载网页中相关的图像。从网页中提取的待处理原始图像可以是静态图片，可以是动态图片中的某一帧图像，也可以是视频文件中的某一帧图像。此外，网页中的图像可以是多种格式的图片，如BMP位图图片、JPEG图片、GIF图片、PNG图片和PSD图像文档等。从网页中提取的待处理原始图像的格式可以是以上任意一种。本申请实施例不作限定。
202、检测是否接收到针对待处理原始图像的第一图像编辑操作。
本申请实施例中，第一图像编辑操作的编辑类型包括第一类编辑或第二类编辑，其中，第一类编辑至少包括形状编辑，第二类编辑至少包括颜色编辑。
作为一种可选的实施方式，在步骤202之前，还可以执行以下步骤：
在预设时长内检测是否接收到用于定义待处理原始图像中的dom元素的第一定义操作；若在预设时长内接收到第一定义操作，根据该第一定义操作获取待处理原始图像中的dom元素；若在预设时长内未接收到第一定义操作，则识别待处理原始图像中的图形，将待处理原始图像中的图形所占的区域作为待处理原始图像中的dom元素。可见，实施本实施方式，可以根据实际情况获取原始图像中的dom元素。
203、若接收到第一图像编辑操作，根据第一图像编辑操作对待处理原始图像中的dom元素进行编辑，获得第一图像。
本申请实施例中，dom元素是由用户定义的图像中的可编辑区域，用户可以通过对dom元素进行编辑实现对图像的编辑。
可以理解，上述待处理原始图像中的dom元素为待处理原始图像的可编辑区域。
作为一种可选的实施方式，步骤203可以包括：
若接收到第一图像编辑操作，判断第一图像编辑操作所属的编辑类型；当第一图像编辑操作属于第一类编辑时，根据第一图像编辑操作对待处理原始图像中的dom元素进行重排，获得第一图像；当第一图像编辑操作属于第二类编辑时，根据第一图像编辑操作对待处理原始图像中的dom元素进行重绘，获得第一图像。
进一步，可选的，由于第一类编辑至少包括形状编辑，影响了dom元素的几何属性，上述当第一图像编辑操作属于第一类编辑时，根据第一图像编辑操作对待处理原始图像中的dom元素进行重排，获得第一图像，包括：
当第一图像编辑操作属于第一类编辑时，根据第一图像编辑操作,重新计算待处理原始图像中的dom元素的几何属性并进行重排，获得第一图像。
可见，实施上述可选的实施方式，能够通过根据第一图像编辑操作所属的编辑类型对图像进行编辑，进而提高图像编辑效率。
本申请实施例中，当dom元素的变化影响了dom元素的几何属性时，需要重新计算dom元素的几何属性，并且图像中其他元素的几何属性可能会受到影响，在这样的情况下，会发生重新构造渲染树的操作，上述过程称为重排。
本申请实施例中，当待处理原始图像中的dom元素变化仅影响到背景颜色等非几何属性，那么该过程称为重绘。重排必定会引发重绘，但是重绘不一定会引发重排。
204、检测是否接收到针对第一图像的第二图像编辑操作。
本申请实施例中，第二图像编辑操作的编辑类型包括第一类编辑或第二类编辑，其中，第一类编辑至少包括形状编辑，第二类编辑至少包括颜色编辑。
作为一种可选的实施方式，步骤204之前，还可以执行以下步骤：
在预设时长内检测是否接收到用于定义第一图像中的dom元素的第二定义操作；若在预设时长内接收到第二定义操作，根据第二定义操作获取第一图像中的dom元素；若在预设时长内未接收到第二定义操作，则识别第一图像中的图形，将第一图像中的图形所占的区域作为第一图像中的dom元素。可见，实施本实施方式，能够获取第一图像中的dom元素。可见，实施本实施方式，可以根据实际情况获取第一图像中的dom元素。
205、若接收到第二图像编辑操作，根据第二图像编辑操作对第一图像中的dom元素进行编辑，获得第二图像。
可以理解，上述第一图像中的dom元素为第一图像中的可编辑区域。
作为一种可选的实施方式，步骤205可以包括：
若接收到第二图像编辑操作，判断第二图像编辑操作所属的编辑类型；当第二图像编辑操作属于第一类编辑时，根据第二图像编辑操作对第一图像中的dom元素进行重排，获得第二图像；当第二图像编辑操作属于第二类编辑时，根据第二图像编辑操作对第一图像中的dom元素进行重绘，获得第二图像。
进一步的，可选的，由于第一类编辑至少包括形状编辑，影响了dom元素的几何属性，上述当第二图像编辑操作属于第一类编辑时，根据第二图像编辑操作对第一图像中的dom元素进行重排，获得第二图像，包括：
当第二图像编辑操作属于第一类编辑时，根据第二图像编辑操作,重新计算第一图像中的dom元素的几何属性并进行重排，获得第二图像。可见，实施上述可选的实施方式，能够通过根据第二图像编辑操作所属的编辑类型对图像进行编辑，进而提高图像编辑效率。可见，实施本实施方式，能够通过判断第二图像编辑操作所属的编辑类型，决定对第一图像中的dom元素进行重排或是重绘，以提高图像编辑效率
本申请实施例中，当第一图像中的dom元素变化仅影响到背景颜色等非几何属性，那么该过程称为重绘。重排必定会引发重绘，但是重绘不一定会引发重排。
206、当接收到图像生成操作时，调用Canvas将第二图像生成与预设待输出格式匹配的目标图像。
本申请实施例中，预设待输出格式至少包括base64格式。
作为一种可选的实施方式，上述当接收到图像生成操作时，调用Canvas将第二图像生 成与预设待输出格式匹配的目标图像的方式具体为：
通过插件htmltocanvas调用Canvas，根据插件htmltocanvas的开发平台(openapi)将第二图像生成与预设待输出格式匹配的目标图像；其中openapi是把一个软件组件或是一个web服务封装成一系列计算机易识别的数据接口开放出去，以供第三方开发者使用的应用编程接口(Application Programming Interface，API)。实施该可选的实施方式，降低了对Canvas这一技能的要求，适用人群更广。
作为一种可选的实施方式，执行步骤203之后，检测是否接收到将第一图像编辑操作存储为历史操作的存储指令，该存储指令至少包括对第一存储操作的命名；当接收到上述存储指令时，将命名后的第一存储操作保存至历史操作列表；执行步骤205之后，检测是否接收到将第二图像编辑操作存储为历史操作的存储指令，该存储指令至少包括对第二存储操作的命名；当接收到上述存储指令时，将命名后的第二存储操作保存至历史操作列表。可见，实施本实施方式，当需要对视频文件中存在相同图形元素的图像进行相同的编辑操作时，可以调用历史操作列表中存储的历史操作，进而提高编辑效率。
可见，实施图2所描述的方法，在进行图像编辑时，每一次编辑操作，只需对图像中的dom元素进行操作，而无需清空原有图像，再重新编辑。能够减小图片编辑过程中的内存占用率，解决卡顿问题，进而提高图片编辑效率，提升用户体验。
实施例三
请参阅图3，图3是本申请实施例公开的另一种图像处理方法的流程示意图。如图3所示，该图像处理方法可以包括以下步骤：
301、从网页中提取待处理原始图像。
302、检测是否接收到针对待处理原始图像的第一图像编辑操作。
303、若接收到第一图像编辑操作，根据第一图像编辑操作对待处理原始图像中的dom元素进行编辑，获得第一图像。
304、检测是否接收到针对第一图像的第二图像编辑操作。
305、若接收到第二图像编辑操作，根据第二图像编辑操作对第一图像中的dom元素进行编辑，获得第二图像。
306、检测是否接收到针对第二图像的第三图像编辑操作。
307、若接收到第三图像编辑操作，根据第三图像编辑操作对第二图像中的dom元素进行编辑，获得第三图像。
作为一种可选的实施方式，在步骤307之后，以及接收到图像编生成操作之前，还可以执行N次以下步骤，其中N为自然数：
检测是否接收到图像编辑操作；
在接收到图像编辑操作时，根据图像编辑操作对前一图像中的dom元素进行编辑，获得第N图像。可见，实施该实施方式，在每一次图像编辑操作中，只需对前一图像中的dom元素进行编辑，而无需清空画布，解决了卡顿问题，同时提高了图像编辑效率。
作为一种可选的实施方式，执行步骤307之后，检测是否接收到将第三图像编辑操作存储为历史操作的存储指令，该存储指令至少包括对第三存储操作的命名；当接收到上述存储指令时，将命名后的第三存储操作保存至历史操作列表。可见，实施本实施方式，当 需要对视频文件中存在相同图形元素的图像进行相同的编辑操作时，可以调用历史操作列表中存储的历史操作，进而提高编辑效率。
308、当接收到图像生成操作时，调用Canvas将第三图像生成与预设待输出格式匹配的目标图像。
作为一种可选的实施方式，上述当接收到图像生成操作时，调用Canvas将第三图像生成与预设待输出格式匹配的目标图像的方式具体为：
通过插件htmltocanvas调用Canvas，根据插件htmltocanvas的开发平台(openapi)将第三图像生成与预设待输出格式匹配的目标图像；其中openapi是把一个软件组件或是一个web服务封装成一系列计算机易识别的数据接口开放出去，以供第三方开发者使用的应用编程接口(Application Programming Interface，API)。实施该可选的实施方式，降低了对Canvas这一技能的要求，适用人群更广。
作为一种可选的实施方式，在生成与预设待输出格式匹配的目标图像之后还可以包括以下步骤：
判断上述待处理原始图像是否属于网页的视频文件中的某一帧图像；若上述待处理原始图像属于视频文件中的某一帧图像，当接收到视频文件更新操作时，将视频文件中的待处理原始图像更新为目标图像，获得更新后的视频文件；输出更新后的视频文件，并检测是否接收到视频文件存储操作；若接收到视频文件存储操作，则存储更新后的视频文件；若未接收到视频文件存储操作，则将更新后的视频文件的当前状态设置为编辑未完成状态。可见，实施本实施方式，能够对视频文件中的一帧图像或多帧图像进行编辑，获得更改后的视频文件，提高了开发人员对视频文件的编辑效率。
可见，实施图3所描述的方法，在进行图像编辑时，每一次编辑操作，只需对图像中的dom元素进行操作，而无需清空原有图像，再重新编辑。能够减小图片编辑过程中的内存占用率，解决卡顿问题，进而提高图片编辑效率，提升用户体验；此外，还能够对视频文件中的一帧图像或多帧图像进行编辑，获得更改后的视频文件，提高了开发人员对视频文件的编辑效率。
实施例四
请参阅图4，图4是本申请实施例公开的又一种图像处理方法的流程示意图。除图2所示步骤外，在步骤206之后，此实施例中图像处理方法还包括以下步骤。
401、当接收到存储操作时，根据存储操作将目标图像转换为与目标存储格式匹配的待上传图像，并将待上传图像存储至本地硬盘。
本申请实施例中，目标存储格式可以是BMP格式、JPEG格式、GIF格式、PNG格式或PSD格式，本申请实施例不作限定
402、检测是否接收到上传操作。
403、若接收到上传操作，将待上传图像上传至网页。
可见，实施图4所描述的方法，在进行图像编辑时，每一次编辑操作，只需对图像中的dom元素进行操作，而无需清空原有图像，再重新编辑。能够减小图片编辑过程中的内存占用率，解决卡顿问题，进而提高图片编辑效率，提升用户体验；此外，还能够将待上传图像上传至网页，从而替换网页中原有图像。
实施例五
请参阅图5，图5是本申请实施例公开的一种图像处理装置的结构示意图。如图5所示，该图像处理装置可以包括：提取单元501、第一检测单元502、编辑单元503以及生成单元504，其中，
提取单元501，用于从网页中提取待处理原始图像。
第一检测单元502，用于检测是否接收到针对待处理原始图像的第一图像编辑操作。
编辑单元503，用于当接收到第一图像编辑操作时，根据第一图像编辑操作对待处理原始图像中的dom元素进行编辑，获得第一图像。
第一检测单元502，还用于检测是否接收到针对第一图像的第二图像编辑操作。
编辑单元503，还用于当接收到第二图像编辑操作时，根据第二图像编辑操作对第一图像中的dom元素进行编辑，获得第二图像。
生成单元504，用于当接收到图像生成操作时，调用Canvas将第二图像生成与预设待输出格式匹配的目标图像。
作为一种可选的实施方式，生成单元504，用于当接收到图像生成操作时，调用Canvas将第二图像生成与预设待输出格式匹配的目标图像的方式具体为：
通过插件htmltocanvas调用Canvas，根据插件htmltocanvas的开发平台(openapi)将第二图像生成与预设待输出格式匹配的目标图像；其中openapi是把一个软件组件或是一个web服务封装成一系列计算机易识别的数据接口开放出去，以供第三方开发者使用的应用编程接口(Application Programming Interface，API)。
可见，实施该可选的实施方式，降低了对Canvas这一技能的要求，适用人群更广。
可见，实施图5所描述的图像处理装置，在进行图像编辑时，每一次编辑操作，只需对图像中的dom元素进行操作，而无需清空原有图像，再重新编辑。能够减小图片编辑过程中的内存占用率，解决卡顿问题，进而提高图片编辑效率，提升用户体验。
实施例六
请参阅图6，图6是本申请实施例公开的另一种图像处理装置的结构示意图。图6所示的图像处理装置是由图5所示的图像处理装置进行优化得到的。与图5所示的图像处理装置相比较，图6所示的图像处理装置还可以包括：判断单元505、更新单元506、输出单元507、第一存储单元508以及设置单元509，其中，
第一检测单元502，还用于检测是否接收到针对第二图像的第三图像编辑操作。
编辑单元503，还用于当接收到第三图像编辑操作时，根据第三图像编辑操作对第二图像中的dom元素进行编辑，获得第三图像。
作为一种可选的实施方式，编辑单元503，用于接收到图像编生成操作之前，还可以执行N次以下步骤，其中N为自然数：
检测是否接收到图像编辑操作；
在接收到图像编辑操作时，根据图像编辑操作对前一图像中的dom元素进行编辑，获得第N图像。
可见，实施该实施方式，在每一次图像编辑操作中，只需对前一图像中的dom元素进行编辑，而无需清空画布，解决了卡顿问题，同时提高了图像编辑效率。
生成单元504，用于当接收到图像生成操作时，调用Canvas将第二图像生成与预设待输出格式匹配的目标图像的方式具体为：
当接收到图像生成操作时，调用Canvas将第三图像生成与预设待输出格式匹配的目标图像。
作为一种可选的实施方式，生成单元504，用于当接收到图像生成操作时，调用Canvas将第三图像生成与预设待输出格式匹配的目标图像的方式具体为：
通过插件htmltocanvas调用Canvas，根据插件htmltocanvas的开发平台(openapi)将第三图像生成与预设待输出格式匹配的目标图像；其中openapi是把一个软件组件或是一个web服务封装成一系列计算机易识别的数据接口开放出去，以供第三方开发者使用的应用编程接口(Application Programming Interface，API)。
可见，实施该可选的实施方式，降低了对Canvas这一技能的要求，适用人群更广。
判断单元505，用于判断上述待处理原始图像是否属于网页的视频文件中的某一帧图像。
更新单元506，用于当上述待处理原始图像属于视频文件中的某一帧图像，且接收到视频文件更新操作时，将视频文件中的待处理原始图像更新为目标图像，获得更新后的视频文件。
输出单元507，用于输出更新后的视频文件，并检测是否接收到视频文件存储操作。
第一存储单元508，用于当接收到视频文件存储操作时，存储更新后的视频文件。
设置单元509，用于当未接收到视频文件存储操作时，将更新后的视频文件的当前状态设置为编辑未完成状态。
作为一种可选的实施方式，编辑单元503，还用于当接收到第一图像编辑操作时，根据第一图像编辑操作对待处理原始图像中的dom元素进行编辑，获得第一图像之后，检测是否接收到将第一图像编辑操作存储为历史操作的存储指令，该存储指令至少包括对第一存储操作的命名；当接收到上述存储指令时，将命名后的第一存储操作保存至历史操作列表；
编辑单元503，还用于当接收到第二图像编辑操作时，根据第二图像编辑操作对第一图像中的dom元素进行编辑，获得第二图像之后，检测是否接收到将第二图像编辑操作存储为历史操作的存储指令，该存储指令至少包括对第二存储操作的命名；当接收到上述存储指令时，将命名后的第二存储操作保存至历史操作列表；
编辑单元503，还用于当接收到第二图像编辑操作时，根据第二图像编辑操作对第一图像中的dom元素进行编辑，获得第二图像之后，检测是否接收到将第三图像编辑操作存储为历史操作的存储指令，该存储指令至少包括对第三存储操作的命名；当接收到上述存储指令时，将命名后的第三存储操作保存至历史操作列表。
可见，实施本实施方式，当需要对视频文件中存在相同图形元素的图像进行相同的编辑操作时，可以调用历史操作列表中存储的历史操作，进而提高编辑效率。
可见，实施图6所描述的图像处理装置，在进行图像编辑时，每一次编辑操作，只需对图像中的dom元素进行操作，而无需清空原有图像，再重新编辑。能够减小图片编辑过程中的内存占用率，解决卡顿问题，进而提高图片编辑效率，提升用户体验；此外，还能 够对视频文件中的一帧图像或多帧图像进行编辑，获得更改后的视频文件，提高了开发人员对视频文件的编辑效率
实施例七
请参阅图7，图7是本申请实施例公开的又一种图像处理装置的结构示意图。图7所示的图像处理装置是由图6所示的图像处理装置进行优化得到的。与图6所示的图像处理装置相比较，图7所示的图像处理装置还可以包括：第二检测单元510、获取单元511、第二存储单元512、第三检测单元513以及上传单元514，其中，
第二检测单元510，用于在预设时长内检测是否接收到用于定义待处理原始图像中可编辑区域的第一定义操作。
获取单元511，用于当在预设时长内接收到第一定义操作时，根据该第一定义操作获取待处理原始图像中的dom元素，待处理原始图像中的dom元素对应待处理原始图像中可编辑区域。
获取单元511，还用于当在预设时长内未接收到第一定义操作时，识别待处理原始图像中的图形，将待处理原始图像中的图形所占的区域作为待处理原始图像中可编辑区域，获取待处理原始图像中的dom元素，待处理原始图像中的dom元素对应待处理原始图像中可编辑区域。
编辑单元503，用于当接收到所述第一图像编辑操作时，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行编辑，获得第一图像的方式具体为：
当接收到第一图像编辑操作时，判断第一图像编辑操作所属的编辑类型；当第一图像编辑操作属于第一类编辑时，根据第一图像编辑操作对待处理原始图像中的dom元素进行重排，获得第一图像；当第一图像编辑操作属于第二类编辑时，根据第一图像编辑操作对待处理原始图像中的dom元素进行重绘，获得第一图像。
作为一种可选的实施方式，由于第一类编辑至少包括形状编辑，影响了dom元素的几何属性，上述编辑单元503用于当第一图像编辑操作属于第一类编辑时，根据第一图像编辑操作对待处理原始图像中的dom元素进行重排，获得第一图像的方式具体为：
当第一图像编辑操作属于第一类编辑时，根据第一图像编辑操作,重新计算待处理原始图像中的dom元素的几何属性并进行重排，获得第一图像。
可见，实施上述可选的实施方式，能够通过根据第一图像编辑操作所属的编辑类型对图像进行编辑，进而提高图像编辑效率。
第二检测单元510，还用于在预设时长内检测是否接收到用于定义第一图像中可编辑区域的第二定义操作。
获取单元511，还用于当在预设时长内接收到第二定义操作时，根据该第二定义操作获取第一图像中的dom元素，第一图像中的dom元素对应第一图像中可编辑区域。
获取单元511，还用于当在预设时长内未接收到第二定义操作时，识别待处理原始图像中的图形，将待处理原始图像中的图形所占的区域作为待处理原始图像中可编辑区域，获取第一图像中的dom元素，第一图像中的dom元素对应第一图像中可编辑区域。
编辑单元503，用于当接收到第二图像编辑操作时，根据第二图像编辑操作对第一图像中的dom元素进行编辑，获得第二图像的方式具体为：
当接收到第二图像编辑操作时，判断第二图像编辑操作所属的编辑类型；当第二图像编辑操作属于第一类编辑时，根据第二图像编辑操作对第一图像中的dom元素进行重排，获得第二图像；当第二图像编辑操作属于第二类编辑时，根据第二图像编辑操作对第一图像中的dom元素进行重绘，获得第二图像。
作为一种可选的实施方式，由于第一类编辑至少包括形状编辑，影响了dom元素的几何属性，上述编辑单元503，用于当第二图像编辑操作属于第一类编辑时，根据第二图像编辑操作对第一图像中的dom元素进行重排，获得第二图像的方式具体为：
当第二图像编辑操作属于第一类编辑时，根据第二图像编辑操作,重新计算第一图像中的dom元素的几何属性并进行重排，获得第二图像。
可见，实施上述可选的实施方式，能够通过根据第二图像编辑操作所属的编辑类型对图像进行编辑，进而提高图像编辑效率。
第二存储单元512，用于当接收到存储操作时，根据存储操作将目标图像转换为与目标存储格式匹配的待上传图像，并将待上传图像存储至本地硬盘。
第三检测单元513，用于检测是否接收到上传操作。
上传单元514，用于当接收到上传操作时，将待上传图像上传至网页。
可见，实施图7所描述的基于微服务架构的原子服务编排装置，在进行图像编辑时，每一次编辑操作，只需对图像中的dom元素进行操作，而无需清空原有图像，再重新编辑。能够减小图片编辑过程中的内存占用率，解决卡顿问题，进而提高图片编辑效率，提升用户体验；此外，还能够能够通过判断图像编辑操作所属的编辑类型，决定对dom元素进行重排或是重绘，以提高图像编辑效率。
本申请还提供一种电子设备，该电子设备包括：
处理器；
存储器，该存储器上存储有计算机可读指令，该计算机可读指令被处理器执行时，实现如前所示的一种图像处理方法。
该电子设备可以是图1所示图像处理装置100。
在一示例性实施例中，本申请还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现如前所示的一种图像处理方法。
应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (20)

  1. 一种图像处理方法，其特征在于，包括：
    从网页中提取待处理原始图像；
    检测是否接收到针对所述待处理原始图像的第一图像编辑操作；
    若接收到所述第一图像编辑操作，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行编辑，获得第一图像；
    检测是否接收到针对所述第一图像的第二图像编辑操作；
    若接收到所述第二图像编辑操作，根据所述第二图像编辑操作对所述第一图像中的dom元素进行编辑，获得第二图像；
    当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像。
  2. 根据权利要求1所述的图像处理方法，其特征在于，所述当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像之前，所述方法还包括：
    检测是否接收到针对所述第二图像的第三图像编辑操作；
    若接收到所述第三图像编辑操作，根据所述第三图像编辑操作对所述第二图像中的dom元素进行编辑，获得第三图像；
    所述当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像，包括：
    当接收到图像生成操作时，调用Canvas将所述第三图像生成与预设待输出格式匹配的目标图像。
  3. 根据权利要求1所述的图像处理方法，其特征在于，所述当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像之后，所述方法还包括：
    当接收到存储操作时，根据所述存储操作将所述目标图像转换为与目标存储格式匹配的待上传图像，并将所述待上传图像存储至本地硬盘；
    检测是否接收到上传操作；
    若接收到所述上传操作，将所述待上传图像上传至所述网页。
  4. 根据权利要求1至3任一项所述的图像处理方法，其特征在于，所述检测是否接收到针对所述待处理原始图像的第一图像编辑操作之前，所述方法还包括：
    在预设时长内检测是否接收到用于定义所述待处理原始图像中的dom元素的第一定义操作；
    若在所述预设时长内接收到所述第一定义操作，根据所述第一定义操作获取所述待处理原始图像中的dom元素；
    若在所述预设时长内未接收到所述第一定义操作，则识别所述待处理原始图像中的图形，将所述待处理原始图像中的图形所占的区域作为所述待处理原始图像中的dom元素；
    所述检测是否接收到针对所述第一图像的第二图像编辑操作之前，所述方法还包括：
    在所述预设时长内检测是否接收到用于定义所述第一图像中的dom元素的第二定义操作；
    若在所述预设时长内接收到所述第二定义操作，根据所述第二定义操作获取所述第一 图像中的dom元素；
    若在所述预设时长内未接收到所述第二定义操作，则识别所述第一图像中的图形，将所述第一图像中的图形所占的区域作为所述第一图像中的dom元素。
  5. 根据权利要求1至3任一项所述的图像处理方法，其特征在于，所述第一图像编辑操作的编辑类型包括第一类编辑或第二类编辑，所述第二图像编辑操作的编辑类型包括所述第一类编辑或所述第二类编辑，其中，所述第一类编辑至少包括形状编辑，所述第二类编辑至少包括颜色编辑；
    所述若接收到所述第一图像编辑操作，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行编辑，获得第一图像，包括：
    若接收到所述第一图像编辑操作，判断所述第一图像编辑操作所属的编辑类型；
    当所述第一图像编辑操作属于所述第一类编辑时，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行重排，获得所述第一图像；
    当所述第一图像编辑操作属于所述第二类编辑时，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行重绘，获得所述第一图像；
    所述若接收到所述第二图像编辑操作，根据所述第二图像编辑操作对所述第一图像中的dom元素进行编辑，获得第二图像，包括：
    若接收到若接收到所述第二图像编辑操作，判断所述第二图像编辑操作所属的编辑类型；
    当所述第二图像编辑操作属于所述第一类编辑时，根据所述第二图像编辑操作对所述第一图像中的dom元素进行重排，获得所述第二图像；
    当所述第二图像编辑操作属于所述第二类编辑时，根据所述第二图像编辑操作对所述第一图像中的dom元素进行重绘，获得所述第二图像。
  6. 根据权利要求1所述的图像处理方法，其特征在于，所述当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设输出格式匹配的目标图像之后，所述方法还包括：
    判断所述待处理原始图像是否属于所述网页的视频文件中的某一帧图像；
    若所述待处理原始图像属于所述视频文件中的某一帧图像，当接收到视频文件更新操作时，将所述视频文件中的所述待处理原始图像更新为所述目标图像，获得更新后的视频文件。
  7. 根据权利要求6所述的图像处理方法，其特征在于，所述获得更新后的视频文件之后，所述方法还包括：
    输出所述更新后的视频文件，并检测是否接收到视频文件存储操作；
    若接收到所述视频文件存储操作，则存储所述更新后的视频文件；
    若未接收到所述视频文件存储操作，则将所述更新后的视频文件的当前状态设置为编辑未完成状态。
  8. 一种图像处理装置，其特征在于，包括：
    提取单元，用于从网页中提取待处理原始图像；
    第一检测单元，用于检测是否接收到针对所述待处理原始图像的第一图像编辑操作；
    编辑单元，用于当接收到所述第一图像编辑操作时，根据所述第一图像编辑操作对所 述待处理原始图像中的dom元素进行编辑，获得第一图像；
    所述第一检测单元，还用于检测是否接收到针对所述第一图像的第二图像编辑操作；
    所述编辑单元，还用于当接收到所述第二图像编辑操作时，根据所述第二图像编辑操作对所述第一图像中的dom元素进行编辑，获得第二图像；
    生成单元，用于当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像。
  9. 根据权利要求8所述的图像处理装置，其特征在于，
    所述第一检测单元，还用于检测是否接收到针对所述第二图像的第三图像编辑操作；
    所述编辑单元，还用于当接收到所述第三图像编辑操作时，根据所述第三图像编辑操作对所述第二图像中的dom元素进行编辑，获得第三图像；
    所述生成单元，用于当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像的方式具体为：
    当接收到图像生成操作时，调用Canvas将所述第三图像生成与预设待输出格式匹配的目标图像。
  10. 根据权利要求8所述的图像处理装置，其特征在于，所述装置还包括：
    第二存储单元，用于当接收到存储操作时，根据所述存储操作将所述目标图像转换为与目标存储格式匹配的待上传图像，并将所述待上传图像存储至本地硬盘；
    第三检测单元，用于检测是否接收到上传操作；
    上传单元，用于当接收到所述上传操作时，将所述待上传图像上传至所述网页。
  11. 根据权利要求8至10任一项所述的图像处理装置，其特征在于，所述装置还包括：
    第二检测单元，用于在预设时长内检测是否接收到用于定义所述待处理原始图像中的dom元素的第一定义操作；
    获取单元，用于当在所述预设时长内接收到所述第一定义操作时，根据所述第一定义操作获取所述待处理原始图像中的dom元素；
    所述获取单元，还用于当在所述预设时长内未接收到所述第一定义操作时，识别所述待处理原始图像中的图形，将所述待处理原始图像中的图形所占的区域作为所述待处理原始图像中的dom元素；
    所述第二检测单元，还用于在所述预设时长内检测是否接收到用于定义所述第一图像中的dom元素的第二定义操作；
    所述获取单元，还用于当在所述预设时长内接收到所述第二定义操作时，根据所述第二定义操作获取所述第一图像中的dom元素；
    所述获取单元，还用于当在所述预设时长内未接收到所述第二定义操作时，识别所述第一图像中的图形，将所述第一图像中的图形所占的区域作为所述第一图像中的dom元素。
  12. 根据权利要求8至10任一项所述的图像处理装置，其特征在于，所述第一图像编辑操作的编辑类型包括第一类编辑或第二类编辑，所述第二图像编辑操作的编辑类型包括所述第一类编辑或所述第二类编辑，其中，所述第一类编辑至少包括形状编辑，所述第二类编辑至少包括颜色编辑；
    所述编辑单元，用于当接收到所述第一图像编辑操作，根据所述第一图像编辑操作对 所述待处理原始图像中的dom元素进行编辑，获得第一图像的方式具体为：
    若接收到所述第一图像编辑操作，判断所述第一图像编辑操作所属的编辑类型；
    当所述第一图像编辑操作属于所述第一类编辑时，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行重排，获得所述第一图像；
    当所述第一图像编辑操作属于所述第二类编辑时，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行重绘，获得所述第一图像；
    所述编辑单元，用于当接收到所述第二图像编辑操作，根据所述第二图像编辑操作对所述第一图像中的dom元素进行编辑，获得第二图像的方式具体为：
    若接收到若接收到所述第二图像编辑操作，判断所述第二图像编辑操作所属的编辑类型；
    当所述第二图像编辑操作属于所述第一类编辑时，根据所述第二图像编辑操作对所述第一图像中的dom元素进行重排，获得所述第二图像；
    当所述第二图像编辑操作属于所述第二类编辑时，根据所述第二图像编辑操作对所述第一图像中的dom元素进行重绘，获得所述第二图像。
  13. 根据权利要求8所述的图像处理装置，其特征在于，所述装置还包括：
    判断单元，用于判断所述待处理原始图像是否属于所述网页的视频文件中的某一帧图像；
    更新单元，用于所述待处理原始图像属于所述视频文件中的某一帧图像，且接收到视频文件更新操作时，将所述视频文件中的所述待处理原始图像更新为所述目标图像，获得更新后的视频文件。
  14. 根据权利要求13所述的图像处理装置，其特征在于，所述装置还包括：
    输出单元，用于输出所述更新后的视频文件，并检测是否接收到视频文件存储操作；
    第一存储单元，用于当接收到所述视频文件存储操作时，存储所述更新后的视频文件；
    设置单元，用于当未接收到所述视频文件存储操作时，将所述更新后的视频文件的当前状态设置为编辑未完成状态。
  15. 一种电子设备，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤：
    从网页中提取待处理原始图像；
    检测是否接收到针对所述待处理原始图像的第一图像编辑操作；
    若接收到所述第一图像编辑操作，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行编辑，获得第一图像；
    检测是否接收到针对所述第一图像的第二图像编辑操作；
    若接收到所述第二图像编辑操作，根据所述第二图像编辑操作对所述第一图像中的dom元素进行编辑，获得第二图像；
    当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像。
  16. 根据权利要求15所述的电子设备，其特征在于，所述当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像之前，所述处理器还执 行以下步骤：
    检测是否接收到针对所述第二图像的第三图像编辑操作；
    若接收到所述第三图像编辑操作，根据所述第三图像编辑操作对所述第二图像中的dom元素进行编辑，获得第三图像；
    所述处理器在执行所述当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像时，具体执行以下步骤：
    当接收到图像生成操作时，调用Canvas将所述第三图像生成与预设待输出格式匹配的目标图像。
  17. 根据权利要求15所述的电子设备，其特征在于，所述当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像之后，所述处理器还执行以下步骤：
    当接收到存储操作时，根据所述存储操作将所述目标图像转换为与目标存储格式匹配的待上传图像，并将所述待上传图像存储至本地硬盘；
    检测是否接收到上传操作；
    若接收到所述上传操作，将所述待上传图像上传至所述网页。
  18. 根据权利要求15至17任一项所述的电子设备，其特征在于，所述检测是否接收到针对所述待处理原始图像的第一图像编辑操作之前，所述处理器还执行以下步骤：
    在预设时长内检测是否接收到用于定义所述待处理原始图像中的dom元素的第一定义操作；
    若在所述预设时长内接收到所述第一定义操作，根据所述第一定义操作获取所述待处理原始图像中的dom元素；
    若在所述预设时长内未接收到所述第一定义操作，则识别所述待处理原始图像中的图形，将所述待处理原始图像中的图形所占的区域作为所述待处理原始图像中的dom元素；
    所述检测是否接收到针对所述第一图像的第二图像编辑操作之前，所述处理器还执行以下步骤：
    在所述预设时长内检测是否接收到用于定义所述第一图像中的dom元素的第二定义操作；
    若在所述预设时长内接收到所述第二定义操作，根据所述第二定义操作获取所述第一图像中的dom元素；
    若在所述预设时长内未接收到所述第二定义操作，则识别所述第一图像中的图形，将所述第一图像中的图形所占的区域作为所述第一图像中的dom元素。
  19. 根据权利要求15至17任一项所述的电子设备，其特征在于，所述第一图像编辑操作的编辑类型包括第一类编辑或第二类编辑，所述第二图像编辑操作的编辑类型包括所述第一类编辑或所述第二类编辑，其中，所述第一类编辑至少包括形状编辑，所述第二类编辑至少包括颜色编辑；
    所述处理器在执行所述若接收到所述第一图像编辑操作，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行编辑，获得第一图像时，具体执行以下步骤：
    若接收到所述第一图像编辑操作，判断所述第一图像编辑操作所属的编辑类型；
    当所述第一图像编辑操作属于所述第一类编辑时，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行重排，获得所述第一图像；
    当所述第一图像编辑操作属于所述第二类编辑时，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行重绘，获得所述第一图像；
    所述处理器在执行所述若接收到所述第二图像编辑操作，根据所述第二图像编辑操作对所述第一图像中的dom元素进行编辑，获得第二图像时，具体执行以下步骤：
    若接收到若接收到所述第二图像编辑操作，判断所述第二图像编辑操作所属的编辑类型；
    当所述第二图像编辑操作属于所述第一类编辑时，根据所述第二图像编辑操作对所述第一图像中的dom元素进行重排，获得所述第二图像；
    当所述第二图像编辑操作属于所述第二类编辑时，根据所述第二图像编辑操作对所述第一图像中的dom元素进行重绘，获得所述第二图像。
  20. 一种计算机可读存储介质，其特征在于，其存储计算机程序，所述计算机程序使得计算机执行权利要求1～7任一项所述的图像处理方法。
PCT/CN2019/120968 2019-01-03 2019-11-26 一种图像处理方法及装置、存储介质、电子设备 WO2020140650A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910003254.1A CN109801344A (zh) 2019-01-03 2019-01-03 一种图像处理方法及装置、存储介质、电子设备
CN201910003254.1 2019-01-03

Publications (1)

Publication Number Publication Date
WO2020140650A1 true WO2020140650A1 (zh) 2020-07-09

Family

ID=66558409

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2019/120968 WO2020140650A1 (zh) 2019-01-03 2019-11-26 一种图像处理方法及装置、存储介质、电子设备

Country Status (2)

Country Link
CN (1) CN109801344A (zh)
WO (1) WO2020140650A1 (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109801344A (zh) * 2019-01-03 2019-05-24 深圳壹账通智能科技有限公司 一种图像处理方法及装置、存储介质、电子设备
CN110968196B (zh) * 2019-11-29 2022-09-02 稿定（厦门）科技有限公司 图片处理的方法及装置
CN111311483A (zh) * 2020-01-22 2020-06-19 北京市商汤科技开发有限公司 图像编辑及训练方法、装置、电子设备和存储介质
CN112085855B (zh) * 2020-09-09 2023-05-09 南昌虚拟现实研究院股份有限公司 交互式图像编辑方法、装置、存储介质及计算机设备
CN114816194B (zh) * 2022-06-28 2022-09-27 西安羚控电子科技有限公司 一种全能图像显控系统及方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104965881A (zh) * 2015-06-12 2015-10-07 北京奇虎科技有限公司 在页面中提取选区的方法及装置
EP2975534A1 (en) * 2014-07-14 2016-01-20 X and Me Technology AG Method and device for secure browsing
CN106293758A (zh) * 2016-08-17 2017-01-04 深圳市金证科技股份有限公司 一种Web应用界面换肤的方法和装置
CN107392981A (zh) * 2017-07-12 2017-11-24 福建中金在线信息科技有限公司 一种图片合成方法、装置、电子设备及可读存储介质
CN109801344A (zh) * 2019-01-03 2019-05-24 深圳壹账通智能科技有限公司 一种图像处理方法及装置、存储介质、电子设备

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
PL395376A1 (pl) * 2011-06-22 2013-01-07 Google Inc. Wykonywanie, po stronie klienta, przyblizonych zrzutów ekranu stron sieci web
US8635518B1 (en) * 2011-07-21 2014-01-21 Google Inc. Methods and systems to copy web content selections
CN108304118B (zh) * 2017-01-13 2020-07-31 北京国双科技有限公司 截图方法及装置
CN107809492B (zh) * 2017-12-08 2020-12-15 广东太平洋互联网信息服务有限公司 分享信息的生成方法和系统

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
EP2975534A1 (en) * 2014-07-14 2016-01-20 X and Me Technology AG Method and device for secure browsing
CN104965881A (zh) * 2015-06-12 2015-10-07 北京奇虎科技有限公司 在页面中提取选区的方法及装置
CN106293758A (zh) * 2016-08-17 2017-01-04 深圳市金证科技股份有限公司 一种Web应用界面换肤的方法和装置
CN107392981A (zh) * 2017-07-12 2017-11-24 福建中金在线信息科技有限公司 一种图片合成方法、装置、电子设备及可读存储介质
CN109801344A (zh) * 2019-01-03 2019-05-24 深圳壹账通智能科技有限公司 一种图像处理方法及装置、存储介质、电子设备

Also Published As

Publication number Publication date
CN109801344A (zh) 2019-05-24

Similar Documents

Publication Publication Date Title
WO2020140650A1 (zh) 一种图像处理方法及装置、存储介质、电子设备
CN108038134B (zh) 页面展示的方法、装置和存储介质以及电子设备
CN109460233B (zh) 页面的原生界面显示更新方法、装置、终端设备及介质
US20120159310A1 (en) Method for converting mobile web application into native application and apparatus using the same
US20180349107A1 (en) Preview Changes To Mobile Applications At Different Display Resolutions
US10452747B2 (en) Dynamically formatting scalable vector graphics
US9792383B2 (en) Unload and display content placeholders with versions
US8902325B2 (en) Camera preview via video tag
CN104704468A (zh) Web应用程序的跨系统安装
CN110647624A (zh) 呈现企业消息传递中的文档差异的动画预览的自动生成
US10831985B2 (en) Processing duplicate multimedia content
CN111596911B (zh) 生成控件的方法、装置、计算机设备和存储介质
US10572572B2 (en) Dynamic layout generation for an electronic document
WO2021218221A1 (zh) 一种网页的显示方法、装置、客户端及存储介质
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
US10951486B2 (en) Terminal device, UI expansion method, and UI expansion program
US11190653B2 (en) Techniques for capturing an image within the context of a document
US20220417343A1 (en) Image processing method, apparatus, device, and computer-readable storage medium
JP5303534B2 (ja) 体裁情報処理装置及び方法
CN111223155A (zh) 图像数据处理方法、装置、计算机设备和存储介质
WO2019052143A1 (zh) Jsx文件生成方法、装置、存储介质和计算机设备
WO2023239468A1 (en) Cross-application componentized document generation
CN115329720A (zh) 一种文档展示方法、装置、设备及存储介质
CN110381118B (zh) 页面数据传输的控制方法和相关设备
CN104731787A (zh) 实现网页布局的方法、装置及终端

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 19906770

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 22.10.2021)

122 Ep: pct application non-entry in european phase

Ref document number: 19906770

Country of ref document: EP

Kind code of ref document: A1