一种页面上传图片的编辑响应方法、装置、介质及设备

技术领域

本申请实施例涉及计算机技术领域，尤其涉及一种页面上传图片的编辑响应方法、装置、介质及设备。

背景技术

随着信息化时代的迅速发展，人们对页面报名以及页面内容上传的需求越来越多。例如页面报名场景，往往需要用户上传生活照、证件照等能够进行区分识别的图片，且对上传的图片有一定的条件限制，如宽高比、图片大小等。而现有技术中，对于图片的编辑处理需要用户通过线下的程序进行处理。这不仅需要用户装载相应的编辑处理程序，同时还不能够确定编辑结果是否能够符合页面的上传需求，如果不满足，则需要再次编辑。这就造成了用户的图片编辑效率极其低下，影响用户的使用体验。

发明内容

本申请实施例提供一种页面上传图片的编辑响应方法、装置、介质及设备，可以通过集成于页面中的图片编辑组件，进行上传需求的读取，应在用户编辑图片的过程中进行预先分析，从而提高用户的图片上传效率。

第一方面，本申请实施例提供了一种页面上传图片的编辑响应方法，所述方法包括：

若检测到页面上传图片的事件，则获取上传要求数据，并确定待编辑图片；

根据所述上传要求数据，确定上传限制条件；其中，所述上传限制条件包括动态限制条件和/或静态限制条件；

响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定编辑图片时的预先分析结果；

若所述预先分析结果为不满足所述上传限制条件，则确定当前编辑操作无效。

进一步的，所述上传限制条件还包括用户选择待编辑图片的选择限制条件；

所述方法还包括：

若所述用户选择的待编辑图片不满足所述选择限制条件的下限，则确定所选择的待编辑图片不满足所述上传限制条件。

进一步的，所述静态限制条件包括图片分辨率限制条件以及禁止图片边界填充限制条件；所述动态限制条件包括图片宽度限制条件和/或图片高度限制条件，以及图片文件大小门限值。

进一步的，响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定所述待编辑图片的预先分析结果，包括：

读取编辑操作时得到的实际分辨率；其中，所述实际分辨率是基于所述待裁剪图片的基础分辨率和所述待裁剪图片的被压缩比例，以及裁剪框的宽高比与图片宽高比确定的；其中，所述裁剪框为编辑图片时得到的预选裁剪框；

若所述实际分辨率不满足所述图片分辨率限制条件，则确定所述待编辑图片的预先分析结果为不满足所述上传限制条件。

进一步的，响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定所述待编辑图片的预先分析结果，包括：

响应于待编辑图片的裁剪操作，得到预选裁剪框；

确定所述预选裁剪框的尺寸是否满足所述图片宽度限制条件和/或图片高度限制条件；

若所述预选裁剪框不满足所述图片宽度限制条件和/或图片高度限制条件，则确定所述待编辑图片的预先分析结果为不满足所述上传限制条件。

进一步的，所述图片宽度限制条件包括宽度定值或宽度门限值；

所述图片高度限制条件包括高度定值或高度门限值；

确定所述预选裁剪框的尺寸是否满足所述图片宽度限制条件和/或图片高度限制条件，包括：

若所述图片宽度限制条件为宽度定值，且所述预选裁剪框的宽度与所述宽度定值不同，则确定所述预选裁剪框的尺寸不满足所述图片宽度限制条件；

若所述图片宽度限制条件为宽度门限值，且所述预选裁剪框的宽度未在所述宽度门限值范围内，则确定所述预选裁剪框的尺寸不满足所述图片宽度限制条件；

若所述图片高度限制条件为高度定值，且所述预选裁剪框的高度与所述高度定值不同，则确定所述预选裁剪框的尺寸不满足所述图片高度限制条件；

若所述图片高度限制条件为高度门限值，且所述预选裁剪框的高度未在所述高度门限值范围内，则确定所述预选裁剪框的尺寸不满足所述图片高度限制条件。

进一步的，若所述图片宽度限制条件为宽度定值，则响应于待编辑图片的裁剪操作，且所述预选裁剪框的宽度固定为所述宽度定值；

若所述图片宽度限制条件为高度定值，则响应于待编辑图片的裁剪操作，且所述预选裁剪框的高度固定为所述高度定值。

