CN108875085A - 混合应用的图片处理方法、装置、计算机设备及存储介质 - Google Patents

Abstract

本发明提供的混合应用的图片处理方法、装置、计算机设备及存储介质，响应于图片选择操作，通过HTML页面形成第一数据结构并存储至设备内存；通过HTML页面调用原生框架的数据读取接口读取第一数据结构，获取第一base64串分别截取为正方形图片；通过HTML页面将截取后的正方形图片转换为第二base64串，并形成第二数据结构；通过HTML页面调用原生框架提供的数据更新接口，将设备内存中第一数据结构更新为第二数据结构；通过HTML页面将第二base64串渲染成缩略图进行展示；以及响应于图片预览操作，HTML页面调用原生框架的图片预览工具进行图片展示。通过本发明，能够提高混合应用的图片展示效果。

Description

混合应用的图片处理方法、装置、计算机设备及存储介质

技术领域

本发明涉及信息处理技术领域，尤其涉及一种混合应用的图片处理方法、装置、计算机设备及存储介质。

背景技术

混合应用(Hybrid app)是一种介于网页应用(Web app)和原生应用(native app)之间的应用，兼具原生应用良好的用户交互体验以及网页应用跨平台开发的优势，在一种基于H5的混合应用中，混合应用包括原生框架和HTML页面，两者互相调用并传递参数实现整个混合应用的功能。

现有技术中一种混合应用中，HTML页面在进行图片展示时，原生框架把原图片压缩成很小的base64串，将base64串传给HTML页面，HTML页面通过标签渲染展示，展示效果差。

因此，提供一种混合应用的图片处理方法、装置、计算机设备及存储介质，以提高混合应用中的图片展示效果，是本领域需要解决的技术问题。

发明内容

本发明的目的是提供一种混合应用的图片处理方法、装置、计算机设备及存储介质，用于解决现有技术存在的混合应用中的图片展示效果差的问题。

为实现上述目的，本发明提供一种混合应用的图片处理方法，包括以下步骤：响应于图片选择操作，通过混合应用的超文本标记语言HTML页面调用混合应用的原生框架的相册工具或拍照工具，确定目标图片；通过原生框架将目标图片转换为第一base64串，并将目标图片的图片路径和第一base64串形成第一数据结构，将第一数据结构存储至设备内存；通过HTML页面调用原生框架提供的数据读取接口，从设备内存中读取第一数据结构，获取第一数据结构中的第一base64串，将第一base64串表征的图片截取为正方形图片；通过HTML页面将截取后的正方形图片转换为第二base64串，并将目标图片的图片路径、第一base64串和第二base64串形成第二数据结构；通过HTML页面调用原生框架提供的数据更新接口，将设备内存中的第一数据结构更新为第二数据结构；通过HTML页面将第二base64串渲染成缩略图进行展示；以及响应于图片预览操作，通过HTML页面调用原生框架的图片预览工具，读取设备内存中的第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径获取目标图片进行展示，其中，待展示图片的缩略图为图片预览操作所操作的缩略图。

进一步地，设备内存中存储有多个第二数据结构，在响应于图片预览操作，通过HTML页面调用原生框架的图片预览工具，读取设备内存中的第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径获取目标图片进行展示的步骤之后，该方法还包括：响应于图片滑动操作，通过HTML页面调用原生框架的图片预览工具，读取设备内存中的各个第二数据结构，并按照图片滑动操作的方向展示下一张目标图片。

进一步地，在通过HTML页面将第二base64串渲染成缩略图进行展示的步骤之后，该方法还包括：响应于图片删除操作，通过HTML页面调用原生框架提供的数据删除接口，删除设备内存中待删除图片对应的第二数据结构，其中，待删除图片的缩略图为图片删除操作所操作的缩略图；通过HTML页面调用数据读取接口，读取设备内存中各个第二数据结构中的第二base64串，渲染成缩略图重新进行展示。

