具体实施方式

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

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

此外，附图中所示的流程仅是示例性说明，不是必须包括所有的步骤。例如，有的步骤可以分解，有的步骤可以合并或部分合并，且实际执行的顺序有可能根据实际情况改变。具体描述时使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。需要说明的是，在不冲突的情况下，本发明的实施例及不同实施例中的特征可以相互组合。

富文本编辑器(Rich Text Editor，简称RTE)可内嵌于浏览器，实现文字、图片等内容的编辑处理。本发明的基于富文本编辑器的图片水印处理方法，结合富文本编辑器及其服务端，即浏览器的系统后台，实现对富文本编辑器中的图片进行可视地、便捷地、灵活地批量水印嵌入/取消处理。

图1示出一实施例中基于富文本编辑器的图片水印处理方法的主要步骤，参照图1所示，本实施例的图片水印处理方法包括如下步骤。

步骤S110，获取富文本编辑器的编辑内容，对编辑内容中的所有图片进行本地化存储，生成本地图片地址。

富文本编辑器可以是已有的任意一款富文本编辑器，例如CKeditor、Ueditor、135编辑器、秀米编辑器等等。编辑内容可包括粘贴内容(即HTML(Hyper Text MarkupLanguage，超文本标记语言)内容)，获取富文本编辑器的编辑内容，具体包括：富文本编辑器监听内容粘贴事件；当监听到内容粘贴事件时，富文本编辑器获取内容粘贴事件的粘贴内容，提交至服务端。

传统富文本编辑器仅支持对上传的图片进行水印嵌入处理，本发明通过监听内容粘贴事件，实现针对富文本编辑器中复制粘贴的内容，自动将其中的外站图片抓取下载到本地，无需用户手动下载上传图片，使图片水印处理方法对直接粘贴的内容也生效。

对编辑内容中的所有图片进行本地化存储，生成本地图片地址，具体包括：服务端解析编辑内容，识别编辑内容中的图片标签(即<IMG>标签)，根据图片标签获取图片地址(即自<IMG>标签的SCR属性中获取URL路径)；判断图片地址中是否存在外部图片地址(即判断URL路径中是否存在绝对URL路径)。若是，服务端根据外部图片地址进行图片抓取下载，生成本地图片地址，以本地图片地址替换外部图片地址(即将下载完成的图片的新访问地址替换到编辑内容的对应SCR属性中)，生成第一更新编辑内容，返回至富文本编辑器。

富文本编辑器的编辑内容中，有些图片是从其他网页上复制过来的，图片地址是外链，图片保存在第三方服务器上，需要先下载到本地服务器上才能对该图片进行处理；而人工下载效率低，因此本发明自动将外站的图片抓取下载到本地服务器，为图片水印批量嵌入工作做准备。

完成全部外链图片的抓取以及地址替换后，服务端将新生成的HTML内容，即第一更新编辑内容返回至富文本编辑器，富文本编辑器进而调用编辑器设置内容方法，刷新编辑器内容。

本步骤通过对富文本编辑器的编辑内容中的所有图片进行本地化存储，实现将外站的图片自动抓取下载到本地服务器，为图片水印批量嵌入做准备；且图片提前抓取下载的过程可以与用户其他操作同步进行，使用户无感知，充分利用用户触发水印操作前的时间，提升用户体验。

进一步地，若要使用户能够选择需要的图片，那么需要将富文本编辑器的HTML源码中的所有图片地址全部抽取出来备用。因此，富文本编辑器收到第一更新编辑内容后，还包括：基于正则表达式提取第一更新编辑内容中的所有本地图片地址，存入数组中备用；后续，当富文本编辑器接收到水印触发操作时，可通过调用数组的方式快速获取其HTML内容中的本地图片地址。

步骤S120，响应于水印触发操作，根据本地图片地址在富文本编辑器中生成显示所有图片且每张图片及水印信息可供选择的水印处理界面。

富文本编辑器配置有水印处理按钮，水印处理按钮可通过修改富文本编辑器的源码或配置文件的方式添加于富文本编辑器的工具栏；当水印处理按钮被触发时，例如用户点击水印处理按钮，则生成水印触发操作。

图2示出一实施例中富文本编辑器配置有水印处理按钮的示意，参照图2所示，通过修改编辑器源码或者配置文件等方式，能够实现在富文本编辑器200的工具栏210中，增加水印处理按钮220。富文本编辑器200的工具栏210中，还包括进行其他常规操作的图标按钮，例如字体设置按钮、段落设置按钮，等等，图中未具体展示。