进一步的，在确定所述图片宽度限制条件包括宽度定值或宽度门限值，或者，确定所述图片高度限制条件包括高度定值或高度门限值之后，在响应于待编辑图片的裁剪操作，得到预选裁剪框之前，所述方法还包括：

识别所述待编辑图片的宽度或高度；

若所述待编辑图片的宽度小于所述宽度定值，或者小于所述宽度门限值的下限值，则确定所述待编辑图片不满足所述上传限制条件，并生成提示信息；

若所述待编辑图片的高度小于所述高度定值，或者小于所述高度门限值的下限值，则确定所述待编辑图片不满足所述上传限制条件，并生成提示信息。

进一步的，响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定所述待编辑图片的预先分析结果，包括：

响应于待编辑图片的裁剪操作，得到预选裁剪框；

确定所述预选裁剪框的内预选图片的大小不在所述图片文件大小门限值范围内，则确定所述待编辑图片的预先分析结果为不满足所述上传限制条件。

进一步的，响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定所述待编辑图片的预先分析结果，包括：

响应于待编辑图片的裁剪操作，得到预选裁剪框；

若所述预选裁剪框的范围超过待编辑图片的边界范围，则确定所述待编辑图片需要进行图片边界填充，则确定所述预选裁剪框进行回弹处理，以使所述预选裁剪框回弹至禁止图片边界填充的最大范围。

第二方面，本申请实施例提供了一种页面上传图片的编辑响应装置，该装置包括：

待编辑图片确定模块，用于若检测到页面上传图片的事件，则获取上传要求数据，并确定待编辑图片；

上传限制条件确定模块，用于根据所述上传要求数据，确定上传限制条件；其中，所述上传限制条件包括动态限制条件和/或静态限制条件；

预先分析结果确定模块，用于响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定编辑图片时的预先分析结果；

编辑操作识别模块，用于若所述预先分析结果为不满足所述上传限制条件，则确定当前编辑操作无效。

第三方面，本申请实施例提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请实施例所述的页面上传图片的编辑响应方法。

第四方面，本申请实施例提供了一种电子设备，包括存储器，处理器及存储在存储器上并可在处理器运行的计算机程序，所述处理器执行所述计算机程序时实现如本申请实施例所述的页面上传图片的编辑响应方法。

本申请实施例所提供的技术方案，可以预先获知上传要求数据，并在待编辑图片的编辑过程中，对编辑得到的图片是否满足上传要求数据进行预先分析，根据预先分析结果确定是否能够进行上传，并反馈给用户。这样，通过集成于页面中的图片编辑组件，进行上传需求的读取，应在用户编辑图片的过程中进行预先分析，从而提高用户的图片上传效率。

附图说明

图1是本申请实施例一提供的页面上传图片的编辑响应方法的流程图；

图2是本申请实施例二提供的页面上传图片的编辑响应方法的流程图；

图3是本申请实施例三提供的页面上传图片的编辑响应方法的流程图；

图4是本申请实施例四提供的页面上传图片的编辑响应装置的结构框图；

图5是本申请实施例六提供的一种电子设备的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释本申请，而非对本申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本申请相关的部分而非全部结构。

在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各步骤描述成顺序的处理，但是其中的许多步骤可以被并行地、并发地或者同时实施。此外，各步骤的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

实施例一

图1是本申请实施例一提供的页面上传图片的编辑响应方法的流程图，本实施例可适用于页面中上传图片的场景，该方法可以由本申请实施例所提供的页面上传图片的编辑响应装置执行，该装置可以由软件和/或硬件的方式来实现，并可集成于电子设备中。

本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

如图1所示，所述页面上传图片的编辑响应方法包括：

S110，若检测到页面上传图片的事件，则获取上传要求数据，并确定待编辑图片。

其中，页面上传图片的事件可以是当检测到用户通过浏览器、应用页面或者其他进行图片的裁剪和上传的事件。具体的，可以是在移动终端、智能终端甚至具有独立图片处理能力的显示设备等，如手机、平板电脑、电脑和个人数字助理等。

本方案可以由图片处理组件执行。图片处理组件可以是由图片裁剪和上传的代码构成的具有一定功能的代码段。该代码段可以支持用户对于图片的获取操作，如拍摄、下载以及选择等，同时可以支持上传操作，例如提供图片上传的接口，另外，还能够支持图片的编辑操作。例如，用户可以使用组件所提供的工具对图片进行修剪、亮度调节、比例调节甚至像素点颜色修改等操作。