进一步地，目标图片为长方形，通过HTML页面调用原生框架提供的数据读取接口，从设备内存中读取第一数据结构，获取第一数据结构中的第一base64串，将第一base64串表征的图片截取为正方形图片的步骤包括：判断第一base64串表征的图片的方向，进行转向；判断第一base64串表征的图片的宽和高的大小关系；如果第一base64串表征的图片的高大于宽，则从第一base64串表征的图片中间截取以宽为边长的正方形，得到正方形图片；如果第一base64串表征的图片的宽大于高，则从第一base64串表征的图片中间截取以高为边长的正方形，得到正方形图片。

进一步地，第一数据结构和第二数据结构均为数组。

为实现上述目的，本发明还提供一种适于实现上述任一种方法的混合应用的图片处理装置。

该混合应用的图片处理装置包括HTML页面和原生框架，其中：HTML页面用于响应于图片选择操作，调用原生框架的相册工具或拍照工具；原生框架用于确定目标图片，将目标图片转换为第一base64串，并将目标图片的图片路径和第一base64串形成第一数据结构，将第一数据结构存储至设备内存；HTML页面用于调用原生框架提供的数据读取接口；原生框架用于从设备内存中读取第一数据结构；HTML页面用于获取第一数据结构中的第一base64串，将第一base64串表征的图片截取为正方形图片，并将截取后的正方形图片转换为第二base64串，并将目标图片的图片路径、第一base64串和第二base64串形成第二数据结构，并调用原生框架提供的数据更新接口；原生框架用于将设备内存中的第一数据结构更新为第二数据结构；HTML页面用于将各个第二base64串渲染成缩略图进行展示，并响应于图片预览操作，调用原生框架的图片预览工具；原生框架用于读取设备内存中的第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径获取目标图片进行展示，其中，待展示图片的缩略图为图片预览操作所操作的缩略图。

进一步地，设备内存中存储有多个第二数据结构，HTML页面还用于响应于图片滑动操作，调用原生框架的图片预览工具；原生框架还用于读取设备内存中的各个第二数据结构，并按照图片滑动操作的方向展示下一张目标图片。

进一步地，HTML页面还用于响应于图片删除操作，调用原生框架提供的数据删除接口；原生框架还用于删除设备内存中待删除图片对应的第二数据结构，其中，待删除图片的缩略图为图片删除操作所操作的缩略图；原生框架还用于读取设备内存中各个第二数据结构中的第二base64串；HTML页面还用于将原生框架读取到的各个第二base64串渲染成缩略图重新进行展示。

进一步地，目标图片为长方形，HTML页面在将第一base64串表征的图片，也即目标图片截取为正方形图片时，具体执行的步骤包括：判断第一base64串表征的图片的方向，进行转向；判断第一base64串表征的图片的宽和高的大小关系；如果第一base64串表征的图片的高大于宽，则从第一base64串表征的图片中间截取以宽为边长的正方形，得到正方形图片；如果第一base64串表征的图片的宽大于高，则从第一base64串表征的图片中间截取以高为边长的正方形，得到正方形图片。

进一步地，第一数据结构和第二数据结构均为数组。

为实现上述目的，本发明还提供一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现上述方法的步骤。

为实现上述目的，本发明还提供计算机可读存储介质，其上存储有计算机程序，程序被处理器执行时实现上述方法的步骤。

本发明提供的混合应用的图片处理方法、装置、计算机设备及存储介质，确定目标图片后，首先通过原生框架将由目标图片转换得到的第一base64串和图片路径形成第一数据结构存储至设备内存，然后通过HTML页面调用原生框架提供的数据读取接口，从设备内存中读取该第一数据结构，将其中第一base64串表征的图片截取为正方形图片，再将正方形图片转换得到的第二base64串、图片路径和第一base64串形成一个第二数据结构，再调用原生框架提供的数据更新接口，将设备内存中第一数据结构更新为第二数据结构，此时，可通过HTML页面将第二base64串渲染成缩略图进行展示，展示的缩略图是正方形图片，与原图的长宽比例无关，在HTML页面上展示时不会发生拉伸或变形；当用户需要进行对某张图片进行预览时，对待展示图片的缩略图进行图片预览操作，响应于该图片预览操作，通过HTML页面调用原生框架的图片预览工具，读取设备内存中的第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径获取目标图片进行展示，实现了通过HTML页面进行展示原图的目的，同时，HTML页面和原生框架共同维护设置在内存中的数据结构，能够快速响应用户的图片预览操作，进行原图的展示，因而，用户可以更快地查看已经选中的图片的原图，提高混合应用中的图片展示效果，提升用户体验。

