Image component processing method, image component construction method and corresponding device

Abstract

The embodiment of the invention discloses an image component processing method, an image component construction method and corresponding devices. The image component is realized through a multi-layer framework, namely a data layer, a control layer and a rendering layer; after the data layer collects image data from a data source, the image data is converted into a preset format to achieve format unification, image processing logic is abstracted into an independent hierarchy, namely the control layer, and the control layer conducts corresponding image processing on the image data according to a control object bound with a data object corresponding to the data source and provides the image data to the rendering layer for rendering. According to the invention, the flexibility of the image component can be improved, and the image component can conveniently process the image data from the cross-end data source. And the reusability of image processing logic is improved, and a developer does not need to develop multiple sets of codes for different ends, so that the development cost is reduced.

Description

Technical Field

[0001] The present application relates to the field of image processing technology, and in particular to a method for processing an image component, a method for constructing an image component, and a corresponding device. Background Art

[0002] With the rapid development of modern information technology, the design and optimization of user interface (UI) has become an important part of software development. Among them, image component, as an important element of UI, plays a key role in improving user experience, delivering information and beautifying the interface. Image component is essentially a software component or element used to display and process image resources. It can realize different functions, but the basic purpose is to display images in the user interface (UI) and may provide a series of image-related operation functions.

[0003] In the process of implementing the present application, the inventors discovered that traditional image components require separate coding for cross-end data sources (such as image data from different devices or operating systems), which results in poor flexibility. Summary of the invention

[0004] In view of this, the present application provides a method for processing an image component, a method for constructing an image component and a corresponding device, so as to improve flexibility and facilitate the image component to process image data from cross-end data sources.

[0005] This application provides the following solutions:

[0006] In a first aspect, a method for processing an image component is provided, wherein the image component includes a data layer, a control layer, and a rendering layer, and the image component registers a binding relationship between a data object and a control object; the processing method includes:

[0007] Using the data layer to obtain image data from a data source corresponding to at least one data object, converting the image data into a preset format and providing it to the control layer;

[0008] Processing the image data using the control object bound to the at least one data object in the control layer, and providing the processed image data to the rendering layer, wherein the control object encapsulates image attributes and image processing methods;

[0009] The processed image data is rendered using the rendering layer to be displayed on a screen.

[0010] In a second aspect, a method for constructing an image component is provided, wherein the image component includes a data layer, a control layer, and a rendering layer; the construction method includes:

[0011] Generate registration information of at least one data object in the data layer; wherein the data layer is used to obtain image data from a data source corresponding to the at least one data object, convert the image data into a preset format and then provide it to the control layer;

[0012] Generate registration information of at least one control object in the control layer, and obtain binding information between the data object and the control object; wherein the control object encapsulates image attributes and image processing methods to process image data from the data object bound to the control object;

[0013] Generate configuration information of the rendering layer to render the processed image data on a screen for display.

[0014] In a third aspect, a processing device for an image component is provided, wherein the image component includes a data layer, a control layer and a rendering layer, and the image component registers a binding relationship between a data object and a control object; the device includes: a data layer module, a control layer module and a rendering layer module;

[0015] The data layer module is configured to obtain image data from a data source corresponding to at least one data object, convert the image data into a preset format, and then provide the image data to the control layer module;

[0016] The control layer module is configured to process the image data using a control object bound to the at least one data object, and provide the processed image data to the rendering layer module, wherein the control object encapsulates image attributes and image processing methods;

[0017] The rendering layer module is configured to render the processed image data to display it on a screen.

[0018] In a fourth aspect, a device for constructing an image component is provided, wherein the image component includes a data layer, a control layer, and a rendering layer; the device includes:

[0019] A first registration module is configured to generate registration information of at least one data object in the data layer; wherein the data layer is used to obtain image data from a data source corresponding to the at least one data object, convert the image data into a preset format, and then provide it to the control layer;

[0020] A second registration module is configured to generate registration information of at least one control object in the control layer, and obtain binding information between the data object and the control object; wherein the control object encapsulates image attributes and image processing methods to process image data from the data object bound to the control object;

[0021] The integrated module is configured to generate configuration information of the rendering layer for rendering the processed image data on a screen for display.

[0022] According to a fifth aspect, a computer-readable storage medium is provided, on which a computer program is stored, and when the program is executed by a processor, the steps of the method described in any one of the first and second aspects are implemented.

[0023] According to a sixth aspect, there is provided an electronic device, comprising:

[0024] one or more processors; and

[0025] A memory associated with the one or more processors, the memory being used to store program instructions, wherein when the program instructions are read and executed by the one or more processors, the steps of the method described in any one of the first and second aspects are executed.

[0026] According to a seventh aspect, a computer program product is provided, comprising a computer program, which, when executed by a processor, implements the steps of the method described in any one of the first and second aspects above.

[0027] According to the specific embodiments provided in this application, this application discloses the following technical effects:

[0028] This application implements the image component through a multi-layer framework, namely the data layer, the control layer and the rendering layer. After the data layer collects image data from the data source, it converts the image data into a preset format to achieve format unification; the image processing logic (i.e., image attributes and image processing methods) is abstracted into an independent layer, namely the control layer. The control layer performs corresponding image processing on the image data according to the control object bound to the data object corresponding to the data source, and provides it to the rendering layer for rendering. In this way, data objects and control objects can be flexibly bound, which greatly improves the flexibility of image components. And when facing cross-end data sources (for example, image data comes from different devices or operating systems), it is only necessary to bind the control object to the data object corresponding to the data source in the control layer in advance, without the need to write code separately for various cross-end data sources. Obviously, it is more convenient and flexible to process and render the image data of the cross-end data source.

[0029] In addition, the flexible approach of the present application improves the reusability of image processing logic. By "cleaning" the data at the data layer, that is, converting it into a unified preset format, the control objects at the control layer can be reused for image data from different data sources. Developers do not need to develop multiple sets of codes for different data sources, thereby reducing development costs and improving development efficiency.

[0030] Of course, any product implementing the present application does not necessarily need to achieve all of the advantages described above at the same time. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0032] Figure 1 is a flow chart of a method for constructing an image component provided in an embodiment of the present application;

[0033] Figure 2 is a flow chart of a method for processing an image component provided by an embodiment of the present application;

[0034] Figure 3 A schematic diagram of an image component example 1 provided in an embodiment of the present application;

[0035] Figure 4 A schematic diagram of an image component example 2 provided in an embodiment of the present application;

[0036] Figure 5 A schematic diagram of an image component example 3 provided in an embodiment of the present application;

[0037] Figure 6 A schematic block diagram of a device for constructing an image component provided in an embodiment of the present application;

[0038] Figure 7 A schematic block diagram of a processing device for an image component provided in an embodiment of the present application;

[0039] Figure 8 A schematic block diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0040] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present application belong to the scope of protection of this application.

[0041] The terms used in the embodiments of the present invention are only for the purpose of describing specific embodiments, and are not intended to limit the present invention. The singular forms "a", "said" and "the" used in the embodiments of the present invention and the appended claims are also intended to include plural forms, unless the context clearly indicates other meanings.

[0042] It should be understood that the term "and / or" used in this article is only a description of the association relationship of associated objects, indicating that there can be three relationships. For example, A and / or B can represent: A exists alone, A and B exist at the same time, and B exists alone. In addition, the character " / " in this article generally indicates that the associated objects before and after are in an "or" relationship.

[0043] Depending on the context, the word "if" as used herein may be interpreted as "when" or "when" or "in response to..." Similarly, depending on the context, the phrases "if it is determined" or "if (stated condition or event) is detected" may be interpreted as "when determining" or "in response to determining" or "when detecting (stated condition or event)" or "in response to detecting (stated condition or event)".

[0044] The implementation method of traditional image components is usually for developers to write code for specific devices or operating systems. For example, for mobile phones or operating systems used by mobile phones, in order to process the image data from the mobile phone camera and render it on the mobile phone screen, developers need to write a set of codes. For example, in order to process the image data from the reversing radar and render it on the mobile phone screen, developers need to write another set of codes. It can be seen that on the one hand, the implementation method of traditional image components cannot achieve cross-end applications and has poor flexibility; on the other hand, even if the image components have the same presentation form, the traditional image component implementation method needs to write code and maintain them separately for different types of devices or operating systems, which obviously wastes development costs and has low development efficiency.

[0045] In view of this, the present application provides a new idea, which provides a new image component implementation framework for developers, which abstracts data acquisition, image processing and image rendering into independent layers, namely, data layer, control layer and rendering layer.

[0046] The data layer has the ability to collect and convert image data, that is, to obtain the image data collected by the data source and convert it into a preset format. This is equivalent to cleaning the image data from different data sources, converting it into a unified format and providing it to the control layer, so that the control layer does not need to write different processing codes for different data formats, eliminating the differences in data formats between different data sources. The construction method of the image component can be as follows: Figure 1 as shown in .

[0047] like Figure 1Step 101 shown in: Developers can use the implementation framework to input a registration instruction for a data object to register the data object in the data layer. The electronic device generates registration information of at least one data object in the data layer of the image component in response to the registration instruction for the data object, and the data object corresponds to the data source. The registered data object can be one or more.

[0048] The data source involved in this application can be a device with an image acquisition function or a device with an image storage function. For example, the camera, scanner, radar, etc. of the device where the image component is located, the camera, scanner, radar, etc. of other devices, local storage space, storage space of other devices, etc.

[0049] For example, developers can use the configuration interface provided by the framework to configure data object 1 for a mobile phone camera, where data object 1 corresponds to the mobile phone camera; they can configure data object 2 for a vehicle camera, where data object 2 corresponds to the vehicle camera; and so on.

[0050] When the registration information of the data object is generated at the data layer, the constructor provided by the data object class can be used, wherein the registration information of the above-mentioned data object can include the representation of the data object and the format of the data object. Among them, this application does not limit the representation form of the data object, and strings such as numbers, identifiers, names, etc. can be used as long as different data objects can be distinguished. The format of the data object is the format of the image data used by the data source corresponding to the data object, such as PNG, JPEG, BMP, etc. Among them, in object-oriented programming, data objects are usually encapsulated in classes, and specific instances are created through object instantiation. This allows programmers to use a unified interface to operate different types of data objects and realize code reuse and modularization.