根据本地图片地址在富文本编辑器中生成显示所有图片且每张图片及水印信息可供选择的水印处理界面，具体包括：富文本编辑器调用数组获取本地图片地址进行图片渲染，生成对当前编辑内容(即上述的第一更新编辑内容)中的所有图片进行列表显示的水印处理界面，实现图片列表的可视化管理；水印处理界面中，配置有对每张图片及水印信息进行选取的交互控件，以便于用户的选取操作。

利用富文本编辑器的自定义组件开发SDK(Software Development Kit，软件开发工具包)，或者根据富文本编辑器对于自定义组件的开发要求，能够实现图片列表展示、提供图片选中/取消选择、水印位置选择、提交数据等UI(User Interface，用户界面)展示和数据交互。在自定义组件界面代码中，实现调用上述数组中的数据获取本地图片地址渲染到自定义组件界面中。

在对富文本编辑器进行配置时，需要确认富文本编辑器是否采用了自动缓存机制，若是则需要取消富文本编辑器的自动缓存机制。自动缓存机制是指富文本编辑器自动将组件的JS代码进行缓存，且无法通过常规方式清除缓存。由于常规富文本编辑器的自定义组件的所有展示的内容均由JS编写，包括第一次获取的展示的图片列表都是作为JS内容执行，若是富文本编辑器采用了自动缓存机制，则会造成在该JS缓存有效期下，组件中展示的图片列表信息不会变化，只会展示第一次生成该JS时获取的图片列表。在自动缓存机制下，即使通过更换其他图文内容、重新登录系统、重开浏览器、CTRL+F5刷新缓存等等方式，均无法实现对新的内容进行图片水印批量嵌入操作。

因此，若发现富文本编辑器采用了自动缓存机制，需要通过浏览器等前端调试工具，找到自定义组件初始化时富文本编辑器自动生成的动态JS文件信息，根据该信息检索源码，找到生成该JS文件的代码，在生成动态JS文件名称后增加“？＝当前时间戳”的代码，实现让该组件的自动缓存机制失效。

图3示出一实施例中富文本编辑器生成水印处理界面的示意，结合图2和图3所示，当水印处理按钮220被触发时，富文本编辑器200利用自定义组件实现当前编辑内容中的所有图片的排列展示，生成水印处理界面310，水印处理界面310还提供图片选取功能、水印位置选择功能、取消水印功能等。在触发水印处理按钮220前，用户可以在富文本编辑器200中进行文字编辑、图文排版编辑等操作；然后可触发水印处理按钮220，利用生成的水印处理界面310选择需要添加水印的图片和具体的水印添加信息。用户可以点击水印处理界面310中的“全选”按钮以选择所有图片320，也可以单独地勾选每张图片320对应的选取框以选择特定的一张或多张图片320；用户可选择水印位置，例如选择将水印添加在右下角，然后点击“确定”，即可向系统后台提交选中的原始图片和水印添加信息。另外，用户还可上传水印图片，例如此处点击“确定”后跳出水印图片上传界面，或者之前点击水印处理按钮220后即可跳出水印图片上传界面，图中未具体展示。

通过水印处理界面，能够在多方面获得如下优势：处理流程方面，用户编辑完内容后再统一对当前编辑内容中的图片进行批量嵌入水印的操作，可根据需要选择对应的图片及添加水印的方式，一次性完成水印嵌入工作，十分便捷；可视化方面，可抽取编辑内容中的所有图片展示到水印处理界面，实现更加直观的操作方式；自动化方面，粘贴的内容后台静默自动下载，用户无感知，用户只需要在水印处理界面选择图片嵌入水印；效率方面，一次性对多张图片进行嵌入水印，效率高。

图4示出现有的富文本编辑器的水印嵌入操作界面，参照图4所示，现有的富文本编辑器400的水印嵌入操作界面410以网页对话框的形式，展示简单文本内容。处理流程方面：需要用户在编辑内容时边编辑内容边添加水印，完成一篇内容的编辑需要在文本编辑和图片上传及水印嵌入操作来回切换多次，十分繁琐；可视化方面：上传的图片及水印图片等只能显示文件路径，带有图片的内容由于富文本编辑器缓存机制无法展示；自动化方面：粘贴的内容需要把图片都手动下载重新上传一次并添加水印，没有自动化处理；效率方面：每次单张图片进行嵌入水印处理效率低。