附图说明

图1为本发明实施例1提供的混合应用的图片处理方法的流程图；

图2为本发明实施例2提供的混合应用的图片处理装置的框图；

图3为本发明实施例3提供的计算机设备的硬件结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1

本发明实施例1提供了一种混合应用的图片处理方法，该混合应用包括原生框架和超文本标记语言HTML页面，在该实施例中，原生框架提供数据操作接口，数据操作接口包括数据存储接口(saveData())和数据读取接口(getData())。图1为本发明实施例一提供的混合应用的图片处理方法的流程图，该混合应用的图片处理方法中的各个步骤的执行主体为终端设备，如图1所示，该混合应用的图片处理方法包括如下的步骤S101至步骤S107。

步骤S101：响应于图片选择操作，通过HTML页面调用原生框架的相册工具或拍照工具，确定目标图片。

具体地，用户在HTML页面进行图片选择操作，终端通过混合应用的HTML页面响应该图片选择操作，首先调用原生框架的相册工具或者拍照工具。

原生框架具有相册工具和拍照工具，基于HTML页面的调用，从相册中选取或通过拍照获取到图片，作为目标图片，对于通过拍照获取到的图片，也可存储在相册中，该处获得的目标图片可以为一张，也可以为多张。

步骤S102：通过原生框架将目标图片转换为第一base64串，并将目标图片的图片路径和第一base64串形成第一数据结构，将第一数据结构存储至设备内存。

具体地，通过上述步骤S101，确定的目标图片为多张时，在该步骤S102中，对每张目标图片分别进行压缩，压缩为base64串，其中，base64串为采用base64编码方式对目标图片进行编码得到的字符串，base64编码方式是用于传输8Bit字节代码的编码方式之一。压缩后，每张目标图片对应一个base64串，在该处，为了方便区分，将直接对目标图片压缩得到的base64串命名为第一base64串，对于每张目标图片，利用其压缩得到的第一base64串和其在设备本地的图片路径形成一个数据结构，同样为了方便区分，将该处的数据结构命名为第一数据结构，然后将所有的第一数据结构存储至运行混合应用的设备内存中。

例如，存在ABC三张目标图片，对于A目标图片，利用A目标图片压缩得到的第一base64串和A目标图片在设备本地的图片路径形成一个A数据结构；对于B目标图片，利用B目标图片压缩得到的第一base64串和B目标图片在设备本地的图片路径形成一个B数据结构；对于C目标图片，利用C目标图片压缩得到的第一base64串和C目标图片在设备本地的图片路径形成一个C数据结构，然后将A、B和C数据结构分别存储至运行混合应用的设备内存中。

步骤S103：通过HTML页面调用原生框架提供的数据读取接口，从设备内存中读取第一数据结构，获取第一数据结构中的第一base64串，将第一base64串表征的图片截取为正方形图片。

具体地，HTML页面获取设备内存中的数据时，调用原生框架提供的数据读取接口，通过该数据读取接口，启用原生框架的数据读取模块，读取设备内存中各个第一数据结构；HTML页面通过调用数据读取接口获取到各个第一数据结构之后，对于每个第一数据结构中的第一base64串，将各第一base64串表征的图片分别进行截取，截取得到正方形图片，例如，通过canvas对第一base64串表征的图片也即目标图片进行截取，其中，canvas是一种用于在网页上处理图像的元素工具，HTML的canvas使用JavaScript在网页上处理2D图像。

具体的图片截取方法如下：

判断目标图片的方向，进行转向；判断目标图片的宽和高的大小关系；如果目标图片的高大于宽，则从目标图片中间截取以宽为边长的正方形，得到正方形图片；如果目标图片的宽大于高，则从目标图片中间截取以高为边长的正方形，得到正方形图片。