[0051] In the embodiment of the present application, the control layer processes the image data provided by the data layer and provides the processed image data to the rendering layer. The processing of the image data provided by the data layer includes one or any combination of basic operation methods such as scaling, rotating, cropping, and transforming. For a detailed description, please refer to the relevant records about step 203 in the subsequent embodiments. Figure 1 In step 103 shown in FIG: the developer can use the implementation framework to input the registration instruction of the control object to register the control object in the control layer, and the electronic device generates registration information of at least one control object in the control layer of the image component in response to the registration instruction of the control object. The control object is obtained by encapsulating the image attributes and the image processing method.

[0052] Image attributes may include image size, color, transparency, shape, etc. Image processing methods may include one or any combination of basic operation methods such as scaling, rotating, cropping, transforming, etc.

[0053] The above control object can be obtained by developers using the configuration interface provided by the framework to configure the image attributes and the combination of the basic operation methods provided by the framework. For example, the developer uses the configuration interface provided by the framework to input the configuration instructions including the information of the image attributes and the image processing method (i.e., specify the basic operation method or its combination), and the electronic device responds to the configuration instructions of the developer and encapsulates the input image attributes and image processing methods to obtain the control object; or it can be obtained by the developer himself writing the code of the image attributes and image processing methods to form a control object and inputting the registration instruction, and in response to the registration instruction, the image attributes and image processing methods corresponding to the code written by the developer are encapsulated to obtain the control object. The control object can inherit from the image component through the class inheritance method to implement the specific processing logic.

[0054] In addition, if the data layer has registered data objects corresponding to multiple data sources, in order to implement the same image processing for image data from different data sources, the data objects corresponding to different data sources can be bound to the same control object. In order to implement multiple image processing for image data from the same data source, the data objects corresponding to different data sources can also be bound to different control objects. When binding the data object corresponding to the data source to the control object, in fact, when registering the control object, a certain data object is specified for the control object as the data source of the control layer, and the control object only processes the data object.

[0055] For example, the data layer is registered with data object 1 corresponding to data source 1, and data object 2 corresponding to data source 2, and control object a and control object b are registered in the control layer. In order to use the same image processing for image data from different data sources, data object 1 can be bound to control object a, and data object 2 can also be bound to control object a. In order to implement different image processing for image data from different data sources, data object 1 can also be bound to control object a, and data object 2 can be bound to control object b. Among them, the specific binding relationship to be adopted is determined according to the actual scene requirements. The component framework provided in the embodiment of the present application realizes the unification of the format at the data layer and "abstracts" (i.e., encapsulates) the image attributes and image processing methods into reusable control objects at the control layer, thus providing a flexible binding basis for developers. Developers can flexibly implement the binding relationship between data objects and control objects according to the actual scene requirements.

[0056] If the control layer has only one control object, it can also be assumed that all data objects registered in the data layer are bound to the control object.

[0057] The main function of the rendering layer is to render the image data from the control layer to display it on the screen. Figure 1 Step 105 shown in: The developer can use the implementation framework to generate configuration information in the rendering layer to render the image data processed by the control layer on the screen for display.

[0058] In the rendering layer, you can call pre-packaged rendering methods to render the image data from the control layer. The so-called rendering method refers to the technology or algorithm used in the process of converting image data into images visible to the naked eye. As one of the possible ways, developers can configure a default rendering method in the rendering layer, and all image data uses this default rendering method.

[0059] Different rendering methods have different implementations and characteristics. The specific rendering method used may be determined by many factors, such as the application scenario (which may be determined by the data source and the type of specific application), performance requirements, hardware support (such as the screen, the device where the screen is located), etc. Therefore, the above rendering method is adapted to the screen, and even different screens can correspond to different rendering methods. In addition, as another feasible way, developers can also register corresponding rendering methods for the binding relationship between data objects and control objects. Different binding relationships can correspond to the same rendering method or different rendering methods.

[0060] In addition, different rendering methods may have different rendering parameter sets, which include information about the type, range, and effect of rendering parameters corresponding to the rendering engine. Therefore, the rendering parameter set corresponding to the rendering method in the rendering layer can be provided to the control layer for the control layer to call when generating rendering parameters. Rendering parameters are one of the most important factors in the rendering process, including resolution, color mode, lighting, texture, image edge settings, etc.

[0061] It should be noted that if the rendering layer can call multiple rendering methods, different rendering methods can be further used to render image data from different sources on different screens.

[0062] The above framework can be used to realize cross-end application of image components. In this case, the data source and the screen corresponding to the above registered data object are located on different devices, or the data source and the screen correspond to different operating systems. When facing cross-end data sources, since the data layer converts the format of the image data into a unified format, the image attributes and image processing methods have been encapsulated as control objects in the control layer. Therefore, there is no need to consider the format differences of the image data in the control layer and write specific image processing codes for the format of specific image data. It is only necessary to bind the control object in the control layer in advance, thereby conveniently and flexibly realizing the cross-end application of image components.

[0063] For example, developers can implement an image component for a mobile phone, register the data object corresponding to the vehicle-mounted camera in the image component, register the control object in the control layer, encapsulate the image properties and image processing methods in the control object, bind the data object and the control object, and register the pre-packaged rendering method in the rendering layer, so that the image component can process the image data of the vehicle-mounted camera and display it on the mobile phone screen.

