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

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

An Image Processing Method and Device, Storage Media and Electronic Equipment

An image processing method and device, a storage medium and an electronic device include: extracting the original image to be processed from a web page; detecting whether the first image editing operation for the original image to be processed is received; if the first image editing operation is received, the DOM elements in the original image to be processed are edited according to the first image editing operation, and the first image is obtained. If the second image editing operation is received, the DOM element in the first image is edited according to the second image editing operation to obtain the second image; when the image generation operation is received, the second image is generated by calling Canvas to match the target image with the preset output format. Image editing operations are all implemented on DOM elements. It only needs to call Canvas when generating the target image and encapsulate the protocol through the transmission protocol, which can solve the Carton problem and improve the efficiency of image editing.

【技术实现步骤摘要】
一种图像处理方法及装置、存储介质、电子设备
本专利技术涉及图像处理
，特别涉及一种图像处理方法及装置、存储介质以及电子设备。
技术介绍
超文本标记语言5(HyperTextMarkupLanguage5，HTML5)的<canvas>元素用于在浏览器的网页上实时生成图像，<canvas>标签只是图形容器，必须使用脚本(通常是JavaScript)来绘制图形。在Canvas(画布)上面绘制的图形是不可以缩放的，因此，每当Canvas的高度或宽度被重设时，画布内容就会被清空。通常情况下，当开发人员需要对网页中的图像进行编辑时，会使用Canvas来完成该编辑工作。但是，使用Canvas编辑图像会存在以下问题：每次重设Canvas的高度或宽度时，都需要把画布清空，再对图像进行编辑。这样会导致内存占用率过大进而导致卡顿，以及编辑效率低的问题。
技术实现思路
为了解决相关技术中利用Canvas重新编辑图像时会存在内存占用率大而造成的卡顿问题，本专利技术提供了一种图像处理方法及装置、存储介质、电子设备。本专利技术实施例第一方面公开了一种图像处理方法，所述方法包括：从网页中本文档来自技高网...

【技术保护点】
1.一种图像处理方法，其特征在于，包括：从网页中提取待处理原始图像；检测是否接收到针对所述待处理原始图像的第一图像编辑操作；若接收到所述第一图像编辑操作，根据所述第一图像编辑操作对所述待处理原始图像中的dom元素进行编辑，获得第一图像；检测是否接收到针对所述第一图像的第二图像编辑操作；若接收到所述第二图像编辑操作，根据所述第二图像编辑操作对所述第一图像中的dom元素进行编辑，获得第二图像；当接收到图像生成操作时，调用Canvas将所述第二图像生成与预设待输出格式匹配的目标图像。

【技术特征摘要】
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任一项所述的图像处理方法，其特征在于，所述第一图像编辑操作的编辑类型包括第一类编辑或第二类编辑，所述第二图像编辑操作的编辑类型包括所述第一类编辑或所述第二类编辑，其中，所述第一类编辑至少包括形状编辑，所述第二类编辑至少包括颜色...

【专利技术属性】
技术研发人员：杨涛，
申请(专利权)人：深圳壹账通智能科技有限公司，
类型：发明
国别省市：广东,44