图像预览方法、装置、设备及存储介质与流程

本发明实施例涉及图像预览技术领域，尤其涉及一种基于reactnative的图像预览方法、装置、设备及存储介质。

背景技术：

现如今，移动终端所使用的操作系统绝大多数为android系统和ios系统，其中，android系统是由google公司开发的操作系统，ios系统是由苹果公司的移动操作系统，这两大移动操作系统完全不同。

现有技术中，编程人员在编写移动终端中的应用程序时，需要针对android系统和ios系统编写两个版本的应用程序，浪费了大量的人力物力，使得应用程序的开发成本较高，开发效率较低。

webapp是指基于web的系统和应用，其可以向广大的用户发布一组复杂的内容和功能。虽然同时针对android系统和ios系统可以只编写一个版本的webapp，但是webapp的手势识别性能较差，其难以顺畅地对手势操作进行响应。例如，在通过用户的手势操作触发图像预览时，会出现卡顿的现象，难以顺畅地显示预览图像。

技术实现要素：

有鉴于此，本发明实施例提供了一种图像预览方法、装置、设备及存储介质，以优化现有的应用程序的图像预览方法，降低了移动终端的应用程序的开发成本。

在第一方面，本发明实施例提供了一种基于reactnative的图像预览方法，包括：

获取操作界面转换指令；

如果所述操作界面转换指令对应的转换后的操作界面为设定图像预览界面，则调用基于reactnative的图像预览程序，以使所述图像预览程序根据所述设定图像预览界面对应的用户操作显示预览图像。

在上述方法中，可选的是，所述用户操作为手势操作。

在上述方法中，可选的是，所述图像预览程序根据所述设定图像预览界面对应的用户操作显示预览图像，包括：

通过所述图像预览程序，判断用户对所述设定图像预览界面中的目标图像的操作是否为预览操作；

如果为预览操作，则通过所述图像预览程序显示所述目标图像的预览图像。

在上述方法中，可选的是，所述通过所述图像预览程序显示所述目标图像的预览图像，包括：

通过所述图像预览程序，根据所述目标图像在屏幕中的位置，确定所述目标图像的预览图像的显示位置；

通过所述图像预览程序，将所述预览图像在所述显示位置上进行显示。

在上述方法中，可选的是，所述通过所述图像预览程序，根据所述目标图像在屏幕中的位置，确定所述目标图像的预览图像的显示位置，具体包括：

通过所述图像预览程序，根据所述目标图像的上边缘线与屏幕的上边缘线之间的距离与所述预览图像的图像高度的比值，确定所述预览图像的显示位置。

在上述方法中，可选的是，所述预览操作为长按；

在所述通过所述图像预览程序显示所述目标图像的预览图像之后，还包括：

通过所述图像预览程序，判断所述用户是否通过与所述预览操作相连的滑动操作更新目标图像；

如果所述用户通过与所述预览操作相连的滑动操作更新目标图像，则通过所述图像预览程序更新预览图像。

在上述方法中，可选的是，所述通过所述图像预览程序显示所述目标图像的预览图像，具体包括：

关闭scrollview滚动响应之后，通过所述图像预览程序显示所述目标图像的预览图像。

在第二方面，本发明实施例提供了一种基于reactnative的图像预览装置，包括：

转换指令获取模块，用于获取操作界面转换指令；

程序调用模块，用于如果所述操作界面转换指令对应的转换后的操作界面为设定图像预览界面，则调用基于reactnative的图像预览程序，以使所述图像预览程序根据所述设定图像预览界面对应的用户操作显示预览图像。

在第三方面，本发明实施例提供了一种设备，所述设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本发明任意实施例所述的基于reactnative的图像预览方法。

在第四方面，本发明实施例提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如本发明任意实施例所述的基于reactnative的图像预览方法。