可以理解的，对于图片编辑操作的目标是满足上传的要求。而不同的页面中上传要求数据对图片的大小、格式等是各不相同的，因此需要能够对上传要求数据进行读取。例如，读取当前需要上传的图片为2寸照片，则需要对图片的尺寸有明确的限定，例如是A*B个像素点。在这种情况下，可以通过读取文字内容或者读取其他参数数据来确定上传要求数据。

S120，根据所述上传要求数据，确定上传限制条件；其中，所述上传限制条件包括动态限制条件和/或静态限制条件。

其中，在明确上传要求数据之后，可以根据该数据确定图片裁剪或者其他处理过程的限制条件。例如，限制图片的水平方向的像素点个数和竖直方向的像素点个数。还可以只限制水平方向或者竖直方向的像素点个数，例如，限制条件为上传图片的竖直方向的像素点个数为640，则用户裁剪图片时，可以裁剪水平方向任意长度，而竖直高度只能是640个像素点的图片。

具体的，可以是用户进行裁剪、修改像素点的像素值以及添加贴纸等过程中，对于所得到的图片进行实时的识别，以得到图片的实时信息。并确定所述实时信息是否满足上传限制条件。因此，上传限制条件可以是基于上传要求数据确定的条件信息。限制过程可以是对用户编辑图片过程中得到的图片进行实时的识别，如果一旦发现不满足，就限制用户编辑，例如，禁止上传，或者撤销本次编辑操作等等。

本方案中，可选的，所述静态限制条件包括图片分辨率限制条件以及禁止图片边界填充限制条件；所述动态限制条件包括图片宽度限制条件和/或图片高度限制条件，以及图片文件大小门限值。

其中，静态限制条件可以是待编辑图片的属性中不会因为用户的编辑操作而修改的信息。例如，静态限制条件包括图片分辨率限制条件以及禁止图片边界填充限制条件。可以理解的，分辨率限制条件，是上传的图片的分辨率进行限制的。而待编辑图片的编辑操作不会引发图片的分辨率的变化。因此，该静态限制条件可以是图片分辨率限制条件。另外，还包括禁止图片边界填充限制条件，此处边界填充是图片在经过裁剪之后，图片边框已经超过了原有的图片范围，这种情况下，就需要对超出的部分进行像素点的填充，一般的，所填充的像素点的颜色设置为白色。因此，禁止图片边界填充限制条件，可以理解为禁止裁剪框大于原有图片范围的限制条件。

除此之外，动态限制条件包括图片宽度限制条件和/或图片高度限制条件，以及图片文件大小门限值。具体的，图片宽度限制条件和/或图片高度限制条件，可以是图片的宽度或者高度，限制之后可以将其确定为一个明确的数值，例如2英寸，或者480个像素点。图片文件大小门限值，即为图片的文件大小应该在多少个字节范围内，例如小于2MB，或者大于256KB，或者在1MB-2MB之间。

本方案通过上述几种对上传限制条件的限定，可以更好的辅助确定图片编辑过程中哪些操作是可以满足最终图片上传要求的，从而提高用户的操作效率。避免出现用户上传后图片不满足上传要求，而重新制作和上传所带来的时间消耗。

S130，响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定编辑图片时的预先分析结果。

其中，例如编辑操作为裁剪操作，可以根据裁剪操作得到的裁剪框内部的图片的属性，确定是否满足动态限制条件和/或静态限制条件，进而得到预先分析结果。

在用户裁剪过程中，可以响应于用户的裁剪操作，例如一般的裁剪方式为用户输入的第一个点位为图片的左上角、左下角、右上角或者右下角的点位，输入的第二个点位为与第一个点位斜对角的点位。当限制条件明确后，则在裁剪过程中只能够按照限定条件来裁剪，例如限定条件为竖直高度固定，则裁剪过程中，裁剪得到的图片的高度只能够为该固定值，也就是第一点位的纵坐标决定了第二点位的纵坐标，例如竖直高度固定为640，若第一点位的纵坐标为1000，则第二点位的纵坐标只能够是360或者1640，而横坐标用户可以根据自己的需求来任意选取。