步骤S104：通过HTML页面将截取后的正方形图片换为第二base64串，并将目标图片的图片路径、第一base64串和第二base64串形成第二数据结构。

具体地，HTML页面得到每个目标图片对应的正方形图片之后，将各个正方形图片分别转换为第二base64串，然后根据各个第二base64串以及在步骤S103中获取到的各个第一数据结构，一一对应重新形成第二数据结构。其中，第一base64串和第二base64串的编码方式相同，内容不同，第一base64串为由目标图片通过base64编码得到的字符串，第二base64串为由目标图片截取为正方形图片后通过base64编码得到的字符串。

步骤S105：通过HTML页面调用原生框架提供的数据更新接口，将设备内存中各个第一数据结构对应更新为第二数据结构。

具体地，通过HTML页面形成第二数据结构后，通过HTML页面调用原生框架提供的数据更新接口，通过该数据更新接口，启用原生框架的数据更新模块，将设备内存中各个第一数据结构一一对应更新为第二数据结构。

步骤S106：通过HTML页面将第二base64串渲染成缩略图进行展示。

具体地，通过HTML页面进行缩略图的展示时，也可以调用原生框架提供的数据读取接口，通过该数据读取接口，启用原生框架的数据读取模块，读取设备内存中各个第二数据结构；通过HTML页面调用数据读取接口获取到各个第二数据结构之后，将每个第二数据结构中的第二base64串渲染成缩略图，通过HTML页面上展示各个目标图片的缩略图。

该实施例中，在HTML页面上展示缩略图时，缩略图截取目标图片中间区域形成正方形图片进行展示，与原图的长宽比例无关，不会出现拉伸或变形，用户体验好。

步骤S107：响应于图片预览操作，通过HTML页面调用原生框架的图片预览工具，读取设备内存中的第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径获取目标图片进行展示。

具体地，通过在HTML页面上展示各个目标图片的缩略图之后，用户可操作缩略图，对图片进行预览，例如图片预览操作为对缩略图的点击操作，用户点击某个缩略图时，该缩略图对应的图片即为待展示图片，也即，待展示图片的缩略图为图片预览操作所操作的缩略图。

通过HTML页面响应用户对待展示图片的点击操作之后，调用原生框架的图片预览工具，通过原生框架启动图片预览的工具，读取设备内存中的各个第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径，得到待展示图片的本地存储路径，获取目标图片的原图进行展示。

采用该实施例提供的混合应用的图片处理方法，确定目标图片后，首先通过原生框架将由目标图片转换得到的第一base64串和图片路径形成第一数据结构存储至设备内存，然后通过HTML页面调用原生框架提供的数据读取接口，从设备内存中读取该第一数据结构，将其中第一base64串表征的图片截取为正方形图片，再将正方形图片转换得到的第二base64串、图片路径和第一base64串形成一个第二数据结构，再调用原生框架提供的数据更新接口，将设备内存中第一数据结构更新为第二数据结构，此时，可通过HTML页面将第二base64串渲染成缩略图进行展示，展示的缩略图是正方形图片，与原图的长宽比例无关，在HTML页面上展示时不会发生拉伸或变形；当用户需要进行对某张图片进行预览时，对待展示图片的缩略图进行图片预览操作，响应于该图片预览操作，通过HTML页面调用原生框架的图片预览工具，读取设备内存中的第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径获取目标图片进行展示，实现了通过HTML页面进行展示原图的目的，同时，HTML页面和原生框架共同维护设置在内存中的数据结构，能够快速响应用户的图片预览操作，进行原图的展示，因而，用户可以更快地查看已经选中的图片的原图，提高混合应用中的图片展示效果，提升用户体验。

可选地，设备内存中存储有多个第二数据结构时，也即混合应用可通过HTML页面对多个目标图片进行展示时，用户可以左右滑动查看各个预览的图片，此外，用户也可以通过删除设备内存中的第二数据结构，实现对图片的删除操作。

