CN112417340A - 网页图片处理方法、计算机设备和存储介质 - Google Patents

Abstract

本发明提供一种网页图片处理方法、计算机设备和存储介质，所述方法包括以下步骤：通过执行在富文本编辑器中添加的新的图片上传指令，请求后端api接口，将待上传的图片上传至后端服务器，并在上传成功后返回所述图片的url；将所述图片的url填充到所述富文本编辑器的img标签中，并通过所述img标签渲染所述图片；获取渲染后的所述图片中多个关键点的位置信息，并根据所述位置信息和缩放指令放大或缩小渲染后的所述图片。本发明能够减轻服务器的压力，并能够方便地实现图片的缩放，从而大大提高网页图片的加载效果，提高用户体验。

Description

网页图片处理方法、计算机设备和存储介质

技术领域

本发明涉及web开发技术领域，具体涉及一种网页图片处理方法、一种计算机设备和一种非临时性计算机可读存储介质。

背景技术

传统的富文本编辑器上传图片时默认的是转换成base64格式显示，图片转换成base64格式后的文本内容较多，在存储数据库时，大大的增大了数据库服务器的压力，并且会影响网页的加载速度。同时，传统的富文本编辑器无法实现对图片的缩放，图片过大或过小均会存在在网页中无法正常显示的问题。无论是网页图片加载速度慢，还是无法正常显示，均会影响用户体验。

发明内容

本发明为解决上述技术问题，提供了一种网页图片处理方法、计算机设备和存储介质，能够减轻服务器的压力，并能够方便地实现图片的缩放，从而大大提高网页图片的加载效果，提高用户体验。

本发明采用的技术方案如下：

一种网页图片处理方法，包括以下步骤：通过执行在富文本编辑器中添加的新的图片上传指令，请求后端api(Application Programming Interface，应用程序接口)接口，将待上传的图片上传至后端服务器，并在上传成功后返回所述图片的url(UniformResource Locator，统一资源定位器)；将所述图片的url填充到所述富文本编辑器的img标签中，并通过所述img标签渲染所述图片；获取渲染后的所述图片中多个关键点的位置信息，并根据所述位置信息和缩放指令放大或缩小渲染后的所述图片。

在执行在富文本编辑器中添加的新的图片上传指令之前，还包括：禁止所述富文本编辑器中的默认图片上传指令。

在禁止所述富文本编辑器中的默认图片上传指令之后，还包括：创建input标签，并添加用以触发所述input标签的指令作为所述新的图片上传指令，其中，所述input标签为html5的input标签，所述input标签用于获取待上传的所述图片在计算机设备的存储路径和图片信息。

通过所述img标签渲染所述图片，具体包括：利用浏览器的watch事件，监听光标在所述富文本编辑器中的位置，将所述img标签填充进去，显示出所述图片。

所述关键点包括渲染后的所述图片的角所在的点。

所述位置信息为以当前浏览器的中心为坐标原点所建立的坐标系中的坐标。

获取渲染后的所述图片中多个关键点的位置信息，并根据所述位置信息和缩放指令放大或缩小渲染后的所述图片，具体包括：通过imageResize函数获取渲染后的所述图片的角所在的点的坐标；在拖动任一角的位置后，分别计算该角拖动前和拖动后到原点的长度；根据该角拖动前和拖动后到原点的长度计算缩放倍数，并依照所述缩放倍数放大或缩小渲染后的所述图片。

所述富文本编辑器为wangeditor。

一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时，实现上述网页图片处理方法。

一种非临时性计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述网页图片处理方法。

本发明的有益效果：

本发明首先通过执行在富文本编辑器中添加的新的图片上传指令，请求后端api接口，将待上传的图片上传至后端服务器，并在上传成功后返回图片的url，然后将图片的url填充到富文本编辑器的img标签中，并通过img标签渲染图片，最后获取渲染后的图片中多个关键点的位置信息，并根据多个关键点的位置信息和缩放指令放大或缩小渲染后的图片，由此，能够减轻服务器的压力，并能够方便地实现图片的缩放，从而大大提高网页图片的加载效果，提高用户体验。

附图说明

图1为本发明实施例的网页图片处理方法的流程图；

图2为本发明一个具体实施例的网页图片处理方法的流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图1所示，本发明实施例的网页图片处理方法包括以下步骤：

S1，通过执行在富文本编辑器中添加的新的图片上传指令，请求后端api接口，将待上传的图片上传至后端服务器，并在上传成功后返回图片的url。

