基于浏览器画布的图片处理方法、系统、设备和介质

技术领域

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

背景技术

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

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

在一些实施例中，所述初始页面中设有图片处理触发区域，当监测到所述图片处理触发区域的点击操作，发出所述图片处理请求。

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

本发明的再一个方面提供一种电子设备，包括：一处理器；一存储器，所述存储器中存储有可执行指令；其中，所述可执行指令被所述处理器执行时，实现上述任意实施例所述的基于浏览器画布的图片处理方法。

本发明的又一个方面提供一种计算机可读的存储介质，用于存储程序，所述程序被执行时实现上述任意实施例所述的基于浏览器画布的图片处理方法。

本发明与现有技术相比的有益效果至少包括：

当监测到初始页面的图片处理请求时，根据图片位置生成叠加于图片区域的画布，以提供基于页面的图片处理环境；

在画布中，支持通过鼠标操作图片位等方式，对图片进行可视化的便捷处理，使用户无需具备专业图片处理技能，只需根据实际需要调整图片位置/尺寸等，降低图片处理成本，提升图片处理效率；

并且，根据图片处理操作，自动将图片处理信息转成页面刷新语句，通过刷新页面的方式，在快速生成需要的目标图片的同时，在浏览器中实时展示图片处理后的页面效果，实现所见即所得的页面图片处理。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。显而易见地，下面描述的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出本发明实施例中基于浏览器画布的图片处理方法的步骤示意图；

图2示出本发明一实施例中图片处理场景的页面示意图；

图3示出本发明另一实施例中图片处理场景的页面示意图；

图4示出本发明实施例中基于浏览器画布的图片处理系统的模块示意图；

图5示出本发明实施例中电子设备的结构示意图；以及

图6示出本发明实施例中计算机可读的存储介质的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的实施方式。相反，提供这些实施方式使本发明全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。

此外，附图仅为本发明的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

下面实施例中的步骤序号仅用于表示不同的执行内容，并不严格限定步骤之间的执行顺序。具体描述时使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。需要说明的是，在不冲突的情况下，本发明的实施例及不同实施例中的特征可以相互组合。

图1示出实施例中基于浏览器画布的图片处理方法的主要步骤，参照图1所示，本实施例中基于浏览器画布的图片处理方法包括：在步骤S110中，在浏览器中生成初始页面；在步骤S120中，响应于初始页面的图片处理请求，获得初始页面的图片位置；在步骤S130中，基于图片位置，生成叠加于图片区域的画布，画布包括对应图片边框的图片位；在步骤S140中，根据图片位的鼠标操作，生成图片处理信息，将图片处理信息转化成页面刷新语句；以及在步骤S150中，根据页面刷新语句，刷新初始页面，在浏览器中生成包含处理后的目标图片的更新页面。

上述的基于浏览器画布的图片处理方法，当监测到初始页面的图片处理请求时，根据图片位置生成叠加于图片区域的画布，以提供基于页面的图片处理环境；在画布中，支持通过鼠标操作图片位等方式，对图片进行可视化的便捷处理，使用户无需具备专业图片处理技能，只需根据实际需要调整图片位置/尺寸等，降低图片处理成本，提升图片处理效率；并且，根据图片处理操作，自动将图片处理信息转成页面刷新语句，通过刷新页面的方式，在快速生成需要的目标图片的同时，在浏览器中实时展示图片处理后的页面效果，实现所见即所得的页面图片处理。

下面结合具体的示例，对基于浏览器画布的图片处理方法的各个步骤进行详细说明。下述示例的基于浏览器画布的图片处理方法，具体可基于HTML语言和JavaScript语言，在浏览器(例如Chrome浏览器)中实现。

步骤S110中，初始页面中包含需要处理的初始图片。

步骤S120中，可通过对初始页面进行监测，当初始页面发出图片处理请求时，及时作出响应。具体来说，初始页面中设有图片处理触发区域，当监测到图片处理触发区域的点击操作，发出图片处理请求。

参照图2所示的初始页面200，其在页眉栏设有图片处理触发区域210，当图片处理触发区域210被点击时，发出图片处理请求，浏览器后台监测到图片处理请求即及时作出响应。从而，用户通过点击图片处理触发区域210，即可方便地在页面上触发图片处理。

在其他示例中，图片处理触发区域210也可临近页面中的初始图片220设置，以当用户观察到初始图片220，想要进行图片处理时，方便地点击图片处理触发区域210，触发图片处理。或者，图片处理触发区域210也可通过弹窗方式，当监测到特定操作，例如双击初始图片220时，弹窗跳出图片处理触发区域210。

接收到图片处理请求后，可通过解析初始页面200中页面元素的方式，获得对应初始图片220的图片位置。

步骤S130中，通过Canvas创建画布，使生成的画布至少叠加于图片区域，还可进一步叠加于包括图片区域以及周围区域的页面区域。