在进行左右滑动查看预览的图片时，响应于图片滑动操作，通过HTML页面调用原生框架的图片预览工具，读取设备内存中的各个第二数据结构，并按照图片滑动操作的方向展示下一张所述目标图片，以使HTML页面能够按照图片滑动操作的方向展示下一张目标图片。例如，图片滑动操作的方向为由终端左侧向右侧滑动时，展示当前目标图片的上一张，图片滑动操作的方向为由终端右侧向左侧滑动时，展示当前目标图片的下一张。

通过在HTML页面上展示各个目标图片的缩略图之后，用户可操作缩略图，对图片进行删除，例如图片删除操作为对缩略图的长时间触摸操作，用户长时间触摸某个缩略图时，该缩略图对应的图片即为待删除图片，也即，待删除图片的缩略图为图片删除操作所操作的缩略图。通过HTML页面响应用户对待删除图片的图片删除操作之后，调用原生框架提供的数据删除接口，启动原生框架的数据删除模块，删除设备内存中待删除图片对应的第二数据结构，然后，在重新展示HTML页面时，HTML页面调用数据读取接口，启动原生框架的数据读取模块，重新读取设备内存中各个第二数据结构中的第二base64串，渲染成缩略图重新进行展示。

采用该实施例，可以支持用户的滑动查看和删除操作，保证了图片数据的及时更新。

实施例2

本发明实施例2提供了一种混合应用的图片处理装置，可运行于终端设备中，与上述实施例1提供的混合应用的图片处理方法相对应，相关描述可参考上述实施例1。图2为本发明实施例2提供的混合应用的图片处理装置的框图，如图2所示，该混合应用的图片处理装置包括HTML页面30和原生框架40。

HTML页面30用于响应于图片选择操作，调用原生框架40的相册工具或拍照工具；

原生框架40用于确定目标图片，将目标图片转换为第一base64串，并将目标图片的图片路径和第一base64串形成第一数据结构，将第一数据结构存储至设备内存；

HTML页面30用于调用原生框架40提供的数据读取接口；

原生框架40用于从设备内存中读取第一数据结构；

HTML页面30用于获取第一数据结构中的第一base64串，将第一base64串表征的目标图片分别截取为正方形图片，并将截取后的正方形图片转换为第二base64串，并将目标图片的图片路径、第一base64串和第二base64串形成第二数据结构，调用原生框架40提供的数据更新接口；

原生框架40用于将设备内存中的第一数据结构更新为第二数据结构；

HTML页面30用于将第二base64串渲染成缩略图进行展示，并响应于图片预览操作，调用原生框架40的图片预览工具；

原生框架40用于读取设备内存中的第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径获取目标图片进行展示，其中，待展示图片的缩略图为图片预览操作所操作的缩略图。

采用该实施例提供的混合应用的图片处理装置，HTML页面响应图片选择操作，调用原生框架的相册工具或拍照工具，被调用的相册工具或拍照工具确定目标图片后，首先通过原生框架将由目标图片转换得到的第一base64串和图片路径形成第一数据结构存储至设备内存，然后通过HTML页面调用原生框架提供的数据读取接口，从设备内存中读取该第一数据结构，将其中第一base64串表征的图片截取为正方形图片，再将正方形图片转换得到的第二base64串、图片路径和第一base64串形成一个第二数据结构，再调用原生框架提供的数据更新接口，将设备内存中第一数据结构更新为第二数据结构，此时，可通过HTML页面将第二base64串渲染成缩略图进行展示，展示的缩略图是正方形图片，与原图的长宽比例无关，在HTML页面上展示时不会发生拉伸或变形；当用户需要进行对某张图片进行预览时，对待展示图片的缩略图进行图片预览操作，响应于该图片预览操作，通过HTML页面调用原生框架的图片预览工具，读取设备内存中的第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径获取目标图片进行展示，实现了通过HTML页面进行展示原图的目的，同时，HTML页面和原生框架共同维护设置在内存中的数据结构，能够快速响应用户的图片预览操作，进行原图的展示，因而，用户可以更快地查看已经选中的图片的原图，提高混合应用中的图片展示效果，提升用户体验。