本发明实施例可在node.js环境中创建web前端开发应用，引入富文本编辑器插件。在本发明的一个实施例中，富文本编辑器可为wangeditor。

首先，可禁止富文本编辑器中的默认图片上传指令。具体地，可在wangeditor自定义container对象，向container对象添加key值为“image”、value值为“false”的属性，用来防止wangeditor自带的图片上传功能触发。

然后，可创建input标签，具体地，可创建<input type＝’file’/>标签，通过display＝“none”隐藏该标签。

进而，可添加用以触发input标签的指令作为新的图片上传指令。具体地，可在handlers对象中添加一个点击指令，该点击指令触发input的上传功能。其中，input标签为html5的input标签，input标签能够用以获取待上传的图片在计算机设备的存储路径和图片信息。通过编写该点击指令，请求后端api接口上传图片，请求成功后，后端返回该图片的url至前端。更具体地，可在handlers对象中，创建一个function函数用来触发input的上传功能，在选中待上传的图片后，前端可以获取到一个formData对象，该对象包含了待上传的图片在计算机设备上的储存路径和具体信息，然后根据实际业务场景向formData中append需要向后端传输的参数，请求后端api接口，把待上传的图片上传到后端服务器中，请求成功后，后端api接口返回给前端一个网络图片的url。

S2，将图片的url填充到富文本编辑器的img标签中，并通过img标签渲染图片。

通过创建img标签，将api返回的图片的url填充到img标签中。然后利用浏览器的watch事件，监听光标在富文本编辑器中的位置，将img标签填充进去，显示出图片。

S3，获取渲染后的图片中多个关键点的位置信息，并根据位置信息和缩放指令放大或缩小渲染后的图片。

在本发明的一个实施例中，关键点包括渲染后的图片的角所在的点，位置信息为以当前浏览器的中心为坐标原点所建立的坐标系中的坐标，缩放指令可为鼠标拖动指令。

在本发明的一个具体实施例中，当图片为矩形时，关键点包括矩形四角，应当理解的是，在本发明的其他实施例中，关键点也可包括图片的边上某一点。当图片为其他不规则形状时，关键点还可根据实际情况进行选取。

具体地，可通过imageResize函数获取渲染后的图片的角所在的点的坐标，在拖动任一角的位置后，分别计算该角拖动前和拖动后到原点的长度，最后根据该角拖动前和拖动后到原点的长度计算缩放倍数，并依照缩放倍数放大或缩小渲染后的图片。

在本发明的一个具体实施例中，可通过dblclick事件来选中图片，即鼠标双击想要改变大小的图片来进行选中。然后计算图片中各个关键点的位置，举例而言，可选择当前浏览器的中心为坐标原点建立平面直角坐标系，以1px为单位，x、y方向为x轴、y轴做坐标轴画出坐标图，然后得到图片各个角在坐标图上的位置，例如A:(23,44)、B:(52,72)、C:(45,88)、D:(-33,-12)、E:(-29,55)。拖动当前图片的角A:(23,44)到坐标点(46,88)，计算放大倍数。具体地，连接A:(23，44)到原点(0，0)，计算长度约等于50，连接坐标点(46，88)到原点(0，0)，计算长度约等于100，计算拖动后的100和拖动前50之间的倍数关系，约等于2倍，最后同比放大图片。

本发明一个具体实施例的网页图片处理方法的流程如图2所示。

本发明实施例的网页图片处理方法所对应的计算机程序，可被封装为单独的应用安装包。在应用阶段可安装该应用安装包，然后在网页端项目中提供标签包裹，实例化引入应用名称，并且将标签dom作为实例化参数即可使用。

根据本发明实施例的网页图片处理方法，首先通过执行在富文本编辑器中添加的新的图片上传指令，请求后端api接口，将待上传的图片上传至后端服务器，并在上传成功后返回图片的url，然后将图片的url填充到富文本编辑器的img标签中，并通过img标签渲染图片，最后获取渲染后的图片中多个关键点的位置信息，并根据多个关键点的位置信息和缩放指令放大或缩小渲染后的图片，由此，能够减轻服务器的压力，并能够方便地实现图片的缩放，从而大大提高网页图片的加载效果，提高用户体验。

对应上述实施例，本发明还提出一种计算机设备。

本发明实施例的计算机设备包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行该计算机程序时，可实现根据本发明上述实施例所述的网页图片处理方法。