[0064] To give another example, developers can implement an image component for operating system 1, register a data object corresponding to a data source of operating system 2 in the image component, register a control object in the control layer, encapsulate image properties and image processing methods in the control object, bind the data object and the control object, and register a pre-packaged rendering method in the rendering layer, thereby enabling the image component to process image data from operating system 2 and display it on the screen using operating system 1.

[0065] Furthermore, in order to realize the interaction function between the image component and the user, an interactive response method can also be encapsulated in the control object, and the interactive response method is used to generate new image data in response to the user's interactive event on the screen for the image data. The specific interactive implementation process will be described in detail in the following embodiments.

[0066] After the developer builds the image component based on the above framework, the image component registers the binding relationship between the data object and the control object, and the image component includes a data layer, a control layer, and a rendering layer. The image component can be set in an application, which can be a desktop application, a web application, or a mobile application under various operating systems. The processing method of the image component in the actual operation process can be as follows: Figure 2 As shown in:

[0067] In step 201, the data layer is used to obtain image data from a data source corresponding to at least one data object, and the image data is converted into a preset format and provided to the control layer.

[0068] In the embodiment of the present application, the data layer is the source of image data, that is, it is responsible for collecting image data. Data objects are pre-registered in the data layer, and the registered data objects correspond to the data sources. The data layer is responsible for obtaining image data from the data sources corresponding to the registered data objects.

[0069] The data source involved in the embodiments of the present application may be a device with an image acquisition function or a device with an image storage function, for example, a camera, scanner, radar, etc. of the device where the image component is located, a camera, scanner, radar, etc. of other devices, a local storage space, a storage space of other devices, etc.

[0070] The implementation of the data layer requires the underlying layer to have the ability to collect data across different devices and systems to ensure data interactivity between different devices and systems. The ability to collect data across different devices can be supported from the following key aspects. For example, the operating system can provide a global access framework and sharing framework through a distributed data management platform (such as Apache Kafka, Apache Flink, etc.). The distributed data management platform can hide the complexity of underlying communications and manage data from different devices and systems. For another example, standardized protocols and interfaces can be used to ensure data exchange and sharing between different devices and systems.

[0071] In addition to collecting image data, the data layer is also responsible for "cleaning" the image data, that is, eliminating the differences between image data from different data sources and converting them into a preset format. This allows the control layer to only provide non-differentiated image processing logic for a unified format, without having to provide different image processing codes for image data from different data sources.

[0072] As one of the achievable methods, the above preset format can be binary data, that is, the data layer can convert all the image data collected from the data source into binary data, which is more convenient for the subsequent control layer to process the image data using various image processing methods, and can also improve the compatibility with the screen. In this application, in addition to binary data, the image data can also be uniformly converted into other preset formats, such as pixel data format, bitmap format, vector image format, etc.

[0073] In step 203, the image data is processed using the control object bound to the at least one data object in the control layer, and the processed image data is provided to the rendering layer, wherein the control object encapsulates image attributes and image processing methods.

[0074] The control layer pre-registers a control object, which encapsulates image attributes and image processing methods, and pre-binds the data object registered in the data layer to the control object. Therefore, after receiving the image data from the data layer, the control layer can process the image data using the control object bound to the data object, since the image data must be of a registered data object. The specific processing to be performed is encapsulated in the control object, and the control object processes the image data using the encapsulated image attributes and image processing methods.

[0075] The image attributes may include image size, color, transparency, shape, etc. The image processing method may include one or any combination of basic operation methods such as scaling, rotating, cropping, transforming, etc.

[0076] In the embodiment of the present application, the data object registered in the data layer may correspond to multiple data sources, and the data objects corresponding to different data sources may be bound to the same control object or to different control objects. This means that image data from different data sources may reuse the same control logic in the control layer or may use different control logics. This part of the content will be described with examples in conjunction with specific embodiments later.

[0077] Since the developer may further provide the control layer with rendering parameter sets corresponding to different rendering methods when configuring the rendering layer, the control layer may further call the corresponding rendering parameter set to generate rendering parameters when providing the processed image data to the rendering layer, and provide the rendering parameters together with the image data to the rendering layer.

[0078] The rendering parameters may include resolution, color mode, lighting, texture, image edge settings, etc. The rendering parameters may be determined in any existing manner, which will not be described in detail herein.

[0079] In addition, when the control layer provides image data and rendering parameters to the rendering layer, it can call the rendering layer interface to pass the image data and rendering parameters to the rendering layer, or it can adopt other interaction mechanisms. For example, the control layer can also pass the processed image data and rendering parameters to the rendering layer through rendering instructions, and so on.

[0080] In step 205, the processed image data is rendered using a rendering layer to be displayed on a screen.

[0081] After the image processing is completed, as one of the possible implementation methods, since the developer registers the encapsulated rendering method when configuring the rendering layer, the rendering method is adapted to the specific screen. If there is only a default rendering method in the rendering layer, after the rendering layer receives the processed image data from the control layer, the default rendering method is used to render the image data and display it on the screen.