本示例中，可以在裁剪框的某一个固定位置，鼠标拖动时鼠标光标的位置来显示裁剪框的属性信息。属性信息可以是用来表征裁剪框大小，例如高度和宽度，还可以是包括裁剪框中图片的属性的信息，例如亮度均值，裁剪后图片的大小，如2MB，500KB等。通过对属性信息的显示，可以辅助用户明确当前裁剪框的限制条件，避免用户所裁剪的结果多次不能够符合上传要求，或者用户不明白为什么不能够按照自己的意愿来进行裁剪。

S140，若所述预先分析结果为不满足所述上传限制条件，则确定当前编辑操作无效。

可以理解的，如果预先分析结果为不满足所述上传限制条件，则确定当前用户的编辑结果如果上传到页面，是会被认为不符合上传要求而退回的。因此，可以在确定不满足所述上传限制条件的情况下，提醒用户当前的编辑结果不符合条件，并撤销当前的编辑操作，或者说确定当前编辑操作无效，供用户重新进行操作。

本方案中，确定当前编辑操作无效，可以是确定当前的一个操作步骤无效，例如裁剪框的裁剪不符合条件时，可以确定裁剪框无效，供用户在待编辑图片上面进行重新裁剪。还有一种情况，可以是确定当前待编辑图片的所有编辑操作均无效。例如，用户确定裁剪框之后，对像素点进行了修改，如果发现修改后的像素点的像素值不满足上传要求，则确定裁剪和修改像素点两个操作均无效。具体的，采用的撤销方式可以根据实际场景来确定。本方案通过这样的设置，可以提高用户在应对页面图片上传需求时的操作效率。

本实施例中，具体的，对于图片上传时用户的编辑操作可以利用人工智能+中的图像识别技术获取到图像的信息，例如图像中的内容信息等，还可以通过目标检测，例如人脸检测、瞳孔检测等，确定图像是否符合上传要求，如确定图像是否为寸照图片等，除此之外，还可以通过图像匹配等方式将用户编辑的图片与上传要求图片模板进行图像匹配。本方案通过上述手段，可以基于人工智能的相关技术，解决图片上传效率低的技术问题，达到提高用户在页面中上传图片的效率，避免无效编辑或者重复编辑的效果。

本申请实施例所提供的技术方案，可以预先获知上传要求数据，并在待编辑图片的编辑过程中，对编辑得到的图片是否满足上传要求数据进行预先分析，根据预先分析结果确定是否能够进行上传，并反馈给用户。这样，通过集成于页面中的图片编辑组件，进行上传需求的读取，应在用户编辑图片的过程中进行预先分析，从而提高用户的图片上传效率。

在本实施例中，可选的，所述上传限制条件还包括用户选择待编辑图片的选择限制条件；

所述方法还包括：

若所述用户选择的待编辑图片不满足所述选择限制条件的下限，则确定所选择的待编辑图片不满足所述上传限制条件。

本方案中，可以将上传限制条件中对于图片的基本的属性信息进行限制的，作为待编辑图片的选择限制条件。例如图片文件大小不小于2MB的限制条件，如果用户所选择的图片大小小于2MB，则无论用户如何进行编辑操作都不会满足该限制条件，因此，可以将上传限制条件中筛选出选择限制条件，以在用户选择待编辑图片的过程中进行预先分析，并在不满足选择限制条件的情况下，直接提示所选择的待编辑图片不能够满足上传要求，建议用户重新选择。

本方案通过这样的设置，可以在用户对待编辑图片进行选择的过程中就能够进行预先分析，从而对于用户选择了不满足条件的待编辑图片进行快速的反馈，从而提高用户的图片上传效率，避免用户的无效编辑操作。

实施例二

图2是本申请实施例二提供的页面上传图片的编辑响应方法的流程图，本实施例以上述实施例为基础进行优化。具体优化为：响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定所述待编辑图片的预先分析结果，包括：读取编辑操作时得到的实际分辨率；其中，所述实际分辨率是基于所述待裁剪图片的基础分辨率和所述待裁剪图片的被压缩比例，以及裁剪框的宽高比与图片宽高比确定的；其中，所述裁剪框为编辑图片时得到的预选裁剪框；若所述实际分辨率不满足所述图片分辨率限制条件，则确定所述待编辑图片的预先分析结果为不满足所述上传限制条件。