本发明实施例提供了一种图像预览方法、装置、设备及存储介质，通过在应用程序进入图像预览界面时，调用基于reactnative的图像预览程序，实现根据用户操作显示预览图像，解决了现有技术中需要针对不同的移动操作系统编写不同的内置于应用程序或可被应用程序调用的图像预览程序模块，导致应用程序开发成本增加以及开发效率降低的技术缺陷，实现了降低基于android系统以及ios系统的应用程序的开发成本，且提高了应用程序的开发效率。

附图说明

图1是本发明实施例一提供的一种基于reactnative的图像预览方法的流程图；

图2是本发明实施例二提供的一种基于reactnative的图像预览方法的流程图；

图3是本发明实施例三提供的一种基于reactnative的图像预览方法的流程图；

图4是本发明实施例四提供的一种基于reactnative的图像预览装置的结构图；

图5是本发明实施例五提供的一种设备的结构图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面结合附图对本发明具体实施例作进一步的详细描述。可以理解的是，此处所描述的具体实施例仅仅用于解释本发明，而非对本发明的限定。

另外还需要说明的是，为了便于描述，附图中仅示出了与本发明相关的部分而非全部内容。在更加详细地讨论示例性实施例之前应当提到的是，一些示例性实施例被描述成作为流程图描绘的处理或方法。虽然流程图将各项操作(或步骤)描述成顺序的处理，但是其中的许多操作可以被并行地、并发地或者同时实施。此外，各项操作的顺序可以被重新安排。当其操作完成时所述处理可以被终止，但是还可以具有未包括在附图中的附加步骤。所述处理可以对应于方法、函数、规程、子例程、子程序等等。

实施例一

图1为本发明实施例一提供的一种基于reactnative的图像预览方法的流程图，本实施例的方法可以由基于reactnative的图像预览装置来执行，该装置可通过硬件和/或软件的方式实现，并一般可集成于设备中，例如移动终端、服务器等。本实施例的方法具体包括：

s101、获取操作界面转换指令。

在本实施例中，操作界面具体是指用于接收并执行用户操作的应用程序的操作界面。操作界面转换指令具体是指从当前操作界面转换至其他操作界面的指令。

s102、如果操作界面转换指令对应的转换后的操作界面为设定图像预览界面，则调用基于reactnative的图像预览程序，以使图像预览程序根据设定图像预览界面对应的用户操作显示预览图像。

可以理解的是，用户在使用应用程序时，经常会进行操作界面的转换。应用程序在启动不同的操作界面时，可能会调用不同的程序模块。

在本实施例中，如果操作界面转换指令对应的转换后的操作界面为设定图像预览界面，则会调用基于reactnative的图像预览程序，并通过该图像预览程序实现设定图像预览界面对应的各种程序功能。基于reactnative的图像预览程序既可以是应用程序包括的一个程序模块，也可以是独立于应用程序的一个程序模块。其中，基于reactnative的图像预览程序具体是指使用reactnative框架编写的程序。设定图像预览界面具体是指通过基于reactnative的图像预览程序实现的，可与用户进行交互实现图像预览的操作界面。

可知的是，reactnative是一种开源的跨平台移动应用开发框架，它同时支持android系统和ios系统这两大移动操作系统。因此，本实施例中的设定图像预览界面既可以是应用于android系统的应用程序中的操作界面，也可以是应用于ios系统的应用程序中的操作界面。

进一步地，在本实施例中，在调用基于reactnative的图像预览程序之后，就会通过该图像预览程序在设定图像预览界面中获取用户操作，并执行与用户操作对应的图像预览操作。用户操作具体可以是长按操作、双击操作以及单击操作等。与用户操作对应的图像预览操作具体可以是显示用户选中的图像的预览图像、切换预览图像以及退出预览图像等。

本发明实施例提供了一种图像预览方法，通过在应用程序进入图像预览界面时，调用基于reactnative的图像预览程序，实现根据用户操作显示预览图像，解决了现有技术中需要针对不同的移动操作系统编写不同的内置于应用程序或可被应用程序调用的图像预览程序模块，导致应用程序开发成本增加以及开发效率降低的技术缺陷，实现了降低基于android系统以及ios系统的应用程序的开发成本，且提高了应用程序的开发效率。

