WO2020220773A1 - 图片预览信息的显示方法、装置、电子设备及计算机可读存储介质 - Google Patents

图片预览信息的显示方法、装置、电子设备及计算机可读存储介质 Download PDF

Info

Publication number
WO2020220773A1
WO2020220773A1 PCT/CN2020/073384 CN2020073384W WO2020220773A1 WO 2020220773 A1 WO2020220773 A1 WO 2020220773A1 CN 2020073384 W CN2020073384 W CN 2020073384W WO 2020220773 A1 WO2020220773 A1 WO 2020220773A1
Authority
WO
WIPO (PCT)
Prior art keywords
interface
preview
picture
information input
preview view
Prior art date
Application number
PCT/CN2020/073384
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 WO2020220773A1 publication Critical patent/WO2020220773A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/60—Editing figures and text; Combining figures or text

Definitions

  • the present disclosure relates to information display technology, for example, to a method, device, electronic device, and computer-readable storage medium for displaying picture preview information.
  • the picture and text added by the user are generally treated as a whole. As the amount of text input increases, the picture will be hidden outside the information input interface. When the user needs to modify the added text For pictures, the current display content of the information input interface needs to be adjusted.
  • the picture and text are edited and displayed as the same level of information.
  • the text has a large amount of information, it will affect the display of the picture, and the user cannot view the currently added picture in real time when editing the text.
  • the text is highly related to the picture, the picture is blocked or hidden, which may affect the editing effect of the text and reduce the editing efficiency of the user.
  • the embodiments of the present disclosure provide a method, a device, an electronic device, and a computer-readable storage medium for displaying picture preview information, which enrich the preview form of picture information and improve the editing efficiency of input information.
  • the embodiment of the present disclosure provides a method for displaying picture preview information, including:
  • a preview view interface filled with the at least one target picture is generated, wherein the preview view interface is used to compare the filled at least one target picture Preview the picture as a small picture;
  • the preview view interface is set at the top of the information input interface for display.
  • the embodiment of the present disclosure also provides a display device for picture preview information, including:
  • the target picture obtaining module is configured to obtain at least one target picture selected by the user to add in the information input interface
  • the preview view interface generating module is configured to generate a preview view interface filled with the at least one target picture in response to determining that the top of the information input interface is not provided with a preview view interface, wherein the preview view interface is used to Preview the at least one filled target picture as a small picture;
  • the preview view interface display module is configured to display the preview view interface on the top of the information input interface.
  • An embodiment of the present disclosure also provides an electronic device, which includes:
  • One or more processors are One or more processors;
  • Memory used to store one or more programs
  • the one or more processors When the one or more programs are executed by the one or more processors, the one or more processors implement the method for displaying picture preview information according to any embodiment of the present disclosure.
  • the embodiment of the present disclosure also provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the method for displaying picture preview information as described in any embodiment of the present disclosure is realized.
  • FIG. 1a is a flowchart of a method for displaying picture preview information according to Embodiment 1 of the present disclosure
  • FIG. 1b is a schematic diagram of a preview view interface provided by Embodiment 1 of the present disclosure.
  • Fig. 2a is a flowchart of a method for displaying picture preview information according to the second embodiment of the present disclosure
  • FIG. 2b is a schematic diagram of an information input interface provided by Embodiment 2 of the present disclosure.
  • FIG. 3a is a flowchart of a method for displaying picture preview information provided by Embodiment 3 of the present disclosure
  • FIG. 3b is a schematic diagram of a preview view interface provided by Embodiment 3 of the present disclosure.
  • FIG. 4 is a schematic structural diagram of a display device for picture preview information provided by the fourth embodiment of the present disclosure.
  • FIG. 5 is a schematic structural diagram of an electronic device according to Embodiment 5 of the present disclosure.
  • FIG. 1a is a flowchart of a method for displaying picture preview information provided in Embodiment 1 of the present disclosure.
  • This embodiment can be applied to a situation where input information containing pictures is edited in a social application.
  • the method can be previewed by pictures.
  • the information display device is implemented.
  • the device can be implemented in at least one of software and hardware.
  • the device can be configured in an electronic device.
  • the electronic device can be a smart terminal, such as a mobile phone, a tablet computer, etc. .
  • the method includes the following steps.
  • Step 110 Acquire at least one target picture selected by the user to add in the information input interface.
  • the user publishes information through social applications.
  • the published information may be topic information, or reply information or comment information for topic information.
  • the information posted by the user includes a picture, the user needs to select the target picture to be added through the information input interface.
  • the information input interface includes a picture selection logo. By clicking on the picture selection logo, the user can browse local or network pictures and select a target picture therefrom.
  • the information input interface includes: a comment input interface.
  • Obtaining at least one target picture selected by the user to add in the information input interface may include the following steps.
  • the image selector is provided to the user to select the image.
  • the user After receiving the feedback of the picture selector, the user selects at least one target picture to be added.
  • the information input by the user is comment information
  • the information input interface is a comment input interface.
  • the user triggers the comment input interface to detect a request for adding a picture comment by clicking an icon on the comment input interface or any other operation.
  • the picture comment adding request is used to request the picture selector.
  • the picture selector is used to browse pictures and is a selection control associated with the set picture library. After receiving the target picture information fed back by the user through the picture selector, follow-up operations are performed. Therefore, this optional implementation manner provides a way to determine the target picture.
  • Step 120 In response to determining that a preview view interface is not set on the top of the information input interface, generate a preview view interface filled with the at least one target picture.
  • the preview view interface is used to preview the at least one filled target picture as a thumbnail.
  • the target picture is filled in the preview view interface according to the set layout rules, so that the target picture It is displayed in the preview view interface as a small picture.
  • a scroll bar is provided in the preview view interface to hide and display the redundant target pictures when the number of target pictures is greater than the set number.
  • the corresponding picture in the preview view interface may be displayed in the center.
  • the at least one target picture in response to determining that a preview view interface is provided on the top of the information input interface, is additionally filled in the preview view interface to compare all The display content in the preview view interface is updated and displayed.
  • the display mode of the preview view interface is provided when the input information contains pictures.
  • the target picture is additionally filled in the preview view interface, so that all pictures currently edited by the user are in the preview view interface.
  • Step 130 Set the preview view interface on the top of the information input interface for display.
  • the preview view interface is set to be displayed at the top of the information input interface.
  • the way of setting the preview view interface at the top of the information input interface for display can be to add a preview view interface at the top of the information input interface when the area of the information input interface is fixed; When the area of the interface is not fixed, expand the area of the information input interface so that the preview view interface is set on the top of the enlarged information input interface.
  • the picture when the input information contains a picture, the picture is filled in the preview view interface at the top of the information input interface and displayed, which ensures that when the user edits the information, the picture can be previewed on the top to avoid the picture being blocked or hidden happensing. It solves the problem of occluding or hiding the picture due to the diversity of the display form of the text when the picture and the text are displayed as the same level of information editing in the related technology. It also solves the user editing caused by the picture being occluded or hidden The problem of reduced information efficiency has realized the effect of enriching the preview form of picture information and improving the editing efficiency of input information.
  • Fig. 2a is a flowchart of a method for displaying picture preview information according to the second embodiment of the disclosure. This embodiment can be combined with the optional solutions in one or more of the above embodiments.
  • setting the preview view interface on the top of the information input interface for display may include the following steps.
  • the information input interface is divided into a first display area and a second display area from top to bottom.
  • the area area of the first display area matches the area of the preview view interface.
  • the preview view interface is overlaid on the first display area for display, and the current display content in the information input interface is moved to the second display area for display.
  • the method includes the following steps.
  • Step 210 Obtain at least one target picture selected by the user to add in the information input interface.
  • a picture preview component is generated based on a model-view-view model (Model-View-ViewModel, MVVM) framework, and the picture preview component includes a view model.
  • the view model is used to generate the preview view interface according to the injected data source.
  • MVVM is an improved version of Model-View-Controller (MVC).
  • MVC Model-View-Controller
  • MVVM abstracts the state and behavior of the view in MVC, and separates the preview view interface from the business logic.
  • the view model can extract the data of the model while processing the business logic involved in the content displayed in the preview view interface.
  • this optional implementation provides a low-level implementation method for establishing a preview view interface.
  • the view model is used to block the model and the preview view interface, that is, a black box is added between the two.
  • a black box is added between the two.
  • Step 220 Determine whether a preview view interface is set on the top of the information input interface. If a preview view interface is not set on the top of the information input interface, go to step 230, if there is a preview view interface set on the top of the information input interface , Go to step 240.
  • Step 230 Generate a preview view interface filled with the at least one target picture, and perform step 250.
  • the preview view interface is used to preview the at least one filled target picture as a thumbnail.
  • generating a preview view interface filled with the at least one target picture may include the following steps.
  • At least one target picture obtained is used as the input data of the view model, and correspondingly, the view model outputs a preview containing the target picture View interface.
  • Step 240 Add the at least one target picture to the preview view interface to update and display the display content in the preview view interface, and step 250 is performed.
  • the currently used target picture may be used as the input data of the view model, or only the newly added target picture may be used as the input data of the view model, and correspondingly generated updates The preview view interface.
  • Step 250 Move the top boundary or the bottom boundary of the information input interface to increase the area of the display area of the information input interface.
  • the area of the added area in the display area of the information input interface matches the area of the preview view interface.
  • the area of the information input interface is not fixed. By moving the top or bottom border of the information input interface, the area of the display area of the information input interface can be increased, so that the enlarged information input interface can be To accommodate the preview view interface and the original information input interface.
  • Step 260 Divide the information input interface into a first display area and a second display area from top to bottom, and the area of the first display area matches the area of the preview view interface.
  • Step 270 Cover the preview view interface on the first display area for display, and move the current display content in the information input interface to the second display area for display.
  • the first display area and the second display area are arranged in the information input interface from top to bottom. Moreover, the area area of the first display area matches the area of the preview view interface, and the preview view interface is adaptively covered on the first display area for display. In order to improve the appreciation of the information input interface, this application does not limit the manner in which the preview view interface covers the first display area. At the same time, the current display content in the original information input interface is moved to the second display area for display. As a result, the method of adding the target picture when the preview view interface is not set on the information input interface is realized.
  • the update method of the information input interface is similar to that when the preview view interface is not set on the information input interface, except that the existing first display area and the second display area are updated. Update on the display area.
  • overlaying the preview view interface on the first display area for display may include the following steps.
  • the height of the top border of the preview view interface is set to the height of the top border of the information input interface so as to cover the preview view interface on the first display area for display.
  • This optional implementation manner provides an optional way of overlaying the preview view interface on the first display area, that is, setting the height of the top boundary of the preview view interface to the height of the top boundary of the information input interface.
  • the embodiment of the present disclosure provides a method of adding a target picture when the preview view interface is not set on the information input interface, which ensures that the preview view interface is reasonably set in the information input interface.
  • FIG. 3a is a flowchart of a method for displaying picture preview information according to Embodiment 3 of the present disclosure.
  • the method may further include: obtaining at least one deleted sheet selected by the user to delete in the currently displayed preview view interface. Picture, the fill picture in the preview view interface is associated with a corresponding delete option; the at least one deleted picture is removed from the preview view interface; in response to determining that the at least one deleted picture is removed from the preview After the view interface is removed, the preview view interface is filled with at least one picture, and the picture arrangement method in the preview view interface is updated.
  • the method includes the following steps.
  • Step 310 Obtain at least one target picture selected by the user to add in the information input interface.
  • Step 320 Determine whether a preview view interface is set on the top of the information input interface. If a preview view interface is not set on the top of the information input interface, perform step 330. If a preview view interface is set on the top of the information input interface , Go to step 340.
  • Step 330 Generate a preview view interface filled with the at least one target picture, and perform step 350.
  • Step 340 Add the at least one target picture to the preview interface to update and display the display content in the preview interface, and step 350 is executed.
  • Step 350 Set the preview view interface at the top of the information input interface for display.
  • Step 360 Obtain at least one deleted picture selected by the user to delete in the currently displayed preview view interface.
  • the deletion option corresponding to the fill picture association in the preview view interface is shown in FIG. 3b.
  • a collection list is established, and each picture in the preview view interface corresponds to a list item in the collection list.
  • the collection list can be understood as the data source of the MVVM framework, located at the front end of the MVVM framework. Add gestures to the collection list and inject multiple methods, such as data cleaning methods and callback methods.
  • the user's delete gesture operation can trigger the collection list to call the data cleaning method corresponding to the gesture operation, and apply the data cleaning method to one of the collection lists
  • the MVVM framework updates the preview view interface and the information input interface according to the updated collection list.
  • Step 370 Remove the at least one deleted picture from the preview view interface.
  • Step 380 In response to determining that the at least one deleted picture is removed from the preview view interface, the preview view interface is filled with at least one picture, and the picture arrangement method in the preview view interface is updated .
  • the update of the preview view interface by the MVVM framework can remove the deleted picture from the preview view interface. If at least one picture is filled in the preview view interface after the removal operation, you need to update the picture arrangement method in the preview view interface according to the set layout rules.
  • the preview view interface is removed from the top of the information input interface.
  • the following steps may be further included.
  • This optional implementation mode provides a way to restore the information input interface to the interface without preview view if no pictures are filled in the preview view interface after the removal operation, which ensures that the information input is no longer included in the input content.
  • the interface can be restored to its original state to reduce the occupation of terminal screen space.
  • Steps 360 to 380 can occur at any time after the preview view interface is displayed. As long as the preview view interface is included in the current information input interface, the removal operation can be performed, and in the multiple optional implementation manners in this embodiment Steps.
  • the technical solution of the embodiment of the present disclosure provides a detailed function of the preview view interface, which can perform a removal operation on pictures in the preview view interface, which provides convenience for the user to use the preview view interface. After the removal operation, when the preview view interface is filled with pictures, the technical solution of the embodiment of the present disclosure also provides an optional way to update the preview view interface, which ensures that the user can accurately browse the pictures.
  • the device can use at least software and hardware.
  • the device can generally be configured in an electronic device. As shown in FIG. 4, the device may include: a target picture acquisition module 410, a preview view interface generating module 420, and a preview view interface display module 430.
  • the target picture obtaining module 410 is configured to obtain at least one target picture selected by the user to add in the information input interface.
  • the preview view interface generating module 420 is configured to generate a preview view interface filled with the at least one target picture in response to determining that the top of the information input interface is not provided with a preview view interface.
  • the preview view interface is used to preview the filled picture as a small picture.
  • the preview view interface display module 430 is configured to display the preview view interface on the top of the information input interface.
  • the picture when the input information contains a picture, the picture is filled in the preview view interface at the top of the information input interface and displayed, which ensures that when the user edits the information, the picture can be previewed on the top to avoid the picture being blocked or hidden happensing. It solves the problem of occluding or hiding the picture due to the diversity of the display form of the text when the picture and the text are displayed as the same level of information editing in the related technology. It also solves the user editing caused by the picture being occluded or hidden The problem of reduced information efficiency has realized the effect of enriching the preview form of picture information and improving the editing efficiency of input information.
  • a preview view interface addition module may also be included.
  • the preview view interface addition module is configured to: after acquiring at least one target picture selected by the user to add in the information input interface, in response to determining that a preview view interface is set on the top of the information input interface, the at least one target picture It is additionally filled in the preview view interface to update the display content in the preview view interface.
  • the preview view interface display module 430 may include an area area increasing unit, a display area dividing unit, and a preview view interface display unit.
  • the area area increasing unit is configured to move the top boundary or the bottom boundary of the information input interface to increase the area area of the display area of the information input interface, and the area area increased in the display area of the information input interface is equal to The area of the preview view interface matches.
  • the display area dividing unit is configured to divide the information input interface into a first display area and a second display area from top to bottom, and the area of the first display area matches the area of the preview view interface.
  • the preview view interface display unit is configured to overlay the preview view interface on the first display area for display, and move the current display content in the information input interface to the second display area for display display.
  • the preview view interface display unit may be configured to: set the height of the top boundary of the preview view interface to the height of the top boundary of the information input interface, so as to display the preview view The interface is overlaid on the first display area for display.
  • it may also include a deleted picture acquisition module, a deleted picture removal module, and a picture arrangement mode update module.
  • the delete picture acquisition module is configured to acquire at least one deleted picture selected by the user to delete in the currently displayed preview view interface, and the filled picture in the preview view interface is associated with a corresponding delete option.
  • the deleted picture removal module is configured to remove the at least one deleted picture from the preview view interface.
  • the picture arrangement mode update module is configured to update the preview view interface after the preview view interface is filled with at least one picture after determining that the at least one deleted picture is removed from the preview view interface The arrangement of pictures in.
  • a preview view interface removal module may also be included.
  • the preview view interface removal module is configured to, after removing the at least one deleted picture from the preview view interface, in response to determining that the at least one deleted picture is removed from the preview view interface , The preview view interface is not filled with any pictures, and the preview view interface is removed from the top of the information input interface.
  • an area reduction unit may also be included.
  • the area reduction unit is configured to move the top boundary or the bottom boundary of the information input interface after the preview view interface is removed from the top of the information input interface to reduce the display area of the information input interface Area area, the area area reduced in the display area of the information input interface matches the area of the preview view interface.
  • the information input interface includes: a comment input interface.
  • the target picture acquiring module 410 may include a picture selector providing unit and a target picture receiving unit.
  • the picture selector providing unit is configured to provide the picture selector to the user for picture selection according to the picture comment addition request detected in the comment input interface.
  • the target picture receiving unit is configured to receive the at least one target picture that is fed back by the picture selector and added by the user.
  • it may also include a picture preview component generating module and a target picture filling module.
  • the picture preview component generating module is configured to generate a picture preview component based on the MVVM framework before acquiring at least one target picture selected by the user in the information input interface.
  • the picture preview component includes: a view model for The preview view interface is generated according to the injected data source.
  • the preview view interface generating module 420 includes a target image injection module.
  • the target picture injection module is configured to before acquiring at least one target picture selected by the user to add in the information input interface, in response to determining that the top of the information input interface is not provided with a preview view interface, the at least one target picture Inject into the view model of the picture preview component, so that the view model that completes the picture filling generates the preview view interface.
  • the display device for picture preview information provided by the embodiment of the present disclosure belongs to the same concept as the method for displaying picture preview information provided by any embodiment of the present disclosure.
  • the embodiments of the present disclosure have the same effects as the aforementioned embodiments.
  • the fifth embodiment of the present disclosure provides an electronic device.
  • FIG. 5 shows a schematic structural diagram of an electronic device (such as a client or a server) 500 suitable for implementing the embodiments of the present disclosure.
  • the electronic device 500 in the embodiment of the present disclosure may include, but is not limited to, mobile phones, notebook computers, digital broadcast receivers, personal digital assistants (Personal Digital Assistant, PDA), tablet computers (Pad), portable multimedia players (Portable Media Player, PMP), mobile terminals such as in-vehicle terminals (for example, in-vehicle navigation terminals), and fixed terminals such as digital televisions and desktop computers.
  • PDA Personal Digital Assistant
  • PMP portable multimedia players
  • mobile terminals such as in-vehicle terminals (for example, in-vehicle navigation terminals)
  • fixed terminals such as digital televisions and desktop computers.
  • the electronic device 500 shown in FIG. 5 is only an example, and should not bring any limitation to the function and scope of use of the embodiments of the present disclosure.
  • the electronic device 500 may include a processing device (such as a central processing unit, a graphics processor, etc.) 501, which may be based on a program stored in a read-only memory (Read-Only Memory, ROM) 502 or from a storage device 508
  • ROM Read-Only Memory
  • RAM Random Access Memory
  • a program loaded into a random access memory (Random Access Memory, RAM) 503 executes various appropriate actions and processes.
  • RAM 503 Random Access Memory
  • various programs and data required for the operation of the electronic device 500 are also stored.
  • the processing device 501, the ROM 502, and the RAM 503 are connected to each other through a bus 504.
  • An input/output (Input/Output, I/O) interface 505 is also connected to the bus 504.
  • the following devices can be connected to the I/O interface 505: including input devices 506 such as touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; including, for example, a liquid crystal display (LCD) Output devices 507 such as speakers, vibrators, etc.; storage devices 508 such as magnetic tapes, hard disks, etc.; and communication devices 509.
  • the communication device 509 may allow the electronic device 500 to perform wireless or wired communication with other devices to exchange data.
  • FIG. 5 shows an electronic device 500 having various devices, it should be understood that it is not required to implement or have all the illustrated devices. It may alternatively be implemented or provided with more or fewer devices.
  • the process described above with reference to the flowchart can be implemented as a computer software program.
  • the embodiments of the present disclosure include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program contains program code for executing the method shown in the flowchart.
  • the computer program may be downloaded and installed from the network through the communication device 509, or installed from the storage device 508, or installed from the ROM 502.
  • the processing device 501 the above-mentioned functions defined in the method for displaying picture preview information of the embodiment of the present disclosure are executed.
  • acquiring at least one target picture selected by the user to add in the information input interface in response to determining that the top of the information input interface is not provided with a preview view interface, generating a preview view interface filled with the at least one target picture
  • the preview view interface is used to preview the at least one filled target picture as a thumbnail; the preview view interface is set on the top of the information input interface for display.
  • the sixth embodiment of the present disclosure also provides a computer-readable storage medium.
  • the computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two.
  • the computer-readable storage medium may be, for example, but not limited to, an electric, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above.
  • Computer-readable storage media may include, but are not limited to: electrical connections with one or more wires, portable computer disks, hard disks, RAM, ROM, and electrically erasable programmable read-only memory (Electrically Erasable Programmable Read Only Memory, EPROM) or flash memory, optical fiber, compact Disc Read-Only Memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the foregoing.
  • a computer-readable storage medium may be any tangible medium that contains or stores a program, and the program may be used by or in combination with an instruction execution system, apparatus, or device.
  • a computer-readable signal medium may include a data signal propagated in a baseband or as a part of a carrier wave, and a computer-readable program code is carried therein.
  • This propagated data signal can take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing.
  • the computer-readable signal medium may also be any computer-readable medium other than the computer-readable storage medium.
  • the computer-readable signal medium may send, propagate, or transmit the program for use by or in combination with the instruction execution system, apparatus, or device .
  • the program code contained on the computer-readable medium can be transmitted by any suitable medium, including but not limited to: wire, optical cable, radio frequency (RF), etc., or any suitable combination of the above.
  • the above-mentioned computer-readable medium may be included in the above-mentioned electronic device; or it may exist alone without being assembled into the electronic device.
  • the aforementioned computer-readable medium carries one or more programs, and when the aforementioned one or more programs are executed by the electronic device, the electronic device: obtains at least one target picture selected by the user to add in the information input interface; It is determined that a preview view interface is not provided on the top of the information input interface, and a preview view interface filled with the at least one target picture is generated, and the preview view interface is used to make a thumbnail of the filled at least one target picture Preview; set the preview view interface at the top of the information input interface for display.
  • the computer program code used to perform the operations of the present disclosure may be written in one or more programming languages or a combination thereof.
  • the above-mentioned programming languages include object-oriented programming languages—such as Java, Smalltalk, C++, and also conventional Procedural programming language-such as "C" language or similar programming language.
  • the program code can be executed entirely on the user's computer, partly on the user's computer, executed as an independent software package, partly on the user's computer and partly executed on a remote computer, or entirely executed on the remote computer or server.
  • the remote computer can be connected to the user's computer through any kind of network-including Local Area Network (LAN) or Wide Area Network (WAN)-or it can be connected to an external computer (for example, use an Internet service provider to connect via the Internet).
  • LAN Local Area Network
  • WAN Wide Area Network
  • each block in the flowchart or block diagram can represent a module, program segment, or part of code, and the module, program segment, or part of code contains one or more for realizing the specified logical function Executable instructions.
  • the functions marked in the block may also occur in a different order from the order marked in the drawings. For example, two blocks shown in succession can actually be executed substantially in parallel, or they can sometimes be executed in the reverse order, depending on the functions involved.
  • each block in the block diagram and/or flowchart, and the combination of the blocks in the block diagram and/or flowchart can be implemented by a dedicated hardware-based system that performs the specified functions or operations Or it can be realized by a combination of dedicated hardware and computer instructions.
  • the modules involved in the embodiments described in the present disclosure can be implemented in software or hardware. Wherein, the name of the module does not constitute a limitation on the module itself under certain circumstances.
  • the "standard character image obtaining module” can also be described as "a module for obtaining at least one standard character image”.