如图2所示，本实施例的方法具体包括如下步骤：

S210，若检测到页面上传图片的事件，则获取上传要求数据，并确定待编辑图片。

S220，根据所述上传要求数据，确定上传限制条件；其中，所述上传限制条件包括动态限制条件和/或静态限制条件。

S230，读取编辑操作时得到的实际分辨率；其中，所述实际分辨率是基于所述待裁剪图片的基础分辨率和所述待裁剪图片的被压缩比例，以及裁剪框的宽高比与图片宽高比确定的；其中，所述裁剪框为编辑图片时得到的预选裁剪框。

其中，待裁剪图片的基础分辨率就是用户选择待裁剪图片之后读取到的分辨率。被压缩比例即为原图片很大的情况下，如果采用宽高的压缩处理，得到的压缩比例的大小。而裁剪框的宽高比，即为用户编辑时产生的裁剪框的宽度和高度的比例。图片宽高比，可以是待裁剪图片的宽高比。

示例性的，例如，一张图片的基础分辨率为1000*1000，如果被压缩比例是10，则压缩后得到的图片大小为100*100，且可以确定图片的宽高比为1:1。如果此时裁剪框的宽度为100，高度为50，即裁剪框的宽高比为2:1，则实际分辨率为1000*500。

S240，若所述实际分辨率不满足所述图片分辨率限制条件，则确定所述待编辑图片的预先分析结果为不满足所述上传限制条件。

若上传限制条件中，图片分辨率限制条件为图片的分辨率不低于1024*768，而上面得到的裁剪框中的图片的分辨率为1000*500，低于1024*768。在这种情况下，可以确定实际分辨率不满足所述图片分辨率限制条件。

相反的，如果上传限制条件中，图片分辨率限制条件为图片的分辨率不低于512*256，而上面得到的裁剪框中的图片的分辨率为1000*500，高于512*256。在这种情况下，可以确定实际分辨率是满足所述图片分辨率限制条件的。

S250，若所述预先分析结果为不满足所述上传限制条件，则确定当前编辑操作无效。

可以理解的，如果确定为不满足所述上传限制条件，则确定当前编辑操作无效。可以撤销本次裁剪框的选择，或者撤销用户在选择待编辑图片之后对待编辑图片的所有操作。

本方案通过这样的设置，可以在用户对待编辑图片进行编辑操作的过程中，对编辑得到的图片的实际分辨率进行计算，并确定是否符合上传限制条件，一旦不符合，确定编辑操作无效，供用户进行重新编辑，从而提高用户的图片处理效率。

实施例三

图3是本申请实施例三提供的页面上传图片的编辑响应方法的流程图，本实施例以上述实施例为基础进行优化。具体优化为：响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定所述待编辑图片的预先分析结果，包括：响应于待编辑图片的裁剪操作，得到预选裁剪框；确定所述预选裁剪框的尺寸是否满足所述图片宽度限制条件和/或图片高度限制条件；若所述预选裁剪框不满足所述图片宽度限制条件和/或图片高度限制条件，则确定所述待编辑图片的预先分析结果为不满足所述上传限制条件。

如图3所示，本实施例的方法具体包括如下步骤：

S310，若检测到页面上传图片的事件，则获取上传要求数据，并确定待编辑图片。

S320，根据所述上传要求数据，确定上传限制条件；其中，所述上传限制条件包括动态限制条件和/或静态限制条件。

S330，响应于待编辑图片的裁剪操作，得到预选裁剪框。

示例性的，用户点击并拖动鼠标，得到的一个框选范围即为预选裁剪框。对于用户的裁剪操作的识别，可以通过识别用户框选的操作确定，还可以是识别用户点击裁剪工具的操作来识别。本方案中可以设置相应的裁剪工具的选择键，如果用户点击，则确定用户需要裁剪待编辑图片，进而进行编辑操作。

S340，确定所述预选裁剪框的尺寸是否满足所述图片宽度限制条件和/或图片高度限制条件。

其中，通过读取预选裁剪框的尺寸，可以确定预选图片的宽度信息和高度信息，进一步的，可以根据所得到的宽度信息和高度信息与上传限制条件中的宽度限制条件和/或图片高度限制条件进行比较，确定是否满足条件。