实施例二

图2是本发明实施例二提供的一种基于reactnative的图像预览方法的流程图。本实施例以上述实施例为基础进行优化，在本实施例中，给出了一种具体化用户操作，以及具体化显示预览图像的步骤的具体实施方式。

相应的，本实施例的方法具体包括：

s201、获取操作界面转换指令。

s202、判断操作界面转换指令对应的转换后的操作界面是否为设定图像预览界面，若是，则执行步骤204，若否，则执行步骤203。

s203、调用转换后的操作界面对应的程序。

在本实施例中，如果操作界面转换指令对应的转换后的操作界面不是设定图像预览界面，则会调用与转换后的操作界面对应的程序。该被调用的程序既可以是基于reactnative的程序，也可以是基于android系统或ios系统的程序，本实施例对此不进行限制。

s204、调用基于reactnative的图像预览程序。

在本实施例中，如果操作界面转换指令对应的转换后的操作界面是设定图像预览界面，则会调用基于reactnative的图像预览程序的图像预览程序以实现步骤205至步骤207。

s205、通过图像预览程序，判断用户对设定图像预览界面中的目标图像的手势操作是否为预览操作，若是，则执行步骤206，若否，则执行步骤207。

在本实施例中，将用户操作具体为手势操作。

可知的是，基于reactnative框架编写的程序具有良好的手势识别能力，可以很好地响应用户的手势操作。因此，基于手势操作的便利性，在本实施例中，将用户操作具体为手势操作。同时，进一步地具体为通过图像预览程序，根据用户的手势操作执行相应的图像预览操作。

在本实施例中，只有用户的手势操作为预设的预览操作时，才会通过图像预览程序显示预览图像，所以，需要先通过本步骤205来对手势操作是否为预览操作进行判断。其中，预览操作典型的可以是长按或双击等。

s206、通过图像预览程序显示目标图像的预览图像。

在本实施例中，如果手势操作为预览操作，则会显示目标图像的预览图像。其中，目标图像具体是指设定图像预览界面中所包括的，上述手势操作的施加对象。

进一步地，目标图像的预览图像在显示之后，既可以在接收到用户的停止预览手势操作时，停止显示目标图像的预览图像，也可以是在显示设定时长之后，停止显示目标图像的预览图像，还可以是在接收到显示其他图像的预览图像的手势操作时，停止显示当前的预览图像等，本实施例对此不进行限制。

s207、通过图像预览程序继续获取用户的手势操作，并返回执行步骤205，直至退出设定图像预览界面。

在本实施例中，如果用户对设定图像预览界面中的目标图像的手势操作不是预览操作，则会继续获取用户的手势操作，然后返回步骤205以再次判定再次获取的手势操作是否为预览操作，直至退出设定图像预览界面。

进一步地，在退出图像预览界面之后，即会停止调用基于reactnative的图像预览程序。

本发明实施例提供了一种基于reactnative的图像预览方法，该方法具体化了用户操作，还具体化了显示预览图像的步骤，使得用户可以通过手势操作，简便地对图像进行预览。

实施例三

图3是本发明实施例三提供的一种基于reactnative的图像预览方法的流程图。本实施例以上述实施例为基础进行优化，在本实施例中，给出了一种具体化显示预览图像的步骤，增加更新预览图像的步骤的具体实施方式。

s301、获取操作界面转换指令。

s302、判断操作界面转换指令对应的转换后的操作界面是否为设定图像预览界面，若是，则执行步骤304，若否，则执行步骤303。

s303、调用转换后的操作界面对应的程序。

s304、调用基于reactnative的图像预览程序。

s305、通过图像预览程序，判断用户对设定图像预览界面中的目标图像的手势操作是否为长按操作，若是，则执行步骤307，若否，则执行步骤306。

由于基于reactnative框架编写的程序可以很好地对用户的手势进行识别和响应，且具体可以依据用户的长按操作以及与长按操作连续的滑动操作实现预览图像的连续切换显示，因此，在本实施例中，将预览操作具体为长按操作，同时增加了步骤309至步骤311。