可选地，设备内存中存储有多个所述第二数据结构，HTML页面还用于响应于图片滑动操作，调用原生框架的图片预览工具；原生框架还用于读取设备内存中的各个第二数据结构，并按照图片滑动操作的方向展示下一张目标图片。

采用该实施例提供的混合应用的图片处理装置，能够响应用户的滑动操作来实现多张图片依次流畅预览。

可选地，HTML页面还用于响应于图片删除操作，调用原生框架提供的数据删除接口；原生框架还用于删除设备内存中待删除图片对应的第二数据结构，其中，待删除图片的缩略图为图片删除操作所操作的缩略图；原生框架还用于读取设备内存中各个第二数据结构中的第二base64串；HTML页面还用于将原生框架读取到的各个第二base64串渲染成缩略图重新进行展示。

采用该实施例提供的混合应用的图片处理装置，能够响应用户的删除操作及时更新图片数据。

可选地，目标图片为长方形，HTML页面在将第一base64串表征的图片，也即目标图片截取为正方形图片时，具体执行的步骤包括：判断目标图片的方向，进行转向；判断目标图片的宽和高的大小关系；如果目标图片的高大于宽，则从目标图片中间截取以宽为边长的正方形，得到正方形图片；如果目标图片的宽大于高，则从目标图片中间截取以高为边长的正方形，得到正方形图片。

可选地，第一数据结构和第二数据结构均为数组。

实施例3

本实施例还提供一种计算机设备，如可以执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图3所示，本实施例的计算机设备20至少包括但不限于：可通过系统总线相互通信连接的存储器21、处理器22，如图3所示。需要指出的是，图3仅示出了具有组件21-22的计算机设备20，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

本实施例中，存储器21(即可读存储介质)包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器21可以是计算机设备20的内部存储单元，例如该计算机设备20的硬盘或内存。在另一些实施例中，存储器21也可以是计算机设备20的外部存储设备，例如该计算机设备20上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，存储器21还可以既包括计算机设备20的内部存储单元也包括其外部存储设备。本实施例中，存储器21通常用于存储安装于计算机设备20的操作系统和各类应用软件，例如实施例2的混合应用的图片处理装置的程序代码等。此外，存储器21还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器22在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器22通常用于控制计算机设备20的总体操作。本实施例中，处理器22用于运行存储器21中存储的程序代码或者处理数据，例如混合应用的图片处理装置等。

实施例4

本实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器执行时实现相应功能。本实施例的计算机可读存储介质用于混合应用的图片处理装置，被处理器执行时实现实施例1的混合应用的图片处理方法。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种混合应用的图片处理方法，其特征在于，包括：

响应于图片选择操作，通过混合应用的超文本标记语言HTML页面调用所述混合应用的原生框架的相册工具或拍照工具，确定目标图片；

通过所述原生框架将所述目标图片转换为第一base64串，并将所述目标图片的图片路径和所述第一base64串形成第一数据结构，将所述第一数据结构存储至设备内存；

通过所述HTML页面调用所述原生框架提供的数据读取接口，从所述设备内存中读取所述第一数据结构，获取所述第一数据结构中的第一base64串，将所述第一base64串表征的图片截取为正方形图片；

通过所述HTML页面将截取后的所述正方形图片转换为第二base64串，并将所述目标图片的图片路径、所述第一base64串和所述第二base64串形成第二数据结构；

通过所述HTML页面调用所述原生框架提供的数据更新接口，将所述设备内存中的所述第一数据结构更新为所述第二数据结构；

通过所述HTML页面将所述第二base64串渲染成缩略图进行展示；以及

响应于图片预览操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的所述第二数据结构，并根据待展示图片对应的所述第二数据结构中的图片路径获取所述目标图片进行展示，其中，所述待展示图片的缩略图为所述图片预览操作所操作的缩略图。

2.根据权利要求1所述的混合应用的图片处理方法，其特征在于，所述设备内存中存储有多个所述第二数据结构，在响应于图片预览操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的所述第二数据结构，并根据待展示图片对应的所述第二数据结构中的图片路径获取所述目标图片进行展示的步骤之后，所述方法还包括：