可见，本发明当用户发出水印触发操作，根据已经抓取下载好的本地图片地址生成显示所有图片内容且每张图片及水印信息可供选择的水印处理界面，能够使用户通过水印处理界面，根据场景需要灵活地选择需要添加水印的图片、水印添加位置等信息，批量提交至后台，操作过程直观、便捷、灵活可控。

步骤S130，根据水印处理界面选中的原始图片和水印添加信息，进行原始图片的水印嵌入处理，在富文本编辑器中生成包含嵌有水印的目标图片的图文内容。

水印添加信息包括水印位置和水印图片；根据水印处理界面选中的原始图片和水印添加信息，进行原始图片的水印嵌入处理，具体包括：富文本编辑器将水印处理界面选中的原始图片、水印添加信息和当前编辑内容提交至服务端；服务端将水印图片嵌入原始图片的水印位置处，生成嵌有水印的目标图片，并以目标图片的本地图片地址替换原始图片的本地图片地址生成第二更新编辑内容，返回至富文本编辑器。

服务端获取到原始图片、水印图片信息和水印位置信息后，可通过创建任务队列的方式对需要嵌入水印的原始图片进行批量嵌入处理。图片水印嵌入完成后，将带有水印的图片访问地址替换至HTML原文中，即上述的第一更新编辑内容中，然后将新HTML内容，即第二更新编辑内容回传至富文本编辑器，富文本编辑器调用内容设置方法重新设置页面内容，实现局部刷新的效果，展示已经水印图片批量嵌入的图文内容。

服务端具体可通过ImageMagick等专业图片处理工具进行图片水印的批量嵌入。服务端提供水印处理接口，接收由用户选择的原始图片、水印图片、水印位置以及HTML原文等数据，调用ImageMagick工具遍历将水印图片批量嵌入指定的原始图片的指定位置，生成目标图片，原始图片可保留用于用户取消水印时使用。

本步骤根据用户选择的图片和水印信息，能够批量地进行图片水印嵌入处理，生成含有添加了水印的目标图片的图文内容展示至富文本编辑器中，实现在复杂环境下不同嵌入水印需求的处理工作一步完成，有效提高图片水印嵌入工作的效率，提高富文本编辑器的图片水印处理功能的实用度。

图5示出一具体示例中基于富文本编辑器的图片水印处理方法的主要流程步骤。本示例中主要说明与现有流程相比的创新之处，对于上述实施例中已经描述的关于图片水印处理的特征和原理不再重复说明。

S510，用户500a在富文本编辑器500b中粘贴内容，则富文本编辑器500b监听到粘贴事件，将粘贴内容提交至后端，即系统后台500c。

S520，系统后台500c解析粘贴内容，自动抓取外部域名图片，下载至本地服务器上，以便于后续对图片进行处理。

S530，系统后台500c将原内容替换本地图片地址，即将粘贴内容中的外部图片地址替换为本地图片地址，并返回给富文本编辑器500b重新设置内容，即富文本编辑器500b对当前编辑内容进行刷新。

S540，用户500a点击嵌入水印按钮，则富文本编辑器500b抽取所有已经本地化存储的图片地址进行图片渲染，生成水印处理可视化界面JS。

S550，富文本编辑器500b渲染可视化界面并展示。利用富文本编辑器500b的自定义组件实现所有图片的排列展示，通过可视化界面用户可以执行图片选中、取消选择、水印位置选择等等操作。

S560，用户500a选择多个图片及水印处理方式，包括水印位置信息、水印图片信息等，富文本编辑器500b将用户所选内容及当前编辑内容提交至后端处理。

S570，系统后台500c使用ImageMagic批量嵌入水印，可创建任务队列对需要嵌入水印的图片进行处理。

S580，系统后台500c将原内容替换水印图片地址，即将当前编辑内容中的相关图片地址替换为已经水印处理后的图片地址，返回给富文本编辑器500b重新设置内容。从而，实现将嵌入水印的图片内容回传至前端，使富文本编辑器500b刷新内容，展示已经嵌入水印图片的图文内容。

图6示出一具体示例中基于富文本编辑器的图片水印处理方法的主要系统模块。本示例中主要说明与现有系统模块相比的创新之处，对于上述实施例中已经描述的关于图片水印处理的特征和原理不再重复说明。