在本实施例中，可选的，所述图片宽度限制条件包括宽度定值或宽度门限值；

所述图片高度限制条件包括高度定值或高度门限值；

确定所述预选裁剪框的尺寸是否满足所述图片宽度限制条件和/或图片高度限制条件，包括：

若所述图片宽度限制条件为宽度定值，且所述预选裁剪框的宽度与所述宽度定值不同，则确定所述预选裁剪框的尺寸不满足所述图片宽度限制条件；

若所述图片宽度限制条件为宽度门限值，且所述预选裁剪框的宽度未在所述宽度门限值范围内，则确定所述预选裁剪框的尺寸不满足所述图片宽度限制条件；

若所述图片高度限制条件为高度定值，且所述预选裁剪框的高度与所述高度定值不同，则确定所述预选裁剪框的尺寸不满足所述图片高度限制条件；

若所述图片高度限制条件为高度门限值，且所述预选裁剪框的高度未在所述高度门限值范围内，则确定所述预选裁剪框的尺寸不满足所述图片高度限制条件。

其中，宽度定值，可以是宽度的固定值，例如限制所裁剪的图片的宽度必须是500个像素点。宽度门限值，可以是宽度的范围值，例如限制所裁剪的图片的宽度范围在320-480个像素点之间。高度定值和高度门限值也是相同的逻辑。

本方案中，若所述图片宽度限制条件为宽度定值，且所述预选裁剪框的宽度与所述宽度定值不同，则确定所述预选裁剪框的尺寸不满足所述图片宽度限制条件；若所述图片宽度限制条件为宽度门限值，且所述预选裁剪框的宽度未在所述宽度门限值范围内，则确定所述预选裁剪框的尺寸不满足所述图片宽度限制条件；若所述图片高度限制条件为高度定值，且所述预选裁剪框的高度与所述高度定值不同，则确定所述预选裁剪框的尺寸不满足所述图片高度限制条件；若所述图片高度限制条件为高度门限值，且所述预选裁剪框的高度未在所述高度门限值范围内，则确定所述预选裁剪框的尺寸不满足所述图片高度限制条件。

本技术方案通过这样的设置，可以根据限制条件对裁剪框进行单向限制，实现更多对于图片上传需求的页面的场景，提高用户的操作体验。

在上述技术方案的基础上，可选的，若所述图片宽度限制条件为宽度定值，则响应于待编辑图片的裁剪操作，且所述预选裁剪框的宽度固定为所述宽度定值；若所述图片宽度限制条件为高度定值，则响应于待编辑图片的裁剪操作，且所述预选裁剪框的高度固定为所述高度定值。

其中，如果限定条件为高度定值或者宽度定值，则可以在用户裁剪的过程中，直接将高度或者宽度限制在该定值上，也就是裁剪时，宽度固定为该定值，只有高度可以随用户操作自由伸缩，或者高度固定在该定值，宽度可以随用户操作自由伸缩。本方案通过这样的设置，可以辅助用户直接完成满足要求的预选裁剪框的确定，避免重复操作。

S350，若所述预选裁剪框不满足所述图片宽度限制条件和/或图片高度限制条件，则确定所述待编辑图片的预先分析结果为不满足所述上传限制条件。

可以理解的，如果预选裁剪框不满足图片宽度限制条件和/或图片高度限制条件，则可以确定预先分析结果不满足上传限制条件。

S360，若所述预先分析结果为不满足所述上传限制条件，则确定当前编辑操作无效。

可以理解的，如果确定为不满足所述上传限制条件，则确定当前编辑操作无效。可以撤销本次裁剪框的选择，或者撤销用户在选择待编辑图片之后对待编辑图片的所有操作。

本方案通过这样的设置，可以在用户对待编辑图片进行编辑操作的过程中，进行单向限制，并且可以进行单向的多种形式的限制。该方案可以应对各种特殊的图片上传时的限制条件，并在用户裁剪过程中有所体现，便于用户快速的得到满足用户需求的图片。

本方案通过这样的设置，可以在用户对待编辑图片进行裁剪的过程中，对预选裁剪框进行识别并分析是否满足上传限制条件。如果不满足上传限制条件，则在第一时间进行撤销操作和提醒，供用户能够及时发现，从而可以提高用户在编辑图片过程中的编辑效率，避免无效的编辑操作。