s306、通过图像预览程序继续获取用户的手势操作，并返回执行步骤305，直至退出设定图像预览界面。

s307、关闭scrollview滚动响应之后，通过图像预览程序，根据目标图像在屏幕中的位置，确定目标图像的预览图像的显示位置。

可知的是，应用程序的视图操作界面一般是在scrollview上呈现的，因此，在接收到用户的长按操作之后，如果用户的手指在屏幕中移动，则会造成手势干扰。因此，在本实施例中，在获取到长按操作之后，首先会关闭scrollview滚动响应，然后再显示目标图像的预览图像。

在本实施例中，在确定手势操作为长按操作之后，首先会根据目标图像在屏幕中的位置，确定目标图像的预览图像的显示位置，然后再显示该预览图像。具体来说，预览图像可以显示在目标图像上边、下边、左边或右边，还可以完全覆盖目标图像，本实施例对此不进行限制。但是应尽量使得预览图像的显示不会过多地影响用户之后的预览操作的实现。

在本实施例中，根据目标图像在屏幕中的位置，确定目标图像的预览图像的显示位置的方法具体可以是通过目标图像的上边缘线、下边缘线、左边缘线或右边缘线在屏幕中的位置来确定预览图像的显示位置。具体来说，可以依据目标图像的上边缘线与屏幕的上边缘线的距离，确定是否在目标图像的上边显示预览图像。

s308、通过图像预览程序，将预览图像在显示位置上进行显示。

s309、通过图像预览程序，判断用户是否通过与长按操作相连的滑动操作更新目标图像，若是，则执行步骤310，若否，则执行步骤311。

在本实施例中，基于reactnative的图像预览程序可以对与用户的长按操作相连的滑动操作进行响应，且会依据该滑动操作确定当前的预览图像。

在本实施例中，判断用户是否通过与长按操作相连的滑动操作更新目标图像具体是指判断用户是否通过与长按操作相连的滑动操作，将手指滑动至设定图像预览界面中的其他图像。

s310、通过图像预览程序更新预览图像。

在本实施例中，如果用户通过与长按操作相连的滑动操作，将手指滑动至设定图像预览界面中的其他图像，则不再继续显示目标图像的预览图像，而是显示上述其他图像的预览图像。

s311、继续显示原预览图像。

在本实施例中，如果用户通过与长按操作相连的滑动操作，未将手指滑动至设定图像预览界面中的其他图像，则继续显示目标图像的预览图像，

本发明实施例提供了一种基于reactnative的图像预览方法，该方法具体化了显示预览图像的步骤，使得预览图像可以在恰当的位置进行显示，提高了预览图像显示有效性，还可使得用户后续的图像预览操作更加便利，增加了更新预览图像的步骤，提高了用户预览图像的便利性，进而提高了用户的使用体验。

在上述各实施例的基础上，将通过图像预览程序，根据目标图像在屏幕中的位置，确定目标图像的预览图像的显示位置，具体为：通过图像预览程序，根据目标图像的上边缘线与屏幕的上边缘线之间的距离与预览图像的图像高度的比值，确定预览图像的显示位置。

这样设置的好处是：可以保证预览图像显示的有效性。

实施例四

图4是本发明实施例四提供的一种基于reactnative的图像预览装置的结构图。如图4所示，所述装置包括：转换指令获取模块401以及程序调用模块402，其中：

转换指令获取模块401，用于获取操作界面转换指令；

程序调用模块402，用于如果操作界面转换指令对应的转换后的操作界面为设定图像预览界面，则调用基于reactnative的图像预览程序，以使图像预览程序根据设定图像预览界面对应的用户操作显示预览图像。

本发明实施例提供了一种基于reactnative的图像预览装置，该装置首先通过转换指令获取模块401获取操作界面转换指令，然后，如果操作界面转换指令对应的转换后的操作界面为设定图像预览界面，则通过程序调用模块402调用基于reactnative的图像预览程序，以使图像预览程序根据设定图像预览界面对应的用户操作显示预览图像。