响应于图片滑动操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的各个所述第二数据结构，并按照所述图片滑动操作的方向展示下一张所述目标图片。

3.根据权利要求1所述的混合应用的图片处理方法，其特征在于，在通过所述HTML页面将所述第二base64串渲染成缩略图进行展示的步骤之后，所述方法还包括：

响应于图片删除操作，通过所述HTML页面调用所述原生框架提供的数据删除接口，删除所述设备内存中待删除图片对应的所述第二数据结构，其中，所述待删除图片的缩略图为所述图片删除操作所操作的缩略图；

通过所述HTML页面调用所述数据读取接口，读取所述设备内存中各个所述第二数据结构中的所述第二base64串，渲染成缩略图重新进行展示。

4.根据权利要求1所述的混合应用的图片处理方法，其特征在于，所述目标图片为长方形，通过所述HTML页面调用所述原生框架提供的数据读取接口，从所述设备内存中读取所述第一数据结构，获取所述第一数据结构中的第一base64串，将所述第一base64串表征的图片截取为正方形图片的步骤包括：

判断所述第一base64串表征的图片的方向，进行转向；

判断所述第一base64串表征的图片的宽和高的大小关系；

如果所述第一base64串表征的图片的高大于宽，则从所述第一base64串表征的图片中间截取以宽为边长的正方形，得到所述正方形图片；

如果所述第一base64串表征的图片的宽大于高，则从所述第一base64串表征的图片中间截取以高为边长的正方形，得到所述正方形图片。

5.根据权利要求1所述的混合应用的图片处理方法，其特征在于，所述第一数据结构和所述第二数据结构均为数组。

6.一种混合应用的图片处理装置，其特征在于，所述混合应用的图片处理装置包括超文本标记语言HTML页面和原生框架，其中：

所述HTML页面用于响应于图片选择操作，调用所述原生框架的相册工具或拍照工具；

所述原生框架用于确定目标图片，将所述目标图片转换为第一base64串，并将所述目标图片的图片路径和所述第一base64串形成第一数据结构，将所述第一数据结构存储至设备内存；

所述HTML页面用于调用所述原生框架提供的数据读取接口；

所述原生框架用于从所述设备内存中读取所述第一数据结构；

所述HTML页面用于获取所述第一数据结构中的第一base64串，将所述第一base64串表征的图片截取为正方形图片，并将截取后的所述正方形图片转换为第二base64串，并将所述目标图片的图片路径、所述第一base64串和所述第二base64串形成第二数据结构，并调用所述原生框架提供的数据更新接口；

所述原生框架用于将所述设备内存中的所述第一数据结构更新为所述第二数据结构；

所述HTML页面用于将各个所述第二base64串渲染成缩略图进行展示，并响应于图片预览操作，调用所述原生框架的图片预览工具；

所述原生框架用于读取所述设备内存中的所述第二数据结构，并根据待展示图片对应的所述第二数据结构中的图片路径获取所述目标图片进行展示，其中，所述待展示图片的缩略图为所述图片预览操作所操作的缩略图。

7.根据权利要求6所述的混合应用的图片处理装置，其特征在于，所述设备内存中存储有多个所述第二数据结构，

所述HTML页面还用于响应于图片滑动操作，调用所述原生框架的图片预览工具；

所述原生框架还用于读取所述设备内存中的各个所述第二数据结构，并按照所述图片滑动操作的方向展示下一张所述目标图片。

8.根据权利要求6所述的混合应用的图片处理方法，其特征在于，

所述HTML页面还用于响应于图片删除操作，调用所述原生框架提供的数据删除接口；

所述原生框架还用于删除所述设备内存中待删除图片对应的所述第二数据结构，其中，所述待删除图片的缩略图为所述图片删除操作所操作的缩略图；

所述原生框架还用于读取所述设备内存中各个所述第二数据结构中的所述第二base64串；

所述HTML页面还用于将所述原生框架读取到的各个第二base64串渲染成缩略图重新进行展示。

9.一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1至5任一项所述方法的步骤。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述程序被处理器执行时实现权利要求1至5任一项所述方法的步骤。