[发明专利]基于浏览器画布的图片处理方法、系统、设备和介质

说明书

本发明涉及图片处理技术领域，提供一种基于浏览器画布的图片处理方法、系统、设备和介质。图片处理方法包括：在浏览器中生成初始页面；响应于初始页面的图片处理请求，获得初始页面的图片位置；基于图片位置，生成叠加于图片区域的画布，画布包括对应图片边框的图片位；根据图片位的鼠标操作，生成图片处理信息，将图片处理信息转化成页面刷新语句；以及根据页面刷新语句，刷新初始页面，在浏览器中生成包含处理后的目标图片的更新页面。本发明支持在页面中对图片进行可视化的便捷处理操作，降低图片处理成本，提升图片处理效率；并自动将图片处理操作转为页面刷新语句，通过刷新页面实时展示处理后的页面效果，实现所见即所得的页面图片处理。

技术领域

本发明涉及图片处理技术领域，具体地说，涉及一种基于浏览器画布的图片处理方法、系统、设备和介质。

背景技术

在产品运营场景中，运营人员常需要对页面中的图片进行处理。

现有的图片处理，需要使用PhotoShop等大型图形应用工具，然而运营人员的操作后台受权限限制，或受电脑配置限制，无法安装PhotoShop，导致图片处理需要交由设计人员进行，给设计人员增加负担。

并且，使用PhotoShop等大型图形应用工具进行图片处理的过程十分繁杂，需要具备专业技能，而运营人员通常不具备相关专业技能，学习成本高。

另外，在进行图片处理时，由于无法实时观察到图片处理后的页面效果，常会出现处理后的图片不符合实际需求，导致返工的现象，影响图片处理效率。

需要说明的是，上述背景技术部分公开的信息仅用于加强对本发明的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

有鉴于此，本发明提供一种基于浏览器画布的图片处理方法、系统、设备和介质，支持在页面中对图片进行可视化的便捷处理操作，降低图片处理成本，提升图片处理效率；并自动将图片处理操作转为页面刷新语句，通过刷新页面的方式实时展示图片处理后的页面效果，实现所见即所得的页面图片处理。

本发明的一个方面提供一种基于浏览器画布的图片处理方法，包括：在浏览器中生成初始页面；响应于所述初始页面的图片处理请求，获得所述初始页面的图片位置；基于所述图片位置，生成叠加于图片区域的画布，所述画布包括对应图片边框的图片位；根据所述图片位的鼠标操作，生成图片处理信息，将所述图片处理信息转化成页面刷新语句；以及，根据所述页面刷新语句，刷新所述初始页面，在所述浏览器中生成包含处理后的目标图片的更新页面。

在一些实施例中，生成所述更新页面之后，还包括：关闭所述画布。

在一些实施例中，所述鼠标操作包括移动所述图片位的位置的第一处理操作和调整所述图片位的尺寸的第二处理操作。

在一些实施例中，所述画布还包括关联所述图片位的输入框，所述图片处理方法还包括：根据所述输入框的第一输入参数，生成图片处理信息，所述第一输入参数包括对应所述图片位的位置移动参数和/或尺寸调整参数。

在一些实施例中，当所述图片位置包括对应多张图片的多组位置信息时，生成的所述画布包括对应每个图片边框的图片位和一关联所有图片位的批量输入框；所述图片处理方法还包括：根据所述批量输入框的第二输入参数，生成图片处理信息，所述第二输入参数包括对应所有图片位的位置移动参数和/或尺寸调整参数。

在一些实施例中，所述画布还包括关联所述图片位的替换框，所述图片处理方法还包括：根据所述替换框的替换操作，获得导入图片，以所述导入图片替换所述图片位中的初始图片。

在一些实施例中，所述画布还包括关联所述图片位的下载框，所述图片处理方法还包括：根据所述下载框的下载操作，以预设图片格式下载所述目标图片。

在一些实施例中，所述画布透明叠加于所述图片区域。