参照图2所示，画布230叠加于初始图片220的图片区域以及部分周围区域之上。画布230可通过透明叠加或半透明叠加的方式，叠加于页面区域，以提供可供观察页面效果的图片处理环境。进一步地，画布230包括对应初始图片220的图片边框的图片位240。图片位240完整地框定初始图片220，提供操作对象，使用户通过对图片位240的操作，实现对初始图片220的处理。

步骤S140中，响应于对图片位的鼠标操作，生成图片处理信息。其中，鼠标操作具体包括移动图片位的位置的第一处理操作和调整图片位的尺寸的第二处理操作。

参照图2所示，当监测到用户将鼠标移动至图片位240的内部，并拖动鼠标，产生位移动作，则识别为第一处理操作，根据第一处理操作生成包含对应方向的位移数据的图片处理信息。当监测到用户将鼠标移动至图片位240的边界，并拖动鼠标，产生拉伸动作，则识别为第二处理操作，根据第二处理操作生成包含拉伸比例的图片处理信息。图片位240的拉伸通常设置为等比例变化，当然用户也可根据需要单独进行横向/纵向拉伸。

在其他示例中，鼠标操作还可包括其他处理动作，例如当监测到用户将鼠标移动至图片位240的内部，当滑动滚轮，产生缩放动作，则识别为第二处理操作，根据第二处理操作生成包含缩放比例的图片处理信息。

除鼠标操作外，画布还支持参数设置，使用户根据实际情况，通过鼠标操作和/或参数设置，灵活地对图片位进行可视化处理。具体来说，画布还包括关联图片位的输入框，在生成图片处理信息时，还可根据输入框的第一输入参数，第一输入参数具体包括对应图片位的位置移动参数和/或尺寸调整参数。

参照图2所示，输入框250可临近图片位240设置，输入框250中设置有位置移动参数的输入区域，例如图2所示的横向移动输入框和纵向移动输入框，用户可根据实际需要，在横向移动输入框/纵向移动输入框中输入所需的位置移动参数(单位例如为px)。输入框250中还设有尺寸调整参数的输入区域，例如图2所示的横向拉伸输入框和纵向拉伸输入框，用户可根据实际需要，在横向拉伸输入框/纵向拉伸输入框中输入所需的尺寸调整参数(单位例如为％)。输入框250中还可设置“建议的缩放比”按钮，用户点击该按钮，可根据预设数值自动调整图片位240的缩放比例。

上述对图片尺寸的调整，支持将图片调整成任意特殊数值的尺寸，包括一些非整十数尺寸，如73px*73px等。

进一步地，在一个示例中，初始页面中的初始图片包括多张，则步骤S120中获取的图片位置包括对应多张初始图片的多组位置信息，步骤S130中生成的画布包括对应每个图片边框的图片位和一关联所有图片位的批量输入框；图片处理方法还包括：根据批量输入框的第二输入参数，生成图片处理信息，第二输入参数包括对应所有图片位的位置移动参数和/或尺寸调整参数。

例如，参照图3所示的初始页面200’，本示例中生成的画布230’包括对应每个初始图片220的图片边框的图片位240和一关联所有图片位240的批量输入框260。批量输入框260中同样设有位置移动参数的输入区域和尺寸调整参数的输入区域，当用户在批量输入框260输入相关参数，可实现对所有的图片位240进行批量操作。当然，每个图片位240同样设有输入框250，用户可根据实际需要，通过单独操作/批量操作的方式，对初始图片220进行处理。

继续参照图2所示，在一个示例中，画布230中还包括关联图片位240的替换框，图片处理方法还包括：根据替换框的替换操作，获得导入图片，以导入图片替换图片位240中的初始图片220。或者，参照图3所示，在一个示例中，画布230’中还包括关联所有图片位240的替换框，图片处理方法还包括：根据替换框的替换操作，依次获得多张导入图片，按照多个图片位240的排列顺序，依次将多张导入图片替换多个图片位240中的初始图片220。替换图片后，可通过上述的图片处理操作对替换的图片进行处理，生成图片处理信息。

画布230/230’中还可设置确认框，用户在进行完图片的调整后，点击确认框，浏览器后台再响应生成图片处理信息。

进一步地，生成图片处理信息后，通过JavaScript语言，自动将图片处理信息，即相关图片处理参数转换到页面刷新语句中，供浏览器刷新页面。

步骤S150中，浏览器根据页面刷新语句，刷新初始页面，以同步生成处理后的目标图片和更新页面，供用户实时观察图片处理后的页面效果。生成更新页面之后，即可关闭画布，完成图片处理过程。

在一个示例中，参照图2或图3所示，画布还包括关联图片位240的下载框，生成更新页面后，图片处理方法还包括：根据下载框的下载操作，以预设图片格式(例如PNG格式或JPG格式)单独或批量地下载目标图片，保存到本地，以供后续使用。

上述各实施例中，未具体说明的技术原理，例如创建Canvas画布、转换JavaScript语言等，可基于已有的技术实现，因此未详细展开。