根据本发明实施例的计算机设备，处理器执行存储在存储器上的计算机程序时，首先通过执行在富文本编辑器中添加的新的图片上传指令，请求后端api接口，将待上传的图片上传至后端服务器，并在上传成功后返回图片的url，然后将图片的url填充到富文本编辑器的img标签中，并通过img标签渲染图片，最后获取渲染后的图片中多个关键点的位置信息，并根据多个关键点的位置信息和缩放指令放大或缩小渲染后的图片，由此，能够减轻服务器的压力，并能够方便地实现图片的缩放，从而大大提高网页图片的加载效果，提高用户体验。

对应上述实施例，本发明还提出一种非临时性计算机可读存储介质。

本发明实施例的非临时性计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时可实现根据本发明上述实施例所述的网页图片处理方法。

根据本发明实施例的非临时性计算机可读存储介质，处理器执行存储在其上的计算机程序时，首先通过执行在富文本编辑器中添加的新的图片上传指令，请求后端api接口，将待上传的图片上传至后端服务器，并在上传成功后返回图片的url，然后将图片的url填充到富文本编辑器的img标签中，并通过img标签渲染图片，最后获取渲染后的图片中多个关键点的位置信息，并根据多个关键点的位置信息和缩放指令放大或缩小渲染后的图片，由此，能够减轻服务器的压力，并能够方便地实现图片的缩放，从而大大提高网页图片的加载效果，提高用户体验。

在本发明的描述中，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。“多个”的含义是两个或两个以上，除非另有明确具体的限定。

在本发明中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”、“固定”等术语应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或成一体；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通或两个元件的相互作用关系。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

在本发明中，除非另有明确的规定和限定，第一特征在第二特征“上”或“下”可以是第一和第二特征直接接触，或第一和第二特征通过中间媒介间接接触。而且，第一特征在第二特征“之上”、“上方”和“上面”可是第一特征在第二特征正上方或斜上方，或仅仅表示第一特征水平高度高于第二特征。第一特征在第二特征“之下”、“下方”和“下面”可以是第一特征在第二特征正下方或斜下方，或仅仅表示第一特征水平高度小于第二特征。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必针对相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，“计算机可读介质”可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (10)

1.一种网页图片处理方法，其特征在于，包括以下步骤：

通过执行在富文本编辑器中添加的新的图片上传指令，请求后端api接口，将待上传的图片上传至后端服务器，并在上传成功后返回所述图片的url；

将所述图片的url填充到所述富文本编辑器的img标签中，并通过所述img标签渲染所述图片；

获取渲染后的所述图片中多个关键点的位置信息，并根据所述位置信息和缩放指令放大或缩小渲染后的所述图片。

2.根据权利要求1所述的网页图片处理方法，其特征在于，在执行在富文本编辑器中添加的新的图片上传指令之前，还包括：

禁止所述富文本编辑器中的默认图片上传指令。

3.根据权利要求2所述的网页图片处理方法，其特征在于，在禁止所述富文本编辑器中的默认图片上传指令之后，还包括：

创建input标签，并添加用以触发所述input标签的指令作为所述新的图片上传指令，其中，所述input标签为html5的input标签，所述input标签用于获取待上传的所述图片在计算机设备的存储路径和图片信息。

4.根据权利要求3所述的网页图片处理方法，其特征在于，通过所述img标签渲染所述图片，具体包括：

利用浏览器的watch事件，监听光标在所述富文本编辑器中的位置，将所述img标签填充进去，显示出所述图片。

5.根据权利要求4所述的网页图片处理方法，其特征在于，所述关键点包括渲染后的所述图片的角所在的点。

6.根据权利要求5所述的网页图片处理方法，其特征在于，所述位置信息为以当前浏览器的中心为坐标原点所建立的坐标系中的坐标。

7.根据权利要求6所述的网页图片处理方法，其特征在于，获取渲染后的所述图片中多个关键点的位置信息，并根据所述位置信息和缩放指令放大或缩小渲染后的所述图片，具体包括：

通过imageResize函数获取渲染后的所述图片的角所在的点的坐标；

在拖动任一角的位置后，分别计算该角拖动前和拖动后到原点的长度；

根据该角拖动前和拖动后到原点的长度计算缩放倍数，并依照所述缩放倍数放大或缩小渲染后的所述图片。

8.根据权利要求7所述的网页图片处理方法，其特征在于，所述富文本编辑器为wangeditor。

9.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时，实现根据权利要求1-8中任一项所述的网页图片处理方法。

10.一种非临时性计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现根据权利要求1-8中任一项所述的网页图片处理方法。

Images