富文本编辑器610配置有：自定义组件611，提供自定义“添加图片”功能，嵌入到富文本编辑器600a的工具栏中；内容粘贴监听模块612，用于监听用户粘贴内容事件，触发时将编辑器内容提交给系统后台解析处理；图片地址管理模块613，用于管理抽取所有图片地址，动态生成水印管理的视图内容；水印管理可视化模块614，用于提供图片列表展示、每张图片是否添加水印、水印内容、添加位置等选项；HTML内容回写刷新模块615，用于接收后台替换了水印图片地址的HTML内容设置到编辑器中并局部刷新展示。

系统后台620配置有：图片抓取下载模块621，用于判断是否为本系统图片，并通过外部链接下载外部系统图片到本系统；图片处理任务模块622，用于创建及管理图片抓取下载任务以及嵌入图片水印任务，调度相关任务执行模块；ImageMagic图像处理工具623，用于为图片嵌入水印；消息队列624，用于保存图片任务处理数据，保障任务排队处理；文件服务器625，用于存储用户上传的图片、系统抓取下载的图片、嵌入水印新生成的图片并提供图片资源访问；HTML解析模块626，用于接收富文本编辑器610提交的HTML内容，解析内容获取所有图片地址，替换水印图片地址生成新的HTML内容返回。当然，系统模块的设置并不局限于图6所示，不同的系统模块之间可以合并，或者同一个系统模块可以拆解，只要能实现基于富文本编辑器的图片可视地、便捷地、灵活地批量水印嵌入/取消处理即可。

图7示出一具体示例中基于富文本编辑器的图片水印处理方法的主要数据流转过程。本示例中主要说明与现有数据流转过程相比的创新之处，对于上述实施例中已经描述的关于图片水印处理的特征和原理不再重复说明。

数据输入步骤S710：用户700a输入业务数据至富文本编辑器700b。本步骤可采用粘贴的方式，也即富文本编辑器700b可对粘贴的数据内容进行处理，而传统的方法只能处理通过上传方式上传的图片。

提交步骤S720：富文本编辑器700b将输入数据提交至系统后台700c。

下载抓取步骤S730：系统后台700c自第三方网站700d下载图片。本步骤可实现自动下载外部图片，相比于传统的手动下载再上传方式效率更高。当然，本发明中也可由用户700a直接上传图片至系统后台700c，图中未具体展示。

图片存储/调用步骤S740：系统后台700c将下载的图片保存至本地的文件服务器700e，以便于后续的调用处理。

回传步骤S750：系统后台700c将替换了图片地址后的内容回传给富文本编辑器700b。

数据显示步骤S760：富文本编辑器700b根据更新的内容刷新当前展示的数据。此处，富文本编辑器700b还能根据用户输入的水印触发数据返回动态水印处理界面，展示编辑内容中的所有图片和相关操作元素，而传统方法返回静态界面，无法显示图片内容。

继续，数据输入步骤S710’：用户输入水印处理数据至富文本编辑器700b。

提交步骤S720’：富文本编辑器700b将输入数据提交至系统后台700c。本发明提交复数个水印嵌入业务数据，无需上传图片数据，传统方法一一次只能提交一个水印嵌入业务数据，同时要上传图片数据，每次消费时间多。

创建图片处理任务步骤S770：系统后台700c根据业务场景分派给图片处理任务模块700f进行图片水印处理。

调用图像处理工具步骤S780：图片处理任务模块700f调用ImageMagic工具700g进行图片水印的批量处理。

生成嵌入水印图片保存步骤S790：ImageMagic工具700g将已经嵌入水印的图片保存至文件服务器700e。

回传步骤S750’：系统后台700c自文件服务器700e中调取已经嵌入水印的图片，回传至富文本编辑器700b。本发明回经过批量图片水印嵌入后的全文HTML内容，相比传统方法只返回水印图片地址更易处理。

数据显示步骤S760’：富文本编辑器700b刷新内容为用户提供数据展示。

上述各实施例的图片水印处理方法，实现富文本编辑器的图片水印批量嵌入功能，相比于现有技术中只能一次对一张上传的图片进行水印嵌入，无法批量处理，严重影响编辑内容的生产效率；本发明通过自动下载外部系统图片，结合编辑器内容中的所有图片生成动态图片水印批量嵌入视图，并解决了因编辑器的强缓存机制显示不出更新后内容的核心问题，为用户提供了基于富文本编辑器且功能丰富的可视化图片水印批量嵌入方式，一步完成多种图片嵌入水印场景的需要，从而提高的水印处理的工作效率。