[0082] If the rendering layer registers the correspondence between the above-mentioned binding relationship and the rendering method, after the rendering layer receives the image data processed from the control layer, it uses the rendering method corresponding to the binding relationship between the data object corresponding to the data source and the control object to render the image data and display it on the screen.

[0083] The screen involved in the embodiments of the present application can be a display component of any device, or a separate display. The device can be a smart mobile device, a smart home device, a wearable device, a smart medical device, a PC (Personal Computer), etc. The smart mobile device can include such as a mobile phone, a tablet computer, a laptop computer, a PDA (Personal Digital Assistant), an Internet car, etc. Smart home devices can include smart home appliances, such as smart TVs, smart air conditioners, smart refrigerators, etc. Wearable devices can include such as smart watches, smart glasses, smart bracelets, VR (Virtual Reality) devices, AR (Augmented Reality, augmented reality devices), mixed reality devices (i.e., devices that can support virtual reality and augmented reality), etc. Smart medical devices can include such as smart medical imaging devices, smart physiotherapy devices, smart diagnostic devices, etc.

[0084] Furthermore, after the image is displayed on the screen, the user may interact with the image on the screen. In this case, the image component needs to have an interactive function with the user. Developers can pre-encapsulate the interactive response method in the control object. The interactive response method is used to respond to the user's specific interactive event and generate new image data. Usually, the user's interactive event for the image on the screen is captured by the system's event listener and provided to the application layer, which is then provided to the control layer of the image component. The control layer calls the corresponding control object and responds to the interactive event using the interactive response method encapsulated by the control object. Usually the response processes the image data to generate new image data. For example, after the user clicks on a specific position of the image on the screen, the image turns blue, and the corresponding interactive response method processes the image data so that the overall tone of the generated new image data is blue.

[0085] The control layer provides the new image data to the rendering layer, and the rendering layer renders the image data on the screen, for example, an image with an overall blue hue is presented on the screen.

[0086] Since videos, animations, etc. are essentially composed of frames of images, the image components involved in the embodiments of the present application can be applicable to the implementation of any image types including pictures, videos, animations, etc., that is, they can be embodied as picture components, video components, animation components, etc.

[0087] The above method provided in the embodiment of the present application can be applied to a variety of application scenarios. Several examples are listed here to help understand the above method process.

[0088] Example 1: View the image of the reversing radar in the map application on the mobile phone.

[0089] The developer uses the image component framework provided by this application to register data object 1 in the data layer. The data object 1 corresponds to the reversing radar on the vehicle side, such as Figure 3 As shown in . Register control object a in the control layer, and the control object a encapsulates the image properties and image processing methods set by the developer. The image processing method can be obtained by combining the two basic operation methods of scaling and cropping to adapt to the mobile phone screen. Bind control object a and data object 1. If there is only a rendering method corresponding to the mobile phone screen in the rendering layer, the rendering parameter set of the rendering method is provided to the control layer. If there are multiple rendering methods in the rendering layer, the binding relationship between control object a and data object 1 is corresponded to the rendering method A corresponding to the mobile phone screen, and then the rendering parameter set of rendering method A is provided to the control layer, thereby realizing the integration of the rendering layer and the control layer.

[0090] Thus, an image component is formed, and the image component is set in the map application on the mobile phone. The image component can be used as a plug-in or functional module in the map application, and is pre-installed in the map application for mobile phone download or upgrade.

[0091] The map application on the mobile phone can use this image component to display the image of the reversing radar on the mobile phone screen. Figure 3 As shown in , the data layer obtains the image data collected by the reversing radar on the vehicle side (corresponding to data object 1), converts the image data into binary data and provides it to the control layer. The control layer processes the image data using the control object a bound to the data object 1 to achieve scaling and cropping of the image data to fit the mobile phone screen. Then the rendering parameter set provided by the rendering layer is called, the rendering parameters are generated using the processed image data, and the processed image data and rendering parameters are passed to the rendering layer by calling the rendering layer interface. The rendering layer calls the rendering method A to render the image data and display it on the mobile phone screen.

[0092] It can be seen from this example that after the data layer collects image data from the data source, it converts the image data into a preset format to achieve format unification. In the control layer, image attributes and image processing methods are encapsulated as control objects. Developers only need to register and bind data objects and control objects using the image component framework provided by this application to process the image data from the data source to suit the screen, thereby realizing cross-end application of image components and greatly improving flexibility and development efficiency.

[0093] Example 2: View images captured by the vehicle camera and mobile phone camera on the vehicle terminal.

[0094] Developers use the image component framework provided by this application to register data object 1 and data object 2 in the data layer. Data object 1 corresponds to the vehicle camera, and data object 2 corresponds to the mobile phone camera. Figure 4 As shown in . Register control object a and control object b in the control layer. Among them, control object a encapsulates the image properties and image processing methods set by the developer, and the image processing method is scaling. Control object b also encapsulates the image properties and image processing methods set by the developer, and the image processing method is a combination of rotation and scaling. Bind control object a to data object 1, and bind control object b to data object 2. The rendering layer is provided with a rendering method B corresponding to the screen on the vehicle terminal, and the rendering parameter set of the rendering method B is provided to the control layer to realize the integration of the rendering layer and the control layer.