该装置解决了现有技术中需要针对不同的移动操作系统编写不同的内置于应用程序或可被应用程序调用的图像预览程序模块，导致应用程序开发成本增加以及开发效率降低的技术缺陷浪费了大量人力物力，提高了应用程序的开发成本，降低了开发效率的技术缺陷，实现了降低基于android系统以及ios系统的应用程序的开发成本，且提高了应用程序的开发效率。

在上述各实施例的基础上，用户操作可以为手势操作。

在上述各实施例的基础上，程序调用模块可以包括：

判断单元，用于通过图像预览程序，判断用户对设定图像预览界面中的目标图像的操作是否为预览操作；

图像显示单元，用于如果为预览操作，则通过图像预览程序显示目标图像的预览图像。

在上述各实施例的基础上，图像显示单元可以包括：

位置确定子单元，用于通过图像预览程序，根据目标图像在屏幕中的位置，确定目标图像的预览图像的显示位置；

位置显示子单元，用于通过图像预览程序，将预览图像在显示位置上进行显示。

在上述各实施例的基础上，位置确定子单元具体可以用于：

通过图像预览程序，根据目标图像的上边缘线与屏幕的上边缘线之间的距离与预览图像的图像高度的比值，确定预览图像的显示位置。

在上述各实施例的基础上，预览操作可以为长按；

相应地，还可以包括：

操作判断单元，用于在通过图像预览程序显示目标图像的预览图像之后，通过图像预览程序，判断用户是否通过与预览操作相连的滑动操作更新目标图像；

预览图像更新单元，用于如果用户通过与预览操作相连的滑动操作更新目标图像，则通过图像预览程序更新预览图像。

在上述各实施例的基础上，图像显示单元具体可以用于：

关闭scrollview滚动响应之后，通过图像预览程序显示目标图像的预览图像。

本发明实施例所提供的基于reactnative的图像预览装置可用于执行本发明任意实施例提供的基于reactnative的图像预览方法，具备相应的功能模块，实现相同的有益效果。

实施例五

图5为本发明实施例五提供的一种设备的结构示意图。图5示出了适于用来实现本发明实施方式的示例性设备12的框图。图5显示的设备12仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，设备12以通用计算设备的形式表现。设备12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(isa)总线，微通道体系结构(mac)总线，增强型isa总线、视频电子标准协会(vesa)局域总线以及外围组件互连(pci)总线。

设备12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被设备12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(ram)30和/或高速缓存存储器32。设备12可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图5未显示，通常称为“硬盘驱动器”)。尽管图5中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如cd-rom，dvd-rom或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施例的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储器28中，这样的程序模块42包括但不限于操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施例中的功能和/或方法。

设备12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该设备12交互的设备通信，和/或与使得该设备12能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(i/o)接口22进行。并且，设备12还可以通过网络适配器20与一个或者多个网络(例如局域网(lan)，广域网(wan)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与设备12的其它模块通信。应当明白，尽管图中未示出，可以结合设备12使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、raid系统、磁带驱动器以及数据备份存储系统等。

处理单元16通过运行存储在系统存储器28中的程序，从而执行各种功能应用以及数据处理，例如实现本发明实施例所提供的基于reactnative的图像预览方法。也即：获取操作界面转换指令；如果所述操作界面转换指令对应的转换后的操作界面为设定图像预览界面，则调用基于reactnative的图像预览程序，以使所述图像预览程序根据所述设定图像预览界面对应的用户操作显示预览图像。

实施例六

本发明实施例六还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行本发明实施例所述的基于reactnative的图像预览方法。也即：获取操作界面转换指令；如果所述操作界面转换指令对应的转换后的操作界面为设定图像预览界面，则调用基于reactnative的图像预览程序，以使所述图像预览程序根据所述设定图像预览界面对应的用户操作显示预览图像。

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

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

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

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

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