在上述各技术方案的基础上，可选的，响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定所述待编辑图片的预先分析结果，包括：

响应于待编辑图片的裁剪操作，得到预选裁剪框；

确定所述预选裁剪框的内预选图片的大小不在所述图片文件大小门限值范围内，则确定所述待编辑图片的预先分析结果为不满足所述上传限制条件。

预选图片的大小，可以是预选图片的文件大小，例如得到的预选图片的文件大小为300KB。本方案中，可以将该预选图片的大小与图片文件大小门限值进行比较，如果在门限值范围内，例如门限值是大于200KB，则可以确定预选裁剪框内的预选图片满足上传限制条件。本方案通过这样的设置，可以为预先对用户裁剪的图片进行识别，避免裁剪的图片过小或者过大导致无法上传，或者上传后不满足条件被退回的情况。

在上述各技术方案的基础上，可选的，响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定所述待编辑图片的预先分析结果，包括：

响应于待编辑图片的裁剪操作，得到预选裁剪框；

若所述预选裁剪框的范围超过待编辑图片的边界范围，则确定所述待编辑图片需要进行图片边界填充，则确定所述预选裁剪框进行回弹处理，以使所述预选裁剪框回弹至禁止图片边界填充的最大范围。

本方案中，若检测到所述裁剪框的边界超过了待裁剪图片的边界线，则确定所述裁剪操作无效，将裁剪框回弹至待裁剪图片的边界线以内；若回弹后不满足限制条件，则确定本次裁剪无效。

本方案提供了一种超越边界线后对裁剪框进行回弹操作的方案，这样设置是针对现有图片裁剪过程中，会对补充的部分进行空白填充。但是这种空白填充方式会带来影响待裁剪图片的大小或者填充后颜色出现及其不一致的情况。

具体的，实现逻辑如下：图片在任意改变时获取现有截图的大小，针对不同情况的判断条件，比较截图是否合法，把不符合的宽高强行弹回符合标准的值，保证图片有效性。

在上述各实施例中，本方案给出了几种上传要求数据下如何确定限制条件，以及在用户裁剪过程中如何体现限制条件，可以极大的提高用户的图片处理效率，同时还能够让用户直观感受到，便于用户的操作和使用。

其中，针对不同的属性信息，可以通过差异化的显示来使得用户能够更加明确的察觉到，便于用户裁剪过程了解如何去选择裁剪范围，提高图片的处理效率。并且，本方案可以通过在不满足限制条件时，显示裁剪结束时的裁剪框作为参考线，可以供用户更加快速的裁剪出符合自己意愿和上传要求数据的图片。

本方案能够符合复杂的裁剪设定，可以根据需求设置图片的各种限制属性，支持设定固定宽高、固定宽高比例、某一个方向固定大小、图片拖拽不符合需求自动回弹、图片上传前优先验证图片是否符合设置的最低分辨率、图片拉伸、图片旋转、显示用户裁剪出图片的最终分辨率等。极大的优化了用户体验并满足系统设计需求。

本方案，针对普通的裁剪工具不支持只设定一个方向的大小，然后另外一边可以任意改变，本方案的支持。普通的裁剪工具都是独立的一个组件来扩展实现，和普通的上传无法合并处理。本方案的是扩展了ElementUI的upload组件，通过开关来控制是否上传的图片需要裁剪，并提供新的属性来设置裁剪的配置。普通的裁剪工具没有实现上传前检查图片的分辨率是否符合需求，本方案的会在用户选择图片后通过新建一个Image对象来转化用户上传的文件，然后读取它的宽高值，和设定的最低限制做比较，符合的才会弹出图片裁剪框，可以提前阻止不符合的图片。普通的裁剪工具无法让用户知道他选定的区域最终的分辨率是多少，本方案的默认显示出最终的截取区域分辨率，很直观。普通的裁剪工具在用户任意改变裁剪框大小，某个方向超出图片显示区域后会是空白的。本方案会做边界判断，根据用户设定的最大宽高或者宽高比，将超出边界的那边做回调。默认使用最宽边填充模式，方便用户在完整图上做截取，同时采用裁剪比例来从原图中生成裁剪图。

实施例四