[0095] Thus, an image component is formed, and the image component can be set in the application of the vehicle terminal. The image component can be used as a plug-in or functional module in the application, and is pre-installed in the application for the vehicle terminal to download or upgrade.

[0096] The vehicle terminal can use the image component to display the images taken by the vehicle camera and the images taken by the mobile phone camera on the screen of the vehicle terminal. Figure 4 As shown in , the data layer obtains the image data collected by the vehicle camera (corresponding to data object 1), and collects the image data collected by the mobile phone camera (corresponding to data object 2), and converts the image data into binary data and provides them to the control layer. The control layer processes the image data corresponding to data object 1 using the control object a bound to data object 1 to achieve scaling of the image data captured by the vehicle camera. The image data corresponding to data object 2 is processed using the control object b bound to data object 2 to achieve rendering and scaling of the image data captured by the mobile phone camera. Then the rendering parameter set provided by the rendering layer is called, the rendering parameters are generated using the processed image data, and the processed image data and rendering parameters are passed to the rendering layer by calling the rendering layer interface. The rendering layer calls the rendering method B to render the image data and display it on the screen of the vehicle terminal. For example, the vehicle camera captures the rearward image, and the mobile phone camera captures the forward image, so that the forward image captured by the vehicle camera and the rearward image captured by the mobile phone camera can be displayed on the screen of the vehicle terminal.

[0097] It can be seen from this example that developers using the image component framework provided by this application only need to register and bind data objects and control objects to simultaneously implement cross-end applications and local applications of image components, greatly improving flexibility and development efficiency.

[0098] Example 3: The host displays the image captured by the camera of mobile phone 1 and the image captured by mobile phone 2 on different screens respectively.

[0099] Developers use the image component framework provided by this application to register data object 1 and data object 2 in the data layer. Data object 1 corresponds to the camera of mobile phone 1, and data object 2 corresponds to the camera of mobile phone 2. Mobile phone 1 and mobile phone 2 use different operating systems, such as operating system s1 and operating system s2 respectively. Figure 5 As shown in . Control object a is registered in the control layer, wherein control object a encapsulates image properties and image processing methods set by the developer, wherein the image processing method is a combination of rotation and scaling. For the control layer, the received data are all binary data. If the same processing needs to be performed on the image data collected by the cameras of mobile phone 1 and mobile phone 2, control object a can be bound to data object 1 and data object 2 respectively, and data object 1 and data object 2 can share a set of processing logic without distinction. The rendering layer is provided with rendering method A corresponding to screen 1 and rendering method B corresponding to screen 2. The binding relationship between data object 1 and control object a corresponds to rendering method A, and the binding relationship between data object 2 and control object b corresponds to rendering method B. The rendering parameter sets of rendering methods A and B are provided to the control layer to realize the integration of the rendering layer and the control layer.

[0100] Thus, an image component is formed, and the image component can be set in the application of the host. The image component can be used as a plug-in or functional module in the application, and is pre-installed in the application for the host to download or upgrade.

[0101] The host can use the image component to display the image of the camera of mobile phone 1 on screen 1 and the image of the camera of mobile phone 2 on screen 2. Figure 5As shown in , the data layer obtains the image data collected by the camera of mobile phone 1 (corresponding to data object 1), and collects the image data collected by the camera of mobile phone 2 (corresponding to data object 2), converts the image data into binary data and provides them to the control layer. Although the image data comes from different operating systems and there are differences in the data, after being "cleaned" by the data layer, there is no difference in the processing logic for the control layer. The control layer processes the image data corresponding to data object 1 using the control object a bound to data object 1 to realize the rotation and scaling of the image data taken by the camera of mobile phone 1. The image data corresponding to data object 2 is processed using the control object a bound to data object 2 to realize the rotation and scaling of the image data taken by the camera of mobile phone 2. Then the rendering parameter set of the rendering method A provided by the rendering layer is called, the image data of the processed data object 1 is used to generate the rendering parameters, and the processed image data and rendering parameters are passed to the rendering layer by calling the rendering layer interface. The rendering layer calls the rendering method A to render the image data and display it on screen 1. At the same time, the rendering parameter set of the rendering method B provided by the rendering layer is called, the image data of the processed data object 2 is used to generate the rendering parameters, and the processed image data and rendering parameters are passed to the rendering layer by calling the rendering layer interface. The rendering layer calls the rendering method B to render the image data and display it on the screen 2.

[0102] From this example, we can see that for such complex scenarios, developers do not need to write image component codes for the combination of mobile phone 1 camera and screen 1, and the combination of mobile phone 2 camera and screen 2. The image components implemented by the image component framework only require developers to register and bind data objects and control objects, as well as the correspondence between rendering methods and binding relationships, and the functions of the above complex scenarios can be implemented through a set of image component codes, which obviously greatly improves development efficiency and reduces development costs.

[0103] The above is a description of a specific embodiment of the specification. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the embodiments and still achieve the desired results. In addition, the processes depicted in the drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0104] Figure 6 This is a schematic block diagram of a device for constructing an image component provided in an embodiment of the present application. The image component includes a data layer, a control layer, and a rendering layer. The device can be used by developers to develop and use image components. Figure 6As shown, the device 600 may include: a first registration module 601, a second registration module 602 and an integration module 603. The main functions of each component unit are as follows:

[0105] The first registration module 601 is configured to generate registration information of at least one data object in the data layer, and the data layer is used to obtain image data from a data source corresponding to at least one data object, convert the image data into a preset format, and then provide it to the control layer.

[0106] The second registration module 602 is configured to generate registration information of at least one control object in the control layer and obtain binding information between the data object and the control object; wherein the control object encapsulates image attributes and image processing methods to process image data from the data object bound to the control object.

[0107] The integration module 603 is configured to generate configuration information of a rendering layer for rendering the processed image data on a screen for display.

[0108] As one possible implementation method, the data source and the screen may be located in different devices.

[0109] As another achievable manner, the above data source and screen correspond to different operating systems.

[0110] As one of the implementable methods, the first registration module 601 can generate registration information of data objects corresponding to multiple data sources at the data layer. Accordingly, the second registration module 602 can obtain the binding relationship between data objects corresponding to different data sources and the same control object; or obtain the binding relationship between data objects corresponding to different data sources and different control objects.

[0111] As one of the achievable methods, when the integration module 603 generates configuration information at the rendering layer, it can be specifically configured to: generate configuration information of a pre-packaged rendering method at the rendering layer, the rendering method is adapted to the screen, and obtain the corresponding relationship between the binding relationship and the rendering method, which is the binding relationship between the data object and the control object.

[0112] As one of the implementable ways, the control object further encapsulates an interactive response method, and the interactive response method is used to generate new image data in response to the user's interactive event on the screen with respect to the image data.

[0113] Figure 7 This is a schematic block diagram of another implementation device of an image component provided in an embodiment of the present application. The image component registers a binding relationship between a data object and a control object. The device is an application, or a plug-in or functional unit set in the application. Figure 7As shown, the device 700 may include: a data layer module 701, a control layer module 702 and a rendering layer module 703, which are processing modules of the data layer, the control layer and the rendering layer in the corresponding method embodiment. The main functions of each component unit are as follows:

[0114] The data layer module 701 is configured to obtain image data from a data source corresponding to at least one data object, convert the image data into a preset format, and then provide the image data to the control layer module.

[0115] The control layer module 702 is configured to process the image data using a control object bound to at least one data object, and provide the processed image data to the rendering layer module, wherein the control object encapsulates image attributes and image processing methods.

[0116] The rendering layer module 703 is configured to render the processed image data to display it on the screen.

[0117] As one possible implementation method, the data source and the screen may be located in different devices.

[0118] As another achievable manner, the above data source and screen correspond to different operating systems.

[0119] As one of the implementable ways, when converting the image data into a preset format, the data layer module 701 may be configured to convert the image data into binary data.

[0120] As one of the implementable ways, data objects corresponding to multiple data sources are pre-registered in the data layer module 701. Accordingly, data objects corresponding to different data sources are bound to the same control object; or, data objects corresponding to different data sources are bound to different control objects.

[0121] As one of the implementable ways, the image component also registers the corresponding relationship between the binding relationship and the rendering method.

[0122] When rendering the processed image data, the rendering layer module 703 may be specifically configured to render the processed image data using a pre-packaged rendering method, where the pre-packaged rendering method is a rendering method corresponding to the data object corresponding to the data source and the binding relationship between the data objects.

[0123] As one of the implementable ways, the control object also encapsulates an interactive response method. The control layer module 702 is further configured to: if an interactive event of the user on the screen for the image data is obtained, call the control object that processes the image data to respond to the interactive event using the interactive response method to generate new image data, and provide the new image data to the rendering layer module 703.

[0124] The rendering layer module 703 renders the new image data to display it on the screen.

[0125] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the device embodiment, since it is basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment. The device embodiment described above is only schematic, wherein the unit described as a separate component may or may not be physically separated, and the component displayed as a unit may or may not be a physical unit, that is, it may be located in one place, or it may be distributed on multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of this embodiment. Ordinary technicians in this field can understand and implement it without paying creative work.

[0126] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.

[0127] In addition, an embodiment of the present application further provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the steps of any one of the methods in the aforementioned method embodiments are implemented.

[0128] And an electronic device, comprising:

[0129] one or more processors; and

[0130] A memory associated with the one or more processors, the memory being used to store program instructions, wherein the program instructions, when read and executed by the one or more processors, execute the steps of the method described in any one of the aforementioned method embodiments.

[0131] The present application also provides a computer program product, including a computer program, which implements the steps of any one of the methods in the aforementioned method embodiments when executed by a processor.

[0132] in, Figure 8The architecture of the electronic device is shown exemplarily, and may specifically include a processor 810, a video display adapter 811, a disk drive 812, an input / output interface 813, a network interface 814, and a memory 820. The processor 810, the video display adapter 811, the disk drive 812, the input / output interface 813, the network interface 814, and the memory 820 may be communicatively connected via a communication bus 830.

[0133] Among them, the processor 810 can be implemented by a general-purpose CPU, a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, etc., to execute relevant programs to implement the technical solution provided in this application.