进一步的，在上述任意实施例的基础上，图片水印处理方法还包括：根据水印处理界面的选中的目标图片和水印删除信息，进行目标图片的水印取消处理，在富文本编辑器中生成包含已取消水印的原始图片的图文内容。其中，根据水印处理界面的选中的目标图片和水印删除信息，进行目标图片的水印取消处理，具体包括：富文本编辑器将水印处理界面选中的目标图片、水印取消信息和当前编辑内容提交至服务端；服务端以目标图片对应的原始图片的本地图片地址替换目标图片的本地图片地址生成第三更新编辑内容，返回至富文本编辑器。

可结合图3所示，当用户在水印处理界面310中选择了几张已经嵌入了水印的目标图片，并在“选择水印位置或取消水印”交互控件处选中了“取消水印”，则可以实现对该几张目标图片进行批量水印取消操作。具体操作原理可参见上述任意实施例的描述，此处不再重复说明。

综上，本发明的基于富文本编辑器的图片水印处理方法，通过图片自动抓取、添加自定义图片水印嵌入工具、以及抽取内容中所有图片动态生成可视化的水印处理界面，使用户一步即可完成对编辑内容中的所有图片的水印嵌入处理，丰富了富文本编辑器的功能，减少用户操作步骤，提高图片水印嵌入工作的效率。区别于其他编辑器实现图片嵌入水印的方式，本方法抽取编辑内容中的所有图片以列表的方式展示出来，使用户可以分别对每张图片设置不同的水印嵌入方案，包括是否嵌入水印、选择水印内容、嵌入水印的位置等，设置完后统一提交后台处理，将最终内容一次性返回前端局部刷新展示，将处理用户嵌入水印的工作作为内容编辑的最后一个统一处理的步骤抽离出来，并提供可视化的交互能力，处理方式更加灵活、人性化且高效率。另外，本发明由于是将编辑器内容中的所有图片一一列举展示出来可针对性处理，且嵌入水印的图片会保留原图，因此通过本发明的方法可提供取消水印的操作，用户可直接选择已经添加水印的图片设置取消水印，后台根据指令替换为原图即可实现取消嵌入水印的效果，无需像现有实现方式需要用户删除水印图片后重新上传。

本发明实施例还提供一种图片水印处理装置，可用于实现上述任意实施例描述的图片水印处理方法。上述任意实施例描述的图片水印处理方法的特征和原理均可应用至下面的图片水印处理装置实施例。在下面的图片水印处理装置实施例中，对已经阐明的关于图片水印处理的特征和原理不再重复说明。

图8示出一实施例中基于富文本编辑器的图片水印处理装置的主要模块，参照图8所示，本实施例中基于富文本编辑器的图片水印处理装置800包括：图片本地存储模块810，用于获取富文本编辑器的编辑内容，对编辑内容中的所有图片进行本地化存储，生成本地图片地址；可视界面生成模块820，用于响应于水印触发操作，根据本地图片地址在富文本编辑器中生成显示所有图片且每张图片及水印信息可供选择的水印处理界面；图片水印处理模块830，用于根据水印处理界面选中的原始图片和水印添加信息，进行原始图片的水印嵌入处理，在富文本编辑器中生成包含嵌入有水印的目标图片的图文内容。

进一步地，图片水印处理装置800还可包括实现上述各图片水印处理方法实施例的其他流程步骤的模块，例如，还可包括如图6中所示的各个系统模块，不同的系统模块之间可以合并，或者同一个系统模块还可以拆解，只要能实现基于富文本编辑器的图片可视地、便捷地、灵活地批量水印嵌入/取消处理即可。各个模块的具体原理可参照上述各图片水印处理方法实施例的描述，此处不再重复说明。

本发明的图片水印处理装置，能够实现将富文本编辑器内容中的所有图片展示给用户，用户可以在上传、粘贴、内容排版等所有图文编辑工作完成准备提交发布前，统一选择需要嵌入水印的图片及需要嵌入的水印信息，后台进行批量嵌入水印的处理后替换到原文中，使得在复杂环境下不同嵌入水印需求的处理工作一步完成，使用过程更加直观、便捷和灵活可控，有效地提高了图片水印处理效率，提高富文本编辑器的图片水印处理功能的实用度。

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