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

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

Info

Publication number
WO2020015162A1
WO2020015162A1 PCT/CN2018/107524 CN2018107524W WO2020015162A1 WO 2020015162 A1 WO2020015162 A1 WO 2020015162A1 CN 2018107524 W CN2018107524 W CN 2018107524W WO 2020015162 A1 WO2020015162 A1 WO 2020015162A1
Authority
WO
WIPO (PCT)
Prior art keywords
picture
data structure
html page
base64 string
base64
Prior art date
Application number
PCT/CN2018/107524
Other languages
English (en)
French (fr)
Inventor
邹国忠
Original Assignee
平安科技（深圳）有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 平安科技（深圳）有限公司 filed Critical 平安科技（深圳）有限公司
Publication of WO2020015162A1 publication Critical patent/WO2020015162A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F17/00—Digital computing or data processing equipment or methods, specially adapted for specific functions

Definitions

  • the present application relates to the field of information processing technologies, and in particular, to a picture processing method, device, computer equipment, and storage medium for hybrid applications.
  • Hybrid app is an application between web app and native app. It has both the good user interaction experience of native apps and the advantages of cross-platform development of web apps.
  • the hybrid application includes a native framework and an HTML page. The two call each other and pass parameters to implement the function of the entire hybrid application.
  • the purpose of this application is to provide a picture processing method, device, computer equipment and storage medium for hybrid applications, which are used to solve the problem of poor picture display effect in hybrid applications in the prior art.
  • the present application provides a picture processing method for a hybrid application, including the following steps: in response to a picture selection operation, calling a photo album tool or a photographing tool of a native frame of the hybrid application through a hypertext markup language HTML page of the hybrid application Determine the target picture; convert the target picture into the first base64 string through the native framework, and form the first data structure of the target picture's picture path and the first base64 string, and store the first data structure in the device memory; call the native through the HTML page
  • the data read interface provided by the framework reads the first data structure from the device memory, obtains the first base64 string in the first data structure, and truncates the picture represented by the first base64 string into a square picture;
  • the square picture is converted into a second base64 string, and the picture path of the target picture, the first base64 string and the second base64 string form a second data structure;
  • the data update interface provided by the native framework is called through the HTML page, and the Update the first data structure to the second data structure;
  • the present application further provides a picture processing device for hybrid applications.
  • the picture processing device of the hybrid application includes an HTML page and a native frame, wherein: the HTML page is used to respond to a picture selection operation and call a native frame album tool or a photographing tool; the native frame is used to determine a target picture and convert the target picture into a first A base64 string, and forms the first data structure of the target image's picture path and the first base64 string, and stores the first data structure in the device memory; the HTML page is used to call the data reading interface provided by the native framework; the native framework is used to The first data structure is read from the device memory; the HTML page is used to obtain the first base64 string in the first data structure, the image represented by the first base64 string is truncated into a square picture, and the truncated square picture is converted into a first Two base64 strings, and form the second data structure of the picture path of the target picture, the first base64 string and the second base64 string, and call the data update interface provided by the native framework; the native framework is used to use the first data structure in the device memory Update
  • the present application also provides a computer device including a memory, a processor, and a computer program stored on the memory and executable on the processor.
  • a computer program stored on the memory and executable on the processor.
  • the hybrid application's HyperFrame Markup Language (HTML) page is used to call the hybrid application's native framework's photo album tool or photographing tool to determine the target picture;
  • the native framework is used to convert the target picture into a first base64 String, and form a first data structure of the picture path of the target picture and the first base64 string, and store the first data structure in the device memory; call the data provided by the native frame through the HTML page to read An interface, reading the first data structure from the device memory, obtaining a first base64 string in the first data structure, and truncating a picture represented by the first base64 string into a square picture;
  • the HTML page converts the intercepted square picture into a second base64 string, and forms a second data structure of the picture path of the target picture, the first base64 string, and the second base64 string; through the HTML
  • the page calls a data update interface provided by the native framework to update the first data structure in the device memory to the second data structure.
  • the present application also provides a computer-readable storage medium on which a computer program is stored.
  • the program is executed by a processor, the following steps of a picture processing method for a hybrid application are implemented:
  • the hybrid application's HyperFrame Markup Language (HTML) page is used to call the hybrid application's native framework's photo album tool or photographing tool to determine the target picture;
  • the native framework is used to convert the target picture into a first base64 String, and form a first data structure of the picture path of the target picture and the first base64 string, and store the first data structure in the device memory; call the data provided by the native frame through the HTML page to read An interface, reading the first data structure from the device memory, obtaining a first base64 string in the first data structure, and truncating a picture represented by the first base64 string into a square picture;
  • the HTML page converts the intercepted square picture into a second base64 string, and forms a second data structure of the picture path of the target picture, the first base64 string, and the second base64 string; through the HTML
  • the page calls a data update interface provided by the native framework to update the first data structure in the device memory to the second data structure ; Rendering the second base64 string into
  • the picture processing method, device, computer equipment, and storage medium of the hybrid application provided in this application After determining the target picture, the first base64 string and the picture path obtained from the target picture are first formed into the first data structure and stored in the device memory through the native frame. , And then call the data reading interface provided by the native framework through the HTML page, read the first data structure from the device memory, intercept the picture represented by the first base64 string into a square picture, and then convert the square picture to the second The base64 string, the image path and the first base64 string form a second data structure, and then call the data update interface provided by the native framework to update the first data structure in the device memory to the second data structure.
  • the HTML page can be used to The second base64 string is rendered as a thumbnail for display.
  • the displayed thumbnail is a square image, which has nothing to do with the aspect ratio of the original image. It will not be stretched or deformed when displayed on the HTML page.
  • the thumbnail of the picture to be displayed is subjected to a picture preview operation, in response to Picture preview operation, calling the native frame picture preview tool through an HTML page, reading the second data structure in the device memory, and obtaining the target picture for display according to the picture path in the second data structure corresponding to the picture to be displayed.
  • the purpose of the HTML page is to display the original image.
  • the HTML page and the native frame jointly maintain the data structure set in memory, which can quickly respond to the user's picture preview operation and display the original image. Therefore, users can view the original image faster.
  • the original image of the selected picture improves the picture display effect in the hybrid application and improves the user experience.
  • FIG. 1 is a flowchart of a picture processing method for a hybrid application provided in Embodiment 1 of the present application; FIG.
  • FIG. 2 is a block diagram of a picture processing apparatus for a hybrid application provided in Embodiment 2 of the present application;
  • FIG. 3 is a hardware structural diagram of a computer device according to Embodiment 3 of the present application.
  • Embodiment 1 of the present application provides a picture processing method for a hybrid application.
  • the hybrid application includes a native frame and a hypertext markup language HTML page.
  • the native frame provides a data operation interface
  • the data operation interface includes a data storage interface.
  • FIG. 1 is a flowchart of a picture processing method for a hybrid application provided in Embodiment 1 of the present application. Each step in the picture processing method for the hybrid application is performed by a terminal device. As shown in FIG. 1, the picture processing of the hybrid application The method includes the following steps S101 to S107.
  • Step S101 In response to a picture selection operation, an album tool or a photographing tool of a native frame is called through an HTML page to determine a target picture.
  • the user performs a picture selection operation on the HTML page
  • the terminal responds to the picture selection operation through the HTML page of the hybrid application, and first calls a photo album tool or a photographing tool of the native frame.
  • the native framework has a photo album tool and a photo shooting tool. Based on the call of the HTML page, the picture is selected from the photo album or obtained through photo shooting as the target picture. The picture obtained through photo shooting can also be stored in the photo album. The target obtained there There can be one or more pictures.
  • Step S102 Convert the target picture into a first base64 string through a native framework, form a first data structure of the picture path of the target picture and the first base64 string, and store the first data structure in the device memory.
  • each target picture is compressed separately and compressed into a base64 string, where the base64 string is a base64 encoding method for the target picture.
  • Base64 encoding is one of the encoding methods used to transmit 8-bit byte codes.
  • each target picture corresponds to a base64 string.
  • the base64 string directly compressed from the target picture is named the first base64 string.
  • the first base64 string and its local picture path on the device form a data structure.
  • the data structure is named the first data structure, and then all the first data structures are stored in the device memory running the hybrid application. .
  • the target picture A there are three target pictures of ABC.
  • the first base64 string compressed by the target picture A and the target picture of the target picture A form a data structure on the device; for the target picture B, the target picture B is used.
  • the compressed first base64 string and the B target picture form a B data structure on the device's local picture path; for the C target picture, the first base64 string and the C target picture compressed using the C target picture are formed on the device's local picture path A C data structure, and then store the A, B, and C data structures into the device memory of the hybrid application.
  • Step S103 calling the data reading interface provided by the native framework through the HTML page, reading the first data structure from the device memory, obtaining the first base64 string in the first data structure, and truncating the picture represented by the first base64 string into a square image.
  • the HTML page obtains the data in the device memory
  • the data reading interface provided by the native framework is called, and the data reading module of the native framework is enabled through the data reading interface to read each first data structure in the device memory
  • the HTML page obtains each first data structure by calling the data reading interface, for each first base64 string in each first data structure, the pictures represented by each first base64 string are intercepted separately to obtain a square picture, for example
  • the first base64 string represented by the canvas that is, the target picture is intercepted by canvas.
  • canvas is an element tool for processing images on a web page.
  • HTML canvas uses JavaScript to process 2D images on the web page.
  • the specific image capture method is as follows:
  • Step S104 The intercepted square picture is replaced with a second base64 string by the HTML page, and the picture path of the target picture, the first base64 string, and the second base64 string form a second data structure.
  • each square picture is converted into a second base64 string, and then according to each second base64 string and each first data structure obtained in step S103, one One correspondence re-forms the second data structure.
  • the first base64 string and the second base64 string are encoded in the same manner and have different contents.
  • the first base64 string is a string obtained by encoding the target image by base64 encoding
  • the second base64 string is a square image obtained by intercepting the target image into a square image. The resulting string.
  • Step S105 The data update interface provided by the native framework is called through the HTML page, and each first data structure in the device memory is correspondingly updated to the second data structure.
  • the data update interface provided by the native framework is called through the HTML page.
  • the data update module of the native framework is enabled, and each first data structure in the device memory is one by one. Correspondingly updates to the second data structure.
  • Step S106 Render the second base64 string into a thumbnail for display through an HTML page.
  • the data reading interface provided by the native framework can also be called.
  • the data reading module of the native framework is enabled to read each second data in the device memory. Structure; after the second data structure is obtained by calling the data reading interface through the HTML page, the second base64 string in each second data structure is rendered into thumbnails, and the thumbnails of each target picture are displayed on the HTML page.
  • the thumbnail when the thumbnail is displayed on the HTML page, the thumbnail captures the middle area of the target picture to form a square picture for display, regardless of the aspect ratio of the original picture, without stretching or deformation, and has a good user experience.
  • Step S107 In response to the picture preview operation, call the picture preview tool of the native frame through the HTML page, read the second data structure in the device memory, and obtain the target picture according to the picture path in the second data structure corresponding to the picture to be displayed. Show.
  • the user can manipulate the thumbnails to preview the pictures.
  • the picture preview operation is a click operation on a thumbnail.
  • the thumbnail The picture corresponding to the thumbnail is the picture to be displayed, that is, the thumbnail of the picture to be displayed is the thumbnail operated by the picture preview operation.
  • the picture preview tool of the native frame After responding to the user's click operation on the picture to be displayed through the HTML page, the picture preview tool of the native frame is called.
  • the picture preview tool is started through the native frame, and each second data structure in the device memory is read, and the The image path in the second data structure, the local storage path of the picture to be displayed is obtained, and the original image of the target picture is obtained for display.
  • the first base64 string and the picture path obtained from the target picture conversion are first formed into a first data structure and stored in the device memory through a native frame, and then called through an HTML page
  • the data reading interface provided by the native framework reads the first data structure from the device memory, intercepts the picture represented by the first base64 string into a square picture, and then converts the second base64 string, picture path and
  • the first base64 string forms a second data structure, and then calls the data update interface provided by the native framework to update the first data structure in the device memory to the second data structure.
  • the second base64 string can be rendered into an HTML page
  • the thumbnails are displayed.
  • the displayed thumbnails are square pictures, which have nothing to do with the aspect ratio of the original image. They will not be stretched or deformed when displayed on the HTML page. When the user needs to preview a certain picture, it will be displayed.
  • the thumbnail of the picture is used for the picture preview operation.
  • the HTM The L page calls the image preview tool of the native frame, reads the second data structure in the device memory, and obtains the target picture for display according to the picture path in the second data structure corresponding to the picture to be displayed.
  • the HTML page and the native framework jointly maintain the data structure set in memory, which can quickly respond to the user's picture preview operation and display the original image. Therefore, the user can view the original image of the selected image faster. Map, improve the picture display effect in hybrid applications, and improve user experience.
  • the user can swipe left and right to view each preview picture.
  • the user can also use Delete the second data structure in the device memory to implement the delete operation on the picture.
  • the image preview tool of the native frame is called through the HTML page, reads each second data structure in the device memory, and displays the next one in the direction of the image sliding operation.
  • the target picture so that the HTML page can display the next target picture in the direction of the picture sliding operation. For example, when the direction of the picture sliding operation is from the left to the right of the terminal, the previous picture of the current target picture is displayed, and when the direction of the picture sliding operation is from the right to the left of the terminal, the next picture of the current target picture is displayed Zhang.
  • the user can manipulate the thumbnails to delete the pictures.
  • the picture deletion operation is a long-time touch operation on the thumbnails.
  • the The picture corresponding to the thumbnail is the picture to be deleted, that is, the thumbnail of the picture to be deleted is the thumbnail operated by the picture deletion operation.
  • the HTML page After the HTML page responds to the user's picture deletion operation of the picture to be deleted, the data deletion interface provided by the native framework is called, the data deletion module of the native framework is started, the second data structure corresponding to the picture to be deleted in the device memory is deleted, and then displayed again
  • the HTML page calls the data reading interface, starts the data reading module of the native frame, and re-reads the second base64 string in each second data structure in the device memory, renders it as a thumbnail, and displays it again.
  • Embodiment 2 of the present application provides a picture processing device for a hybrid application, which can be run in a terminal device, and corresponds to the picture processing method for a hybrid application provided in the foregoing embodiment 1.
  • FIG. 2 is a block diagram of a picture processing apparatus for a hybrid application provided in Embodiment 2 of the present application.
  • the picture processing apparatus for a hybrid application includes an HTML page 30 and a native frame 40.
  • the HTML page 30 is used to call a photo album tool or a photographing tool of the native frame 40 in response to a picture selection operation;
  • the native frame 40 is used to determine a target picture, convert the target picture into a first base64 string, form a first data structure of the picture path of the target picture and the first base64 string, and store the first data structure in the device memory;
  • the HTML page 30 is used to call the data reading interface provided by the native framework 40;
  • the native frame 40 is configured to read a first data structure from a device memory
  • the HTML page 30 is used to obtain the first base64 string in the first data structure, intercept the target pictures represented by the first base64 string into square pictures, and convert the intercepted square picture into the second base64 string, and the target picture
  • the image path, the first base64 string and the second base64 string form a second data structure, and call the data update interface provided by the native framework 40;
  • the native framework 40 is configured to update a first data structure in the device memory to a second data structure
  • the HTML page 30 is used to render the second base64 string into a thumbnail for display, and in response to the image preview operation, call the image preview tool of the native frame 40;
  • the native frame 40 is used to read the second data structure in the device memory, and obtain the target picture for display according to the picture path in the second data structure corresponding to the picture to be displayed.
  • the thumbnail of the picture to be displayed is used by the picture preview operation. Thumbnail of the operation.
  • the HTML page responds to the picture selection operation, calls the native frame album tool or photographing tool, and after the called album tool or photographing tool determines the target picture, the target picture is first determined by the native frame through the native frame.
  • the converted first base64 string and the image path form the first data structure and store it in the device memory, and then call the data reading interface provided by the native framework through the HTML page, read the first data structure from the device memory,
  • the picture represented by the base64 string is intercepted into a square picture, and then the second base64 string, the picture path and the first base64 string obtained by converting the square picture form a second data structure, and then the data update interface provided by the native framework is called, and the device memory is stored.
  • the first data structure is updated to the second data structure.
  • the second base64 string can be rendered into a thumbnail for display through an HTML page.
  • the displayed thumbnail is a square picture, regardless of the aspect ratio of the original image. There will be no stretching or deformation during the display; when the user needs to When a picture is previewed, the thumbnail of the picture to be displayed is subjected to a picture preview operation.
  • the picture preview tool of the native frame is called through the HTML page, the second data structure in the device memory is read, and according to the to-be-displayed The image path in the second data structure corresponding to the image acquires the target image for display, achieving the purpose of displaying the original image through the HTML page.
  • the HTML page and the native framework jointly maintain the data structure set in memory, which can quickly respond to users
  • the preview operation of the image is performed to display the original image. Therefore, the user can view the original image of the selected image faster, improve the image display effect in the hybrid application, and improve the user experience.
  • a plurality of the second data structures are stored in the device memory, and the HTML page is further used to call the image preview tool of the native frame in response to the image sliding operation; the native frame is also used to read each of the first data structures in the device memory. Two data structures, and display the next target picture in the direction of the picture sliding operation.
  • the HTML page is further configured to call a data deletion interface provided by the native framework in response to the picture deletion operation; the native framework is further used to delete a second data structure corresponding to the picture to be deleted in the device memory, wherein The thumbnail is the thumbnail operated by the image deletion operation; the native frame is also used to read the second base64 string in each second data structure in the device memory; the HTML page is also used to read each second base64 string read by the native frame Rendered as thumbnails for re-display.
  • the picture data can be updated in time in response to a user's deletion operation.
  • the target picture is a rectangle.
  • the specific steps include: determining the direction of the target picture and turning; The relationship between the width and height; if the height of the target picture is greater than the width, the square with the width as the side length is intercepted from the middle of the target picture to obtain a square picture; if the width of the target picture is greater than the height, the height is taken from the middle of the target picture as Squares with sides long to get square pictures.
  • both the first data structure and the second data structure are arrays.
  • This embodiment also provides a computer device, such as a smart phone, tablet computer, notebook computer, desktop computer, rack server, blade server, tower server, or rack server (including a stand-alone server, or Server cluster consisting of multiple servers).
  • the computer device 20 of this embodiment includes, but is not limited to, a memory 21 and a processor 22 that can be communicatively connected to each other through a system bus, as shown in FIG. 3.
  • FIG. 3 only shows the computer device 20 with components 21-22, but it should be understood that it is not required to implement all the illustrated components, and more or fewer components may be implemented instead.
  • the memory 21 (ie, a readable storage medium) includes a flash memory, a hard disk, a multimedia card, a card-type memory (for example, SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), Read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disks, optical disks, etc.
  • the memory 21 may be an internal storage unit of the computer device 20, such as a hard disk or a memory of the computer device 20.
  • the memory 21 may also be an external storage device of the computer device 20, for example, a plug-in hard disk, a smart media card (SMC), and a secure digital (Secure Digital, SD) card, flash card, etc.
  • the memory 21 may also include both the internal storage unit of the computer device 20 and its external storage device.
  • the memory 21 is generally used to store an operating system and various types of application software installed in the computer device 20, for example, program code of a picture processing apparatus of the hybrid application of the second embodiment.
  • the memory 21 may also be used to temporarily store various types of data that have been output or are to be output.
  • the processor 22 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip in some embodiments.
  • the processor 22 is generally used to control the overall operation of the computer device 20.
  • the processor 22 is configured to run program code or process data stored in the memory 21, such as a picture processing device for a hybrid application.
  • This embodiment also provides a computer-readable storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory (for example, SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), Read memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disks, optical disks, servers, App application stores, etc., which have computer programs stored on them, When the program is executed by the processor, the corresponding function is realized.
  • the computer-readable storage medium of this embodiment is used for a picture processing apparatus of a hybrid application, and when executed by a processor, implements a picture processing method of the hybrid application of Embodiment 1.

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Mathematical Physics (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

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

Description

混合应用的图片处理方法、装置、计算机设备及存储介质
本申请申明享有2018年7月18日递交的申请号为CN201810788671.7、名称为“混合应用的图片处理方法、装置、计算机设备及存储介质”的中国专利申请的优先权，该中国专利申请的整体内容以参考的方式结合在本申请中。
技术领域
本申请涉及信息处理技术领域，尤其涉及一种混合应用的图片处理方法、装置、计算机设备及存储介质。
背景技术
混合应用(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页面用于响应于图片选择操作，调用原生框架的相册工具或拍照工具；原生框架用于确定目标图片，将目标图片转换为第一base64串，并将目标图片的图片路径和第一base64串形成第一数据结构，将第一数据结构存储至设备内存；HTML页面用于调用原生框架提供的数据读取接口；原生框架用于从设备内存中读取第一数据结构；HTML页面用于获取第一数据结构中的第一base64串，将第一base64串表征的图片截取为正方形图片，并将截取后的正方形图片转换为第二base64串，并将目标图片的图片路径、第一base64串和第二base64串形成第二数据结构，并调用原生框架提供的数据更新接口；原生框架用于将设备内存中的第一数据结构更新为第二数据结构；HTML页面用于将各个第二base64串渲染成缩略图进行展示，并响应于图片预览操作，调用原生框架的图片预览工具；原生框架用于读取设备内存中的第二数据结构，并根据待展示图片对应的第二数据结构中的图片路径获取目标图片进行展示，其中，待展示图片的缩略图为图片预览操作所操作的缩略图。
为实现上述目的，本申请还提供一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，处理器执行程序时实现混合应用的图片处理方法的以下步骤：
响应于图片选择操作，通过混合应用的超文本标记语言HTML页面调用所述混合应用的原生框架的相册工具或拍照工具，确定目标图片；通过所述原生框架将所述目标图片转换为第一base64串，并将所述目标图片的图片路径和所述第一base64串形成第一数据结构，将所述第一数据结构存储至设备内存；通过所述HTML页面调用所述原生框架提供的数据读取接口，从所述设备内存中读取所述第一数据结构，获取所述第一数据结构中的第一base64串，将所述第一base64串表征的图片截取为正方形图片；通过所述HTML页面将截取后的所述正方形图片转换为第二base64串，并将所述目标图片的图片路径、所述第一base64串和所述第二base64串形成第二数据结构；通过所述HTML页面调用所述原生 框架提供的数据更新接口，将所述设备内存中的所述第一数据结构更新为所述第二数据结构；通过所述HTML页面将所述第二base64串渲染成缩略图进行展示；以及响应于图片预览操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的所述第二数据结构，并根据待展示图片对应的所述第二数据结构中的图片路径获取所述目标图片进行展示，其中，所述待展示图片的缩略图为所述图片预览操作所操作的缩略图。
为实现上述目的，本申请还提供计算机可读存储介质，其上存储有计算机程序，程序被处理器执行时实现混合应用的图片处理方法的以下步骤：
响应于图片选择操作，通过混合应用的超文本标记语言HTML页面调用所述混合应用的原生框架的相册工具或拍照工具，确定目标图片；通过所述原生框架将所述目标图片转换为第一base64串，并将所述目标图片的图片路径和所述第一base64串形成第一数据结构，将所述第一数据结构存储至设备内存；通过所述HTML页面调用所述原生框架提供的数据读取接口，从所述设备内存中读取所述第一数据结构，获取所述第一数据结构中的第一base64串，将所述第一base64串表征的图片截取为正方形图片；通过所述HTML页面将截取后的所述正方形图片转换为第二base64串，并将所述目标图片的图片路径、所述第一base64串和所述第二base64串形成第二数据结构；通过所述HTML页面调用所述原生框架提供的数据更新接口，将所述设备内存中的所述第一数据结构更新为所述第二数据结构；通过所述HTML页面将所述第二base64串渲染成缩略图进行展示；以及响应于图片预览操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的所述第二数据结构，并根据待展示图片对应的所述第二数据结构中的图片路径获取所述目标图片进行展示，其中，所述待展示图片的缩略图为所述图片预览操作所操作的缩略图。
本申请提供的混合应用的图片处理方法、装置、计算机设备及存储介质，确定目标图片后，首先通过原生框架将由目标图片转换得到的第一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 (20)

  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. 根据权利要求6所述的混合应用的图片处理装置，其特征在于，所述目标图片为长方形，所述HTML页面将所述第一base64串表征的图片截取为正方形图片时，具体执行的步骤包括：
    判断所述第一base64串表征的图片的方向，进行转向；
    判断所述第一base64串表征的图片的宽和高的大小关系；
    如果所述第一base64串表征的图片的高大于宽，则从所述第一base64串表征的图片中间截取以宽为边长的正方形，得到所述正方形图片；
    如果所述第一base64串表征的图片的宽大于高，则从所述第一base64串表征的图片中间截取以高为边长的正方形，得到所述正方形图片。
  10. 根据权利要求6所述的混合应用的图片处理装置，其特征在于，所述第一数据结构和所述第二数据结构均为数组。
  11. 一种计算机设备，所述计算机设备包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现混合应用的图片处理方法的以下步骤：
    响应于图片选择操作，通过混合应用的超文本标记语言HTML页面调用所述混合应用的原生框架的相册工具或拍照工具，确定目标图片；
    通过所述原生框架将所述目标图片转换为第一base64串，并将所述目标图片的图片路径和所述第一base64串形成第一数据结构，将所述第一数据结构存储至设备内存；
    通过所述HTML页面调用所述原生框架提供的数据读取接口，从所述设备内存中读取所述第一数据结构，获取所述第一数据结构中的第一base64串，将所述第一base64串表征的图片截取为正方形图片；
    通过所述HTML页面将截取后的所述正方形图片转换为第二base64串，并将所述目标图片的图片路径、所述第一base64串和所述第二base64串形成第二数据结构；
    通过所述HTML页面调用所述原生框架提供的数据更新接口，将所述设备内存中的所述第一数据结构更新为所述第二数据结构；
    通过所述HTML页面将所述第二base64串渲染成缩略图进行展示；以及
    响应于图片预览操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的所述第二数据结构，并根据待展示图片对应的所述第二数据结构中的图片路径获取所述目标图片进行展示，其中，所述待展示图片的缩略图为所述图片预览操作所操作的缩略图。
  12. 根据权利要求11所述的计算机设备，其特征在于，所述设备内存中存储有多个所述第二数据结构，在响应于图片预览操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的所述第二数据结构，并根据待展示图片对应的所述第二数据结构中的图片路径获取所述目标图片进行展示的步骤之后，所述处理器执行所述程序时实现混合应用的图片处理方法还包括以下步骤：
    响应于图片滑动操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的各个所述第二数据结构，并按照所述图片滑动操作的方向展示下一张所述目标图片。
  13. 根据权利要求11所述的计算机设备，其特征在于，在通过所述HTML页面将所述第二base64串渲染成缩略图进行展示的步骤之后，所述处理器执行所述程序时实现混合应用的图片处理方法还包括以下步骤：
    响应于图片删除操作，通过所述HTML页面调用所述原生框架提供的数据删除接口，删除所述设备内存中待删除图片对应的所述第二数据结构，其中，所述待删除图片的缩略图为所述图片删除操作所操作的缩略图；
    通过所述HTML页面调用所述数据读取接口，读取所述设备内存中各个所述第二数据结构中的所述第二base64串，渲染成缩略图重新进行展示。
  14. 根据权利要求11所述的计算机设备，其特征在于，所述目标图片为长方形，通过所述HTML页面调用所述原生框架提供的数据读取接口，从所述设备内存中读取所述第一数据结构，获取所述第一数据结构中的第一base64串，将所述第一base64串表征的图片截取为正方形图片的步骤包括：
    判断所述第一base64串表征的图片的方向，进行转向；
    判断所述第一base64串表征的图片的宽和高的大小关系；
    如果所述第一base64串表征的图片的高大于宽，则从所述第一base64串表征的图片中间截取以宽为边长的正方形，得到所述正方形图片；
    如果所述第一base64串表征的图片的宽大于高，则从所述第一base64串表征的图片中间截取以高为边长的正方形，得到所述正方形图片。
  15. 根据权利要求11所述的计算机设备，其特征在于，所述第一数据结构和所述第二数据结构均为数组。
  16. 一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述程序被处理器执行时实现混合应用的图片处理方法的以下步骤：
    响应于图片选择操作，通过混合应用的超文本标记语言HTML页面调用所述混合应用的原生框架的相册工具或拍照工具，确定目标图片；
    通过所述原生框架将所述目标图片转换为第一base64串，并将所述目标图片的图片路径和所述第一base64串形成第一数据结构，将所述第一数据结构存储至设备内存；
    通过所述HTML页面调用所述原生框架提供的数据读取接口，从所述设备内存中读取所述第一数据结构，获取所述第一数据结构中的第一base64串，将所述第一base64串表征的图片截取为正方形图片；
    通过所述HTML页面将截取后的所述正方形图片转换为第二base64串，并将所述目标图片的图片路径、所述第一base64串和所述第二base64串形成第二数据结构；
    通过所述HTML页面调用所述原生框架提供的数据更新接口，将所述设备内存中的所述第一数据结构更新为所述第二数据结构；
    通过所述HTML页面将所述第二base64串渲染成缩略图进行展示；以及
    响应于图片预览操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的所述第二数据结构，并根据待展示图片对应的所述第二数据结构中的图片路径获取所述目标图片进行展示，其中，所述待展示图片的缩略图为所述图片预览操作所操作的缩略图。
  17. 根据权利要求16所述的计算机可读存储介质，其特征在于，所述设备内存中存储有多个所述第二数据结构，在响应于图片预览操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的所述第二数据结构，并根据待展示图片对应的所述第二数据结构中的图片路径获取所述目标图片进行展示的步骤之后，所述程序被处理器执行时实现混合应用的图片处理方法还包括以下步骤：
    响应于图片滑动操作，通过所述HTML页面调用所述原生框架的图片预览工具，读取所述设备内存中的各个所述第二数据结构，并按照所述图片滑动操作的方向展示下一张所述目标图片。
  18. 根据权利要求16所述的计算机可读存储介质，其特征在于，在通过所述HTML页面将所述第二base64串渲染成缩略图进行展示的步骤之后，所述程序被处理器执行时实现混合应用的图片处理方法还包括以下步骤：
    响应于图片删除操作，通过所述HTML页面调用所述原生框架提供的数据删除接口，删除所述设备内存中待删除图片对应的所述第二数据结构，其中，所述待删除图片的缩略图为所述图片删除操作所操作的缩略图；
    通过所述HTML页面调用所述数据读取接口，读取所述设备内存中各个所述第二数据结构中的所述第二base64串，渲染成缩略图重新进行展示。
  19. 根据权利要求16所述的计算机可读存储介质，其特征在于，所述目标图片为长方形，通过所述HTML页面调用所述原生框架提供的数据读取接口，从所述设备内存中读取所述第一数据结构，获取所述第一数据结构中的第一base64串，将所述第一base64串表征的图片截取为正方形图片的步骤包括：
    判断所述第一base64串表征的图片的方向，进行转向；
    判断所述第一base64串表征的图片的宽和高的大小关系；
    如果所述第一base64串表征的图片的高大于宽，则从所述第一base64串表征的图片中间截取以宽为边长的正方形，得到所述正方形图片；
    如果所述第一base64串表征的图片的宽大于高，则从所述第一base64串表征的图片 中间截取以高为边长的正方形，得到所述正方形图片。
  20. 根据权利要求16所述的计算机可读存储介质，其特征在于，所述第一数据结构和所述第二数据结构均为数组。
PCT/CN2018/107524 2018-07-18 2018-09-26 混合应用的图片处理方法、装置、计算机设备及存储介质 WO2020015162A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201810788671.7 2018-07-18
CN201810788671.7A CN108875085B (zh) 2018-07-18 2018-07-18 混合应用的图片处理方法、装置、计算机设备及存储介质

Publications (1)

Publication Number Publication Date
WO2020015162A1 true WO2020015162A1 (zh) 2020-01-23

Family

ID=64303138

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2018/107524 WO2020015162A1 (zh) 2018-07-18 2018-09-26 混合应用的图片处理方法、装置、计算机设备及存储介质

Country Status (2)

Country Link
CN (1) CN108875085B (zh)
WO (1) WO2020015162A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113780266A (zh) * 2021-09-18 2021-12-10 武汉众邦银行股份有限公司 一种h5实现身份证扫描识别ocr的方法、装置及存储介质

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111159441B (zh) * 2019-12-25 2023-07-25 新方正控股发展有限责任公司 图片编辑方法、图片编辑装置和计算机可读存储介质
CN111984596B (zh) * 2020-07-08 2022-05-10 福建亿能达信息技术股份有限公司 一种ui框架的文件上传分组管理方法、装置、设备和介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103902588A (zh) * 2012-12-27 2014-07-02 腾讯科技（深圳）有限公司 网页访问方法及用户终端
CN105577813A (zh) * 2015-12-31 2016-05-11 北京奇艺世纪科技有限公司 一种web混合应用的更新方法和系统
CN107229454A (zh) * 2016-03-24 2017-10-03 阿里巴巴集团控股有限公司 混合视图的显示方法及装置
US20180004471A1 (en) * 2016-07-01 2018-01-04 Canon Kabushiki Kaisha Information processing apparatus, information processing method, and non-transitory computer-readable storage medium storing program
CN107729467A (zh) * 2017-10-12 2018-02-23 江苏鸿信系统集成有限公司 基于PhoneGap的web图文混合内容保存方法
CN108182060A (zh) * 2018-01-31 2018-06-19 北京腾云天下科技有限公司 一种混合应用的埋点方法、移动终端及系统

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20060293904A1 (en) * 2005-06-23 2006-12-28 Microsoft Corporation Generating and rendering electronic business cards
CN107423389A (zh) * 2017-07-20 2017-12-01 努比亚技术有限公司 一种网页缩略图生成方法、装置及计算机可读存储介质
CN107633013A (zh) * 2017-08-17 2018-01-26 广州酷狗计算机科技有限公司 图片页面生成方法、装置及计算机可读存储介质
CN107577757B (zh) * 2017-08-31 2018-09-04 武汉斗鱼网络科技有限公司 页面瀑布流布局优化方法、存储介质、电子设备及系统

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103902588A (zh) * 2012-12-27 2014-07-02 腾讯科技（深圳）有限公司 网页访问方法及用户终端
CN105577813A (zh) * 2015-12-31 2016-05-11 北京奇艺世纪科技有限公司 一种web混合应用的更新方法和系统
CN107229454A (zh) * 2016-03-24 2017-10-03 阿里巴巴集团控股有限公司 混合视图的显示方法及装置
US20180004471A1 (en) * 2016-07-01 2018-01-04 Canon Kabushiki Kaisha Information processing apparatus, information processing method, and non-transitory computer-readable storage medium storing program
CN107729467A (zh) * 2017-10-12 2018-02-23 江苏鸿信系统集成有限公司 基于PhoneGap的web图文混合内容保存方法
CN108182060A (zh) * 2018-01-31 2018-06-19 北京腾云天下科技有限公司 一种混合应用的埋点方法、移动终端及系统

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113780266A (zh) * 2021-09-18 2021-12-10 武汉众邦银行股份有限公司 一种h5实现身份证扫描识别ocr的方法、装置及存储介质

Also Published As

Publication number Publication date
CN108875085B (zh) 2023-04-07
CN108875085A (zh) 2018-11-23

Similar Documents

Publication Publication Date Title
US20200104041A1 (en) System for capturing and replaying screen gestures
WO2021068331A1 (zh) 一种网页自适应布局方法、服务器及计算机可读存储介质
CN111107418B (zh) 视频数据处理方法、装置、计算机设备和存储介质
US8286076B1 (en) Rendering approximate webpage screenshot client-side
KR102278932B1 (ko) 애플리케이션 프로그램 처리 방법 및 단말 디바이스
WO2017173781A1 (zh) 视频帧截取方法和装置
WO2020015162A1 (zh) 混合应用的图片处理方法、装置、计算机设备及存储介质
US10430456B2 (en) Automatic grouping based handling of similar photos
US9754350B2 (en) Systems and methods of automatic image sizing
US8532435B1 (en) System and method for automatically adapting images
WO2014206072A1 (zh) 预览网页的方法及系统
WO2013123810A1 (zh) 网页的显示方法、装置、浏览器及用户终端
US20150058708A1 (en) Systems and methods of character dialog generation
US11190653B2 (en) Techniques for capturing an image within the context of a document
CN110750664A (zh) 图片的显示方法及装置
CN112926009A (zh) 图片资源的处理方法、装置、电子设备和介质
US9360339B2 (en) Rendering maps with canvas elements
JP2012079188A (ja) 体裁情報処理装置及び方法
US20140111678A1 (en) Method and system for capturing, storing and displaying animated photographs
KR20230138393A (ko) 프리뷰 영상을 생성하는 방법 및 장치
US9361852B2 (en) Media reproduction device
US9161009B2 (en) System, terminal device, and image capturing method
WO2016173136A1 (zh) 一种终端应用处理方法及其装置
CN112364282A (zh) 网页暗黑模式实现方法、装置、介质及电子设备
CN111859213A (zh) 动态图形生成方法、装置、计算机设备和存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 18927052

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 18.05.2021)

122 Ep: pct application non-entry in european phase

Ref document number: 18927052

Country of ref document: EP

Kind code of ref document: A1