[0134] The memory 820 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 820 can store an operating system 821 for controlling the operation of the electronic device 800, and a basic input and output system (BIOS) 822 for controlling the low-level operation of the electronic device 800. In addition, a web browser 823, a data storage management system 824, and an implementation device 825 of an image component, etc. can also be stored. The implementation device 825 of the above-mentioned image component can be an application program that specifically implements the operations of the aforementioned steps in the embodiment of the present application. In short, when the technical solution provided by the present application is implemented by software or firmware, the relevant program code is stored in the memory 820 and is called and executed by the processor 810.

[0135] The input / output interface 813 is used to connect the input / output module to realize information input and output. The input / output module can be configured as a component in the device (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.

[0136] The network interface 814 is used to connect to a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through a wired mode (such as USB, network cable, etc.) or a wireless mode (such as mobile network, WIFI, Bluetooth, etc.).

[0137] The bus 830 comprises a pathway for transmitting information between the various components of the device (eg, the processor 810, the video display adapter 811, the disk drive 812, the input / output interface 813, the network interface 814, and the memory 820).

[0138] It should be noted that, although the above device only shows a processor 810, a video display adapter 811, a disk drive 812, an input / output interface 813, a network interface 814, a memory 820, a bus 830, etc., in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include components necessary for implementing the solution of the present application, and does not necessarily include all the components shown in the figure.

[0139] It can be known from the description of the above implementation methods that those skilled in the art can clearly understand that the present application can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of the present application can be essentially or partly contributed to the prior art in the form of a computer program product, which can be stored in a storage medium such as ROM / RAM, a magnetic disk, an optical disk, etc., and includes several instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in the various embodiments of the present application or certain parts of the embodiments.

[0140] The technical solution provided by the present application is described in detail above. The principle and implementation method of the present application are described in detail using specific examples. The description of the above embodiments is only used to help understand the method and core idea of ​​the present application. At the same time, for those skilled in the art, according to the idea of ​​the present application, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as limiting the present application.

Claims

1. A method for processing an image component, characterized in that: The image component includes a data layer, a control layer and a rendering layer, and the image component registers a binding relationship between a data object and a control object; the processing method includes: Using the data layer to obtain image data from a data source corresponding to at least one data object, converting the image data into a preset format and providing it to the control layer; Processing the image data using the control object bound to the at least one data object in the control layer, and providing the processed image data to the rendering layer, wherein the control object encapsulates image attributes and image processing methods; The processed image data is rendered using the rendering layer to be displayed on a screen.

2. The method according to claim 1, characterized in that The data source and the screen are located in different devices; or, The data source and the screen correspond to different operating systems.

3. The method according to claim 1, characterized in that The converting of the image data into a preset format comprises: Convert image data into binary data.

4. The method according to claim 1, characterized in that: The data layer pre-registers data objects corresponding to multiple data sources; Data objects corresponding to different data sources are bound to the same control object; or, data objects corresponding to different data sources are bound to different control objects.

5. The method according to any one of claims 1 to 4, characterized in that The image component also registers a correspondence between the binding relationship and the rendering method; Rendering the processed image data using the rendering layer includes: The processed image data is rendered using a rendering method prepackaged in the rendering layer, wherein the prepackaged rendering method is a rendering method corresponding to the data object corresponding to the data source and the binding relationship between the data objects.

6. The method according to any one of claims 1 to 4, characterized in that The control object also encapsulates an interactive response method; The processing method also includes: If an interaction event of the user on the screen for the image data is obtained, the control object for processing the image data in the control layer is used to respond to the interaction event using the interaction response method to generate new image data, and the new image data is provided to the rendering layer; The new image data is rendered using the rendering layer to be displayed on the screen.

7. A method for constructing an image component, characterized in that: The image component includes a data layer, a control layer and a rendering layer; the construction method includes: Generate registration information of at least one data object in the data layer; wherein the data layer is used to obtain image data from a data source corresponding to the at least one data object, convert the image data into a preset format and then provide it to the control layer; Generate registration information of at least one control object in the control layer, and obtain binding information between the data object and the control object; wherein the control object encapsulates image attributes and image processing methods to process image data from the data object bound to the control object; Generate configuration information of the rendering layer to render the processed image data on a screen for display.

8. A device for processing an image component, characterized in that: The image component includes a data layer, a control layer and a rendering layer, and the image component registers a binding relationship between a data object and a control object; the device includes: a data layer module, a control layer module and a rendering layer module; The data layer module is configured to obtain image data from a data source corresponding to at least one data object, convert the image data into a preset format, and then provide the image data to the control layer module; The control layer module is configured to process the image data using a control object bound to the at least one data object, and provide the processed image data to the rendering layer module, wherein the control object encapsulates image attributes and image processing methods; The rendering layer module is configured to render the processed image data to display it on a screen.

9. A device for constructing an image component, characterized in that: The image component includes a data layer, a control layer and a rendering layer; the device includes: A first registration module is configured to generate registration information of at least one data object in the data layer; wherein the data layer is used to obtain image data from a data source corresponding to the at least one data object, convert the image data into a preset format, and then provide it to the control layer; A second registration module is configured to generate registration information of at least one control object in the control layer, and obtain binding information between the data object and the control object; wherein the control object encapsulates image attributes and image processing methods to process image data from the data object bound to the control object; The integrated module is configured to generate configuration information of the rendering layer for rendering the processed image data on a screen for display.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images