图4是本申请实施例四提供的页面上传图片的编辑响应装置的结构框图，该装置可执行本申请任意实施例所提供的页面上传图片的编辑响应方法，具备执行方法相应的功能模块和有益效果。

如图4所示，该装置可以包括：

待编辑图片确定模块410，用于若检测到页面上传图片的事件，则获取上传要求数据，并确定待编辑图片；

上传限制条件确定模块420，用于根据所述上传要求数据，确定上传限制条件；其中，所述上传限制条件包括动态限制条件和/或静态限制条件；

预先分析结果确定模块430，用于响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定编辑图片时的预先分析结果；

编辑操作识别模块440，用于若所述预先分析结果为不满足所述上传限制条件，则确定当前编辑操作无效。

上述产品可执行本申请实施例所提供的页面上传图片的编辑响应方法，具备执行方法相应的功能模块和有益效果。

实施例五

本申请实施例五提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本申请所有发明实施例提供的页面上传图片的编辑响应方法：

若检测到页面上传图片的事件，则获取上传要求数据，并确定待编辑图片；

根据所述上传要求数据，确定上传限制条件；其中，所述上传限制条件包括动态限制条件和/或静态限制条件；

响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定编辑图片时的预先分析结果；

若所述预先分析结果为不满足所述上传限制条件，则确定当前编辑操作无效。

可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

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

计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括——但不限于——无线、电线、光缆、RF等等，或者上述的任意合适的组合。

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

实施例六

本申请实施例六提供了一种电子设备。图5是本申请实施例六提供的一种电子设备的结构示意图。如图5所示，本实施例提供了一种电子设备500，其包括：一个或多个处理器520；存储装置510，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器520执行，使得所述一个或多个处理器520实现本申请实施例所提供的页面上传图片的编辑响应方法，该方法包括：

若检测到页面上传图片的事件，则获取上传要求数据，并确定待编辑图片；

根据所述上传要求数据，确定上传限制条件；其中，所述上传限制条件包括动态限制条件和/或静态限制条件；

响应于待编辑图片的编辑操作，根据所述动态限制条件和/或静态限制条件，确定编辑图片时的预先分析结果；

若所述预先分析结果为不满足所述上传限制条件，则确定当前编辑操作无效。

当然，本领域技术人员可以理解，处理器520还实现本申请任意实施例所提供的页面上传图片的编辑响应方法的技术方案。

图5显示的电子设备500仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图5所示，该电子设备500包括处理器520、存储装置510、输入装置530和输出装置540；电子设备中处理器520的数量可以是一个或多个，图5中以一个处理器520为例；电子设备中的处理器520、存储装置510、输入装置530和输出装置540可以通过总线或其他方式连接，图5中以通过总线550连接为例。

存储装置510作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块单元，如本申请实施例中的页面上传图片的编辑响应方法对应的程序指令。

存储装置510可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端的使用所创建的数据等。此外，存储装置510可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储装置510可进一步包括相对于处理器520远程设置的存储器，这些远程存储器可以通过网络连接。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置530可用于接收输入的数字、字符信息或语音信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入。输出装置540可包括显示屏、扬声器等电子设备。

本申请实施例提供的电子设备，可以预先获知上传要求数据，并在待编辑图片的编辑过程中，对编辑得到的图片是否满足上传要求数据进行预先分析，根据预先分析结果确定是否能够进行上传，并反馈给用户。这样，通过集成于页面中的图片编辑组件，进行上传需求的读取，应在用户编辑图片的过程中进行预先分析，从而提高用户的图片上传效率。

上述实施例中提供的页面上传图片的编辑响应装置、介质及电子设备可执行本申请任意实施例所提供的页面上传图片的编辑响应方法，具备执行该方法相应的功能模块和有益效果。未在上述实施例中详尽描述的技术细节，可参见本申请任意实施例所提供的页面上传图片的编辑响应方法。

注意，上述仅为本申请的较佳实施例及所运用技术原理。本领域技术人员会理解，本申请不限于这里所述的特定实施例，对本领域技术人员来说能够进行各种明显的变化、重新调整和替代而不会脱离本申请的保护范围。因此，虽然通过以上实施例对本申请进行了较为详细的说明，但是本申请不仅仅限于以上实施例，在不脱离本申请构思的情况下，还可以包括更多其他等效实施例，而本申请的范围由所附的权利要求范围决定。