Landscapes

  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本文公开了图片预览信息的显示方法、装置、电子设备及计算机可读存储介质。其中，所述方法包括：获取用户在信息输入界面中选择添加的至少一张目标图片；响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面，所述预览视图界面用于对填充的所述至少一张目标图片进行小图预览；将所述预览视图界面设置在所述信息输入界面的顶部进行显示。

Description

图片预览信息的显示方法、装置、电子设备及计算机可读存储介质
本申请要求在2019年04月28日提交中国专利局、申请号为201910350519.5的中国专利申请的优先权，该申请的全部内容通过引用结合在本申请中。
技术领域
本公开涉及信息展示技术，例如涉及一种图片预览信息的显示方法、装置、电子设备及计算机可读存储介质。
背景技术
随着社交类应用程序的不断发展，在社交类应用程序中发布内容，或者对已发布的内容进行评论，并将发布或者评论的信息展示，已经成为进行信息交换，促进信息传播和用户沟通的重要途径。在用户编辑发布内容和评论信息时，以何种方式展示信息，是影响用户的编辑效率和最终展示效果的重要因素。
相关技术中针对图片信息的预览方式中，一般将用户添加的图片与文字作为一个整体对待，随着文字的输入量增大，图片会被隐藏于信息输入界面之外，当用户需要修改添加的图片时，需要调整信息输入界面的当前显示内容。
将图片与文字作为同一级别的信息编辑显示，当文字的信息量较多时，会影响图片的显示，导致用户无法在编辑文字时，实时查看当前添加的图片。进一步的，当文字与图片的关联性较大时，图片被遮挡或者隐藏，都可能影响文字的编辑效果，降低用户的编辑效率。
发明内容
本公开实施例提供一种图片预览信息的显示方法、装置、电子设备及计算机可读存储介质，以丰富图片信息的预览形式，提高输入信息的编辑效率。
本公开实施例提供了一种图片预览信息的显示方法，包括：
获取用户在信息输入界面中选择添加的至少一张目标图片；
响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面，其中，所述预览视图界面用于对填充的所述至少一张目标图片进行小图预览；
将所述预览视图界面设置在所述信息输入界面的顶部进行显示。
本公开实施例还提供了一种图片预览信息的显示装置，包括：
目标图片获取模块，设置为获取用户在信息输入界面中选择添加的至少一张目标图片；
预览视图界面生成模块，设置为响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面，其中，所述预览视图界面用于对填充的所述至少一张目标图片进行小图预览；
预览视图界面显示模块，设置为将所述预览视图界面设置在所述信息输入界面的顶部进行显示。
本公开实施例还提供了一种电子设备，该电子设备包括：
一个或多个处理器；
存储器，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本公开任意实施例所述的图片预览信息的显示方法。
本公开实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本公开任意实施例所述的图片预览信息的显示方法。
附图说明
图1a是本公开实施例一提供的一种图片预览信息的显示方法的流程图；
图1b是本公开实施例一提供的一种预览视图界面的示意图；
图2a是本公开实施例二提供的一种图片预览信息的显示方法的流程图；
图2b是本公开实施例二提供的一种信息输入界面的示意图；
图3a是本公开实施例三提供的一种图片预览信息的显示方法的流程图；
图3b是本公开实施例三提供的一种预览视图界面的示意图；
图4是本公开实施例四提供的一种图片预览信息的显示装置的结构示意图；
图5是本公开实施例五提供的一种电子设备的结构示意图。
具体实施方式
下面结合附图和实施例对本公开作进一步的详细说明。可以理解的是，此处所描述的实施例仅仅用于解释本公开，而非对本公开的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本公开相关的部分而非全部结构。下述多个实施例中，每个实施例中同时提供了可选特征和示例，实施例中记载 的多个特征可进行组合，形成多个可选方案，不应将每个编号的实施例仅视为一个技术方案。
实施例一
图1a为本公开实施例一提供的一种图片预览信息的显示方法的流程图，本实施例可适用于在社交类应用程序中，编辑包含图片的输入信息的情况，该方法可以由图片预览信息的显示装置来执行，该装置可以采用软件和硬件中至少之一的方式实现，该装置可以配置于电子设备中，一实施例中，该电子设备可以为智能终端，例如手机、平板电脑等。如图1a所示，该方法包括如下步骤。
步骤110、获取用户在信息输入界面中选择添加的至少一张目标图片。
在本实施例中，用户通过社交类应用程序发布信息，该发布的信息可以是主题信息，也可以是针对主题信息的回复信息或者评论信息等。当用户发布的信息中包含图片时，用户需要通过信息输入界面选择要添加的目标图片。
一实施例中，信息输入界面中包含图片选择标识，用户通过点击图片选择标识，可以浏览本地或者网络中的图片，并从中选择目标图片。
在本实施例的一个可选的实施方式中，所述信息输入界面包括：评论输入界面。
获取用户在信息输入界面中选择添加的至少一张目标图片，可以包括如下步骤。
根据在所述评论输入界面中检测到的图片评论添加请求，将图片选择器提供给用户进行图片的选择。
接收所述图片选择器反馈的，所述用户选择添加的至少一张目标图片。
在本可选的实施方式中，用户输入的信息为评论信息，信息输入界面为评论输入界面，用户通过点击评论输入界面上的标识或者其他任意操作，触发评论输入界面检测到图片评论添加请求，该图片评论添加请求用于请求调取图片选择器。图片选择器是用来浏览图片的，与设定图片库关联的选择控件。当接收到用户通过图片选择器反馈的目标图片信息后，进行后续操作。由此，本可选的实施方式提供了一种确定目标图片的方式。
步骤120、响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面。
所述预览视图界面用于对填充的所述至少一张目标图片进行小图预览。
在本实施例中，当确定信息输入界面的顶部未设置有预览视图界面，即已输入的信息不包含图片时，按照设定布局规则，将目标图片填充于预览视图界面中，以使目标图片以小图形式在预览视图界面中展示。
一实施例中，如图1b所示，预览视图界面中设置有滚动条，以在目标图片数量大于设定数量时，将多余的目标图片隐藏显示。一实施例中，当与图片关联的文字中有设定的图片关联标识时，随着用户编辑包含图片关联标识的文字，预览视图界面中对应的图片可以居中显示。
在本实施例的一个可选的实施方式中，响应于确定所述信息输入界面的顶部设置有预览视图界面，将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示。
在本可选的实施方式中，提供了已输入的信息包含图片时，预览视图界面的显示方式。按照设定布局规则，将目标图片追加填充于预览视图界面中，以使针对用户当前编辑的所有图片位于预览视图界面中。
步骤130、将所述预览视图界面设置在所述信息输入界面的顶部进行显示。
在本实施例中，为了避免图片预览信息位于信息输入界面底部时，由于输入法或者其他通用信息的遮挡，导致的图片预览受阻，将预览视图界面设置在信息输入界面的顶部进行显示。
一实施例中，将预览视图界面设置在信息输入界面的顶部进行显示的方式，可以是在信息输入界面的区域固定时，在信息输入界面的顶部追加设置预览视图界面；也可以是在信息输入界面的区域不固定时，扩大信息输入界面区域面积，以使预览视图界面设置在扩大后的信息输入界面的顶部。
本公开实施例在输入信息包含图片时，将图片填充于信息输入界面顶部的预览视图界面中，并进行显示，保证了用户在编辑信息时，图片可以置顶预览，避免出现图片被遮挡或者隐藏的情况。解决了相关技术中，将图片与文字作为同一级别的信息编辑显示时，由于文字的显示形式具有多样性，导致图片被遮挡或者隐藏问题，还解决了由于图片被遮挡或者隐藏，导致的用户编辑信息效率降低的问题，实现了丰富图片信息的预览形式，提高输入信息的编辑效率的效果。
实施例二
图2a为本公开实施例二提供的一种图片预览信息的显示方法的流程图。本 实施例可以与上述一个或者多个实施例中的可选方案结合，在本实施例中，将所述预览视图界面设置在所述信息输入界面的顶部进行显示，可以包括如下步骤。
移动所述信息输入界面的顶部边界或者底部边界，以增大所述信息输入界面的显示区域的区域面积。所述信息输入界面的显示区域中增加的区域面积与所述预览视图界面的面积相匹配。
将所述信息输入界面由顶至底划分为第一显示区域以及第二显示区域。所述第一显示区域的区域面积与所述预览视图界面的面积相匹配。
将所述预览视图界面覆盖在所述第一显示区域之上进行显示，并将所述信息输入界面中的当前显示内容，移动至所述第二显示区域内进行显示。
相应的，如图2a所示，该方法包括如下步骤。
步骤210、获取用户在信息输入界面中选择添加的至少一张目标图片。
在本实施例的一个可选的实施方式中，在获取用户在信息输入界面中选择添加的至少一张目标图片之前，还可以包括如下步骤。
基于模型-视图-视图模型(Model-View-ViewModel，MVVM)框架生成图片预览组件，所述图片预览组件包括：视图模型。所述视图模型用于根据注入的数据源生成所述预览视图界面。
MVVM是模型-视图-控制器(Model-View-Controller，MVC)的改进版。MVVM将MVC中的视图的状态和行为抽象化，将预览视图界面和业务逻辑分开。视图模型可以提取模型的数据，同时处理预览视图界面中展示内容涉及的业务逻辑。
由此，本可选的实施方式提供了一种建立预览视图界面的底层实现方式，基于MVVM框架，利用其中的视图模型阻隔模型与预览视图界面，即在二者之间加入了一个黑箱，用于实现多种业务逻辑，提高了预览视图界面的可拓展性和可复用性。
步骤220、判断所述信息输入界面的顶部是否设置有预览视图界面，若所述信息输入界面的顶部未设置有预览视图界面，执行步骤230，若所述信息输入界面的顶部设置有预览视图界面，执行步骤240。
步骤230、生成填充有所述至少一张目标图片的预览视图界面，执行步骤250。
所述预览视图界面用于对填充的所述至少一张目标图片进行小图预览。
基于上述可选的实施方式，生成填充有所述至少一张目标图片的预览视图界面，可以包括如下步骤。
将所述至少一张目标图片注入至所述图片预览组件的所述视图模型中，以使完成图片填充的所述视图模型生成所述预览视图界面。
在本可选的实施方式中，当确定信息输入界面上未设置有预览视图界面时，将获取的至少一张目标图片作为视图模型的输入数据，对应的，视图模型输出包含该目标图片的预览视图界面。
步骤240、将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示，执行步骤250。
一实施例中，当确定信息输入界面上设置有预览视图界面时，可以将当前所用目标图片作为视图模型的输入数据，也可以仅将新增加的目标图片作为视图模型的输入数据，对应生成更新的预览视图界面。
步骤250、移动所述信息输入界面的顶部边界或者底部边界，以增大所述信息输入界面的显示区域的区域面积。
所述信息输入界面的显示区域中增加的区域面积与所述预览视图界面的面积相匹配。
在本实施例中，信息输入界面的区域面积不固定，通过移动信息输入界面的顶部边界或者底部边界，可以增大信息输入界面的显示区域的区域面积，以使增大后的信息输入界面可以容纳预览视图界面以及原有的信息输入界面。
步骤260、将所述信息输入界面由顶至底划分为第一显示区域以及第二显示区域，所述第一显示区域的区域面积与所述预览视图界面的面积相匹配。
步骤270、将所述预览视图界面覆盖在所述第一显示区域之上进行显示，并将所述信息输入界面中的当前显示内容，移动至所述第二显示区域内进行显示。
在本实施例中，如图2b所示，第一显示区域以及第二显示区域由顶至底设置于信息输入界面中。而且，第一显示区域的区域面积与预览视图界面的面积相匹配，将预览视图界面适应性覆盖在第一显示区域之上进行显示。为了提高信息输入界面的观赏性，本申请不对预览视图界面覆盖在第一显示区域之上的方式做限定。同时，将原有的信息输入界面中的当前显示内容，移动至第二显示区域内进行显示。由此，实现了当信息输入界面上未设置有预览视图界面时，添加目标图片的方式。
可以理解的，当信息输入界面上设置有预览视图界面时，信息输入界面的 更新方式与信息输入界面上未设置有预览视图界面时的相似，仅是在已有的第一显示区域以及第二显示区域上进行更新。
在本实施例的一个可选的实施方式中，将所述预览视图界面覆盖在所述第一显示区域之上进行显示，可以包括如下步骤。
将所述预览视图界面的顶部边界的高度，设置为所述信息输入界面的顶部边界的高度，以将所述预览视图界面覆盖在所述第一显示区域之上进行显示。
本可选的实施方式提供了一种可选的将预览视图界面覆盖在所述第一显示区域之上的方式，即将预览视图界面的顶部边界的高度设置为信息输入界面的顶部边界的高度。
本实施未详细解释之处，请详见前述实施例，在此不再赘述。
本公开实施例提供了当信息输入界面上未设置有预览视图界面时，添加目标图片的方式，保证了预览视图界面合理的设置于信息输入界面中。
实施例三
图3a为本公开实施例三提供的一种图片预览信息的显示方法的流程图。本实施例可以与上述一个或者多个实施例中的可选方案结合，在本实施例中，所述方法，还可以包括：获取用户在当前显示的预览视图界面中选择删除的至少一张删除图片，所述预览视图界面中的填充图片关联对应的删除选项；将所述至少一张删除图片从所述预览视图界面中移除；响应于确定将所述至少一张删除图片从所述预览视图界面中移除后，所述预览视图界面中填充有至少一张图片，更新所述预览视图界面中的图片排布方式。
相应的，如图3a所示，该方法包括如下步骤。
步骤310、获取用户在信息输入界面中选择添加的至少一张目标图片。
步骤320、判断所述信息输入界面的顶部是否设置有预览视图界面，若所述信息输入界面的顶部未设置有预览视图界面，执行步骤330，若所述信息输入界面的顶部设置有预览视图界面，执行步骤340。
步骤330、生成填充有所述至少一张目标图片的预览视图界面，执行步骤350。
步骤340、将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示，执行步骤350。
步骤350、将所述预览视图界面设置在所述信息输入界面的顶部进行显示。
步骤360、获取用户在当前显示的预览视图界面中选择删除的至少一张删除图片。
所述预览视图界面中的填充图片关联对应的删除选项，如图3b所示。
在本实施例中，针对MVVM框架，建立集合列表，预览视图界面中的每一张图片对应为集合列表中的一个列表项。可以将集合列表理解为MVVM框架的数据源，位于MVVM框架的前端。集合列表中附加手势，并注入多种方法，例如数据清理方法以及回调方法等。
当用户选择删除当前显示的预览视图界面中的一张图片时，由用户的删除手势操作，可以触发集合列表调用与手势操作对应的数据清理方法，将该数据清理方法作用在集合列表中的一个列表项上，MVVM框架再根据更新的集合列表进行预览视图界面以及信息输入界面的更新。
步骤370、将所述至少一张删除图片从所述预览视图界面中移除。
步骤380、响应于确定将所述至少一张删除图片从所述预览视图界面中移除后，所述预览视图界面中填充有至少一张图片，更新所述预览视图界面中的图片排布方式。
在本实施例中，由MVVM框架对预览视图界面的更新，可以将删除图片从预览视图界面中移除。若移除操作后，预览视图界面中填充有至少一张图片，则需要根据设定布局规则，更新预览视图界面中的图片排布方式。
在本实施例的一个可选的实施方式中，如果移除操作后，所述预览视图界面中未填充任何图片，则将所述预览视图界面从所述信息输入界面的顶部移除。
一实施例中，在将所述预览视图界面从所述信息输入界面的顶部移除之后，还可以包括如下步骤。
移动所述信息输入界面的顶部边界或者底部边界，以缩小所述信息输入界面的显示区域的区域面积，所述信息输入界面的显示区域中减少的区域面积与所述预览视图界面的面积相匹配。
本可选的实施方式提供了移除操作后，若预览视图界面中未填充任何图片时，信息输入界面恢复至无预览视图界面的方式，保证了在输入内容中不再包含图片时，信息输入界面可以恢复至初始状态，以减少对终端屏幕空间的占用。
可以理解的，本实施例仅是提供了一种可行的实施方式。步骤360至步骤380可以发生在预览视图界面显示后的任意时刻，只要在当前信息输入界面中包含预览视图界面，就可以进行移除操作，以及本实施例中多个可选的实施方式 中的操作步骤。
本实施未详细解释之处，请详见前述实施例，在此不再赘述。
本公开实施例的技术方案提供了预览视图界面的细化功能，即可对预览视图界面中的图片执行移除操作，为用户使用预览视图界面提供了便利。在移除操作后，当预览视图界面中填充有图片时的操作步骤，本公开实施例的技术方案还提供了可选的更新预览视图界面的方式，保证了用户可以准确浏览图片。
实施例四
图4为本公开实施例四提供的一种图片预览信息的显示装置的结构示意图，可适用于在社交类应用程序中，编辑包含图片的输入信息的情况，该装置可以采用软件和硬件中至少之一的方式实现，该装置一般可以配置于电子设备中。如图4所示，该装置可以包括：目标图片获取模块410、预览视图界面生成模块420以及预览视图界面显示模块430。
目标图片获取模块410，设置为获取用户在信息输入界面中选择添加的至少一张目标图片。
预览视图界面生成模块420，设置为响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面。所述预览视图界面用于对填充的图片进行小图预览。
预览视图界面显示模块430，设置为将所述预览视图界面设置在所述信息输入界面的顶部进行显示。
本公开实施例在输入信息包含图片时，将图片填充于信息输入界面顶部的预览视图界面中，并进行显示，保证了用户在编辑信息时，图片可以置顶预览，避免出现图片被遮挡或者隐藏的情况。解决了相关技术中，将图片与文字作为同一级别的信息编辑显示时，由于文字的显示形式具有多样性，导致图片被遮挡或者隐藏问题，还解决了由于图片被遮挡或者隐藏，导致的用户编辑信息效率降低的问题，实现了丰富图片信息的预览形式，提高输入信息的编辑效率的效果。
在上述多实施例的基础上，还可以包括预览视图界面追加模块。
预览视图界面追加模块，设置为在获取用户在信息输入界面中选择添加的至少一张目标图片之后，响应于确定所述信息输入界面的顶部设置有预览视图界面，将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预 览视图界面中的显示内容进行更新显示。
在上述多实施例的基础上，预览视图界面显示模块430，可以包括区域面积增大单元、显示区域划分单元和预览视图界面显示单元。
区域面积增大单元，设置为移动所述信息输入界面的顶部边界或者底部边界，以增大所述信息输入界面的显示区域的区域面积，所述信息输入界面的显示区域中增加的区域面积与所述预览视图界面的面积相匹配。
显示区域划分单元，设置为将所述信息输入界面由顶至底划分为第一显示区域以及第二显示区域，所述第一显示区域的区域面积与所述预览视图界面的面积相匹配。
预览视图界面显示单元，设置为将所述预览视图界面覆盖在所述第一显示区域之上进行显示，并将所述信息输入界面中的当前显示内容，移动至所述第二显示区域内进行显示。
在上述多实施例的基础上，预览视图界面显示单元，可以设置为：将所述预览视图界面的顶部边界的高度，设置为所述信息输入界面的顶部边界的高度，以将所述预览视图界面覆盖在所述第一显示区域之上进行显示。
在上述多实施例的基础上，还可以包括删除图片获取模块、删除图片移除模块和图片排布方式更新模块。
删除图片获取模块，设置为获取用户在当前显示的预览视图界面中选择删除的至少一张删除图片，所述预览视图界面中的填充图片关联对应的删除选项。
删除图片移除模块，设置为将所述至少一张删除图片从所述预览视图界面中移除。
图片排布方式更新模块，设置为响应于确定将所述至少一张删除图片从所述预览视图界面中移除后，所述预览视图界面中填充有至少一张图片，更新所述预览视图界面中的图片排布方式。
在上述多实施例的基础上，还可以包括预览视图界面移除模块。
预览视图界面移除模块，设置为在将所述至少一张删除图片从所述预览视图界面中移除之后，响应于确定将所述至少一张删除图片从所述预览视图界面中移除后，所述预览视图界面中未填充任何图片，将所述预览视图界面从所述信息输入界面的顶部移除。
在上述多实施例的基础上，还可以包括区域面积缩小单元。
区域面积缩小单元，设置为在将所述预览视图界面从所述信息输入界面的 顶部移除之后，移动所述信息输入界面的顶部边界或者底部边界，以缩小所述信息输入界面的显示区域的区域面积，所述信息输入界面的显示区域中减少的区域面积与所述预览视图界面的面积相匹配。
在上述多实施例的基础上，所述信息输入界面包括：评论输入界面。
目标图片获取模块410，可以包括图片选择器提供单元和目标图片接收单元。
图片选择器提供单元，设置为根据在所述评论输入界面中检测到的图片评论添加请求，将图片选择器提供给所述用户进行图片的选择。
目标图片接收单元，设置为接收所述图片选择器反馈的，所述用户选择添加的所述至少一张目标图片。
在上述多实施例的基础上，还可以包括图片预览组件生成模块和目标图片填充模块。
图片预览组件生成模块，设置为在获取用户在信息输入界面中选择添加的至少一张目标图片之前，基于MVVM框架生成图片预览组件，所述图片预览组件包括：视图模型，所述视图模型用于根据注入的数据源生成所述预览视图界面。
预览视图界面生成模块420包括目标图片注入模块。
目标图片注入模块，设置为在获取用户在信息输入界面中选择添加的至少一张目标图片之前，响应于确定所述信息输入界面的顶部未设置有预览视图界面，将所述至少一张目标图片注入至所述图片预览组件的所述视图模型中，以使完成图片填充的所述视图模型生成所述预览视图界面。
本公开实施例提供的图片预览信息的显示装置，与本公开任意实施例提供的图片预览信息的显示方法属于同一构思，未在本公开实施例中详尽描述的技术细节可参见上述实施例，并且本公开实施例与上述实施例具有相同的效果。
实施例五
本公开实施例五提供了一种电子设备，下面参考图5，其示出了适于用来实现本公开实施例的电子设备(例如客户端或服务器端)500的结构示意图。本公开实施例中的电子设备500可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、个人数字助理(Personal Digital Assistant，PDA)、平板电脑(Pad)、便携式多媒体播放器(Portable Media Player，PMP)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字电视TV、台式计算机等等的固定终端。 图5示出的电子设备500仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图5所示，电子设备500可以包括处理装置(例如中央处理器、图形处理器等)501，其可以根据存储在只读存储器(Read-Only Memory，ROM)502中的程序或者从存储装置508加载到随机访问存储器(Random Access Memory，RAM)503中的程序而执行多种适当的动作和处理。在RAM503中，还存储有电子设备500操作所需的多种程序和数据。处理装置501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(Input/Output，I/O)接口505也连接至总线504。
通常，以下装置可以连接至I/O接口505：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置506；包括例如液晶显示器(Liquid Crystal Display，LCD)、扬声器、振动器等的输出装置507；包括例如磁带、硬盘等的存储装置508；以及通信装置509。通信装置509可以允许电子设备500与其他设备进行无线或有线通信以交换数据。虽然图5示出了具有多种装置的电子设备500，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置509从网络上被下载和安装，或者从存储装置508被安装，或者从ROM502被安装。在该计算机程序被处理装置501执行时，执行本公开实施例的图片预览信息的显示方法中限定的上述功能。
也即，获取用户在信息输入界面中选择添加的至少一张目标图片；响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面，所述预览视图界面用于对填充的所述至少一张目标图片进行小图预览；将所述预览视图界面设置在所述信息输入界面的顶部进行显示。
实施例六
本公开实施例六还提供了一种计算机可读存储介质，计算机可读介质可以 是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、RAM、ROM、可擦式可编程只读存储器(Electrically Erasable Programmable Read Only Memory，EPROM)或闪存、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、射频(Radio Frequency，RF)等等，或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取用户在信息输入界面中选择添加的至少一张目标图片；响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面，所述预览视图界面用于对填充的所述至少一张目标图片进行小图预览；将所述预览视图界面设置在所述信息输入界面的顶部进行显示。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中， 远程计算机可以通过任意种类的网络——包括局域网(Local Area Network，LAN)或广域网(Wide Area Network，WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开多种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，模块的名称在某种情况下并不构成对该模块本身的限定，例如，“标准字符图像获得模块”还可以被描述为“获得至少一个标准字符图像的模块”。

Claims (15)

  1. 一种图片预览信息的显示方法，包括：
    获取用户在信息输入界面中选择添加的至少一张目标图片；
    响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面，其中，所述预览视图界面用于对填充的所述至少一张目标图片进行小图预览；
    将所述预览视图界面设置在所述信息输入界面的顶部进行显示。
  2. 根据权利要求1所述的方法，其中，所述获取用户在信息输入界面中选择添加的至少一张目标图片之后，还包括：
    响应于确定所述信息输入界面的顶部设置有预览视图界面，将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示。
  3. 根据权利要求1或2所述的方法，其中，所述将所述预览视图界面设置在所述信息输入界面的顶部进行显示，包括：
    移动所述信息输入界面的顶部边界或者底部边界，以增大所述信息输入界面的显示区域的区域面积，其中，所述信息输入界面的显示区域中增加的区域面积与所述预览视图界面的面积相匹配；
    将所述信息输入界面由顶至底划分为第一显示区域以及第二显示区域，其中，所述第一显示区域的区域面积与所述预览视图界面的面积相匹配；
    将所述预览视图界面覆盖在所述第一显示区域之上进行显示，并将所述信息输入界面中的当前显示内容，移动至所述第二显示区域内进行显示。
  4. 根据权利要求3所述的方法，其中，所述将所述预览视图界面覆盖在所述第一显示区域之上进行显示，包括：
    将所述预览视图界面的顶部边界的高度，设置为所述信息输入界面的顶部边界的高度，以将所述预览视图界面覆盖在所述第一显示区域之上进行显示。
  5. 根据权利要求1-4任一项所述的方法，还包括：
    获取用户在当前显示的预览视图界面中选择删除的至少一张删除图片，其中，所述预览视图界面中的填充图片关联对应的删除选项；
    将所述至少一张删除图片从所述预览视图界面中移除；
    响应于确定将所述至少一张删除图片从所述预览视图界面中移除后，所述预览视图界面中填充有至少一张图片，更新所述预览视图界面中的图片排布方式。
  6. 根据权利要求5所述的方法，其中，所述将所述至少一张删除图片从所述预览视图界面中移除之后，还包括：
    响应于确定将所述至少一张删除图片从所述预览视图界面中移除后，所述预览视图界面中未填充任何图片，将所述预览视图界面从所述信息输入界面的顶部移除。
  7. 根据权利要求6所述的方法，其中，所述将所述预览视图界面从所述信息输入界面的顶部移除之后，还包括：
    移动所述信息输入界面的顶部边界或者底部边界，以缩小所述信息输入界面的显示区域的区域面积，其中，所述信息输入界面的显示区域中减少的区域面积与所述预览视图界面的面积相匹配。
  8. 根据权利要求1所述的方法，其中，所述信息输入界面包括：评论输入界面；
    所述获取用户在信息输入界面中选择添加的至少一张目标图片，包括：
    根据在所述评论输入界面中检测到的图片评论添加请求，将图片选择器提供给所述用户进行图片的选择；
    接收所述图片选择器反馈的，所述用户选择添加的所述至少一张目标图片。
  9. 根据权利要求1所述的方法，其中，所述获取用户在信息输入界面中选择添加的至少一张目标图片之前，还包括：
    基于模型-视图-视图模型MVVM框架生成图片预览组件，其中，所述图片预览组件包括：视图模型，所述视图模型用于根据注入的数据源生成所述预览视图界面；
    所述响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面，包括：
    响应于确定所述信息输入界面的顶部未设置有预览视图界面，将所述至少一张目标图片注入至所述图片预览组件的所述视图模型中，以使完成图片填充的所述视图模型生成所述预览视图界面。
  10. 一种图片预览信息的显示装置，包括：
    目标图片获取模块，设置为获取用户在信息输入界面中选择添加的至少一张目标图片；
    预览视图界面生成模块，设置为响应于确定所述信息输入界面的顶部未设置有预览视图界面，生成填充有所述至少一张目标图片的预览视图界面，其中， 所述预览视图界面用于对填充的所述至少一张目标图片进行小图预览；
    预览视图界面显示模块，设置为将所述预览视图界面设置在所述信息输入界面的顶部进行显示。
  11. 根据权利要求10所述的装置，还包括：
    预览视图界面追加模块，设置为在获取用户在信息输入界面中选择添加的至少一张目标图片之后，响应于确定所述信息输入界面的顶部设置有预览视图界面，将所述至少一张目标图片追加填充于所述预览视图界面中，以对所述预览视图界面中的显示内容进行更新显示。
  12. 根据权利要求10或11所述的装置，其中，所述预览视图界面显示模块包括：
    区域面积增大单元，设置为移动所述信息输入界面的顶部边界或者底部边界，以增大所述信息输入界面的显示区域的区域面积，其中，所述信息输入界面的显示区域中增加的区域面积与所述预览视图界面的面积相匹配；
    显示区域划分单元，设置为将所述信息输入界面由顶至底划分为第一显示区域以及第二显示区域，其中，所述第一显示区域的区域面积与所述预览视图界面的面积相匹配；
    预览视图界面显示单元，设置为将所述预览视图界面覆盖在所述第一显示区域之上进行显示，并将所述信息输入界面中的当前显示内容，移动至所述第二显示区域内进行显示。
  13. 根据权利要求12所述的装置，其中，所述预览视图界面显示单元是设置为：
    将所述预览视图界面的顶部边界的高度，设置为所述信息输入界面的顶部边界的高度，以将所述预览视图界面覆盖在所述第一显示区域之上进行显示。
  14. 一种电子设备，包括：
    一个或多个处理器；
    存储器，用于存储一个或多个程序；
    当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-9任一项所述的图片预览信息的显示方法。
  15. 一种计算机可读存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现如权利要求1-9任一项所述的图片预览信息的显示方法。
PCT/CN2020/073384 2019-04-28 2020-01-21 图片预览信息的显示方法、装置、电子设备及计算机可读存储介质 WO2020220773A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910350519.5A CN110070593B (zh) 2019-04-28 2019-04-28 图片预览信息的显示方法、装置、设备及介质
CN201910350519.5 2019-04-28

Publications (1)

Publication Number Publication Date
WO2020220773A1 true WO2020220773A1 (zh) 2020-11-05

Family

ID=67369383

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2020/073384 WO2020220773A1 (zh) 2019-04-28 2020-01-21 图片预览信息的显示方法、装置、电子设备及计算机可读存储介质

Country Status (2)

Country Link
CN (1) CN110070593B (zh)
WO (1) WO2020220773A1 (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110070593B (zh) * 2019-04-28 2021-05-25 北京字节跳动网络技术有限公司 图片预览信息的显示方法、装置、设备及介质
CN110737382A (zh) * 2019-09-29 2020-01-31 维沃移动通信有限公司 一种图片管理方法及通信客户端
CN114397990A (zh) * 2021-12-21 2022-04-26 北京达佳互联信息技术有限公司 图像发布方法、装置、电子设备及计算机可读存储介质
CN115268712A (zh) * 2022-07-14 2022-11-01 北京字跳网络技术有限公司 一种表情图片预览方法、装置、设备及介质
CN116405611A (zh) * 2023-06-07 2023-07-07 建信金融科技有限责任公司 一种图像上传方法、系统、装置、设备及介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105843463A (zh) * 2015-01-14 2016-08-10 阿里巴巴集团控股有限公司 一种通信信息交互方法及装置
US20190045129A1 (en) * 2009-05-29 2019-02-07 Apple Inc. Systems and Methods for Previewing Newly Captured Image Content and Reviewing Previously Stored Image Content
CN110070593A (zh) * 2019-04-28 2019-07-30 北京字节跳动网络技术有限公司 图片预览信息的显示方法、装置、设备及介质

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP6083857B2 (ja) * 2012-11-26 2017-02-22 Kddi株式会社 情報端末装置
CN106021322A (zh) * 2016-05-06 2016-10-12 浙江慧脑信息科技有限公司 一种多功能图像输入方法
CN106383643A (zh) * 2016-09-18 2017-02-08 浙江慧脑信息科技有限公司 一种同时浏览图片和文本的方法
CN107610206A (zh) * 2017-09-29 2018-01-19 北京金山安全软件有限公司 动态图片的处理方法、装置、存储介质及电子设备

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20190045129A1 (en) * 2009-05-29 2019-02-07 Apple Inc. Systems and Methods for Previewing Newly Captured Image Content and Reviewing Previously Stored Image Content
CN105843463A (zh) * 2015-01-14 2016-08-10 阿里巴巴集团控股有限公司 一种通信信息交互方法及装置
CN110070593A (zh) * 2019-04-28 2019-07-30 北京字节跳动网络技术有限公司 图片预览信息的显示方法、装置、设备及介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
HUIFEIDE PIPIZUO: "How to post texts and pictures on WeChat Moments", 360 XINZHI WENDA, 12 March 2018 (2018-03-12), pages 1 - 4, Retrieved from the Internet <URL:http://xinzhi.wenda.so.com/a/1520865096615038> [retrieved on 20200317] *

Also Published As

Publication number Publication date
CN110070593B (zh) 2021-05-25
CN110070593A (zh) 2019-07-30

Similar Documents

Publication Publication Date Title
WO2020220773A1 (zh) 图片预览信息的显示方法、装置、电子设备及计算机可读存储介质
US11632576B2 (en) Live video broadcast method, live broadcast device and storage medium
US11490033B2 (en) Video generating method, apparatus, electronic device and computer storage medium
US11895426B2 (en) Method and apparatus for capturing video, electronic device and computer-readable storage medium
JP7387891B2 (ja) 動画ファイルの生成方法、装置、端末及び記憶媒体
CN110046021B (zh) 一种页面显示方法、装置、系统、设备和存储介质
CN109460233B (zh) 页面的原生界面显示更新方法、装置、终端设备及介质
US20220310125A1 (en) Method and apparatus for video production, device and storage medium
WO2022228118A1 (zh) 互动内容生成方法、装置、存储介质及电子设备
US11997356B2 (en) Video page display method and apparatus, electronic device and computer-readable medium
CN111790148B (zh) 游戏场景中的信息交互方法、设备及计算机可读介质
WO2020220776A1 (zh) 图片类评论数据的展示方法、装置、设备及介质
JP2023523067A (ja) ビデオ処理方法、装置、機器及び媒体
CN111225232A (zh) 基于视频的贴纸动画引擎、实现方法、服务器和介质
WO2022017081A1 (zh) 视频互动方法、装置、电子设备及计算机可读存储介质
WO2020233169A1 (zh) 一种评论内容显示方法、装置、设备及存储介质
WO2022183887A1 (zh) 视频编辑及播放方法、装置、设备、介质
WO2022184077A1 (zh) 文档编辑的方法、装置、终端及非暂时性存储介质
WO2024078516A1 (zh) 媒体内容展示方法、装置、设备及存储介质
WO2024037491A1 (zh) 媒体内容处理方法、装置、设备及存储介质
WO2020207083A1 (zh) 信息分享的方法、装置、电子设备及计算机可读存储介质
WO2023207543A1 (zh) 媒体内容的发布方法、装置、设备、存储介质和程序产品
CN115442639B (zh) 一种特效配置文件的生成方法、装置、设备及介质
US20240127859A1 (en) Video generation method, apparatus, device, and storage medium
US20240184438A1 (en) Interactive content generation method and apparatus, and storage medium and electronic device

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: 20798001

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 16.02.2022)

122 Ep: pct application non-entry in european phase

Ref document number: 20798001

Country of ref document: EP

Kind code of ref document: A1