综上，本发明的基于浏览器画布的图片处理方法，能够在页面中生成叠加于图片区域的画布，提供可视化的图片处理环境；支持通过鼠标操作和参数设置等方式，对图片进行便捷处理，降低图片处理成本，提升图片处理效率；并且，根据图片处理操作，自动将图片处理信息转成页面刷新语句，通过刷新页面的方式，在快速生成需要的目标图片的同时，实时展示图片处理后的页面效果，实现所见即所得的页面图片处理。

本发明实施例还提供一种基于浏览器画布的图片处理系统，可用于实现上述任意实施例描述的图片处理方法。图4示出实施例中基于浏览器画布的图片处理系统的主要模块，参照图4所示，本实施例中基于浏览器画布的图片处理系统400包括：页面加载模块410，用于在浏览器中生成初始页面；处理触发模块420，用于响应于初始页面的图片处理请求，获得初始页面的图片位置；画布创建模块430，用于基于图片位置，生成叠加于图片区域的画布，画布包括对应图片边框的图片位；语句转化模块440，用于根据图片位的鼠标操作，生成图片处理信息，将图片处理信息转化成页面刷新语句；以及页面刷新模块450，用于根据页面刷新语句，刷新初始页面，在浏览器中生成包含处理后的目标图片的更新页面。

进一步地，基于浏览器画布的图片处理系统400还可包括实现上述各图片处理方法实施例的其他流程步骤的模块，各个模块的具体原理可参照上述各图片处理方法实施例的描述，此处不再重复说明。

如上所述，本发明的基于浏览器画布的图片处理系统，能够在页面中生成叠加于图片区域的画布，提供可视化的图片处理环境；支持通过鼠标操作和参数设置等方式，对图片进行便捷处理，降低图片处理成本，提升图片处理效率；并且，根据图片处理操作，自动将图片处理信息转成页面刷新语句，通过刷新页面的方式，在快速生成需要的目标图片的同时，实时展示图片处理后的页面效果，实现所见即所得的页面图片处理。

本发明实施例还提供一种电子设备，包括处理器和存储器，存储器中存储有可执行指令，可执行指令被处理器执行时，实现上述任意实施例描述的基于浏览器画布的图片处理方法。

如上所述，本发明的电子设备能够在页面中生成叠加于图片区域的画布，提供可视化的图片处理环境；支持通过鼠标操作和参数设置等方式，对图片进行便捷处理，降低图片处理成本，提升图片处理效率；并且，根据图片处理操作，自动将图片处理信息转成页面刷新语句，通过刷新页面的方式，在快速生成需要的目标图片的同时，实时展示图片处理后的页面效果，实现所见即所得的页面图片处理。

图5是本发明实施例中电子设备的结构示意图，应当理解的是，图5仅仅是示意性地示出各个模块，这些模块可以是虚拟的软件模块或实际的硬件模块，这些模块的合并、拆分及其余模块的增加都在本发明的保护范围之内。

如图5所示，电子设备500以通用计算设备的形式表现。电子设备500的组件包括但不限于：至少一个处理单元510、至少一个存储单元520、连接不同平台组件(包括存储单元520和处理单元510)的总线530、显示单元540等。

其中，存储单元存储有程序代码，程序代码可以被处理单元510执行，使得处理单元510执行上述任意实施例描述的基于浏览器画布的图片处理方法的步骤。例如，处理单元510可以执行如图1所示的步骤。

存储单元520可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)5201和/或高速缓存存储单元5202，还可以进一步包括只读存储单元(ROM)5203。

存储单元520还可以包括具有一个或多个程序模块5205的程序/实用工具5204，这样的程序模块5205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线530可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备500也可以与一个或多个外部设备600通信，外部设备600可以是键盘、指向设备、蓝牙设备等设备中的一种或多种。这些外部设备600使得用户能与该电子设备500进行交互通信。电子设备500也能与一个或多个其它计算设备进行通信，所示计算机设备包括路由器、调制解调器。这种通信可以通过输入/输出(I/O)接口550进行。并且，电子设备500还可以通过网络适配器560与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器560可以通过总线530与电子设备500的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备500使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储平台等。

本发明实施例还提供一种计算机可读的存储介质，用于存储程序，程序被执行时实现上述任意实施例描述的基于浏览器画布的图片处理方法。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在终端设备上运行时，程序代码用于使终端设备执行上述任意实施例描述的基于浏览器画布的图片处理方法。

如上所述，本发明的计算机可读的存储介质能够在页面中生成叠加于图片区域的画布，提供可视化的图片处理环境；支持通过鼠标操作和参数设置等方式，对图片进行便捷处理，降低图片处理成本，提升图片处理效率；并且，根据图片处理操作，自动将图片处理信息转成页面刷新语句，通过刷新页面的方式，在快速生成需要的目标图片的同时，实时展示图片处理后的页面效果，实现所见即所得的页面图片处理。

图6是本发明的计算机可读的存储介质的结构示意图。参考图6所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品700，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子包括但不限于：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读的存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备，例如利用因特网服务提供商来通过因特网连接。

以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。