Picture background color self-adaption method and device

Abstract

The embodiment of the invention discloses a picture background color self-adaption method and device. A specific embodiment of the method comprises the following steps: loading a picture in a page into a canvas; acquiring pixel data of the picture through a rendering context object interface of the canvas; determining a dominant hue of the picture according to the pixel data; and adjusting the background color of the page according to the dominant hue. According to the embodiment, the dominant hue of the picture is extracted through the canvas in combination with the color clustering algorithm and is applied to the background color, the effect that the page background color adapts to the dominant hue of the picture is achieved, the manual configuration cost is reduced, and the flexibility and the adaptability are improved.

Description

Technical Field

[0001] Embodiments of the present disclosure relate to the field of computer technology, and in particular to a method and device for image background color adaptation. Background Art

[0002] In the development iteration of the activity page, there is usually a main activity picture on the page, which is designed by the designer and uploaded to the background, and the front end obtains the picture for display. In addition to the picture area on the page, the designer usually provides a background color that matches the main activity picture, and the front-end developer writes it into the code to achieve the effect of unifying the main activity picture and the background color. This will bring a problem. When the style of the picture changes, for example, the main color of A changes to the main color of B, the background color cannot automatically change according to the color of the picture. The existing technology usually configures both the picture and the background color in the background. When the picture is readjusted, the background color configuration needs to be updated at the same time. Summary of the invention

[0003] The embodiments of the present disclosure provide a method and device for image background color adaptation.

[0004] In a first aspect, an embodiment of the present disclosure provides a method for image background color adaptation, comprising: loading an image in a page into a canvas; obtaining pixel data of the image through a rendering context object interface of the canvas; determining a main color tone of the image based on the pixel data; and adjusting the background color of the page based on the main color tone.

[0005] In some embodiments, loading the image in the page into the canvas includes: creating a canvas; creating a context of the canvas; obtaining the width and height of the image; and drawing the image into the canvas according to the width and the height.

[0006] In some embodiments, determining the main color tone of the image according to the pixel data includes: performing color clustering according to the pixel data of the image to obtain at least one color cluster; and selecting the color with the largest number from the at least one color cluster as the main color tone.

[0007] In some embodiments, color clustering is performed based on the pixel data of the image to obtain at least one color cluster, including: dividing the pixel data of the image into multiple color boxes; cutting the multiple color boxes into smaller boxes by a median cut method; repeating the cutting process until a predetermined number of boxes is reached; and selecting the largest number of colors from each box to obtain at least one color cluster.

[0008] In some embodiments, color clustering is performed based on the pixel data of the image to obtain at least one color cluster, including: dividing the image into multiple sub-images; compiling a histogram based on the color distribution of the pixel data in each sub-image; and taking the color with the highest frequency of occurrence in each histogram as a color cluster.

[0009] In some embodiments, obtaining the pixel data of the image includes: obtaining red channel data, green channel data, blue channel data, and transparency channel data of each pixel in the image; and searching from the image for target pixels whose transparency channel data is greater than a first predetermined value and whose red channel data, green channel data, and blue channel data are all not greater than a second predetermined value, as the pixel data of the image.

[0010] In a second aspect, an embodiment of the present disclosure provides a picture background color adaptation device, comprising: a loading unit, configured to load a picture in a page into a canvas; an acquisition unit, configured to acquire pixel data of the picture through a rendering context object interface of the canvas; a determination unit, configured to determine a main color tone of the picture based on the pixel data; and an adjustment unit, configured to adjust the background color of the page based on the main color tone.

[0011] In some embodiments, the loading unit is further configured to: create a canvas; create a context of the canvas; obtain the width and height of the image; and draw the image into the canvas according to the width and the height.

[0012] In some embodiments, the determination unit is further configured to: perform color clustering according to the pixel data of the image to obtain at least one color cluster; and select the color with the largest number from the at least one color cluster as the main color.

[0013] In some embodiments, the determination unit is further configured to: divide the pixel data of the image into multiple color boxes; cut the multiple color boxes into smaller boxes by median cutting method; repeat the cutting process until a predetermined number of boxes is reached; select the color with the largest number from each box to obtain at least one color cluster.

[0014] In some embodiments, the determination unit is further configured to: divide the image into a plurality of sub-images; generate a histogram based on the color distribution of pixel data in each sub-image; and take the color with the highest frequency of occurrence in each histogram as a color cluster.

[0015] In some embodiments, the acquisition unit is further configured to: acquire red channel data, green channel data, blue channel data and transparency channel data of each pixel in the image; and search from the image for target pixels whose transparency channel data is greater than a first predetermined value and whose red channel data, green channel data and blue channel data are all not greater than a second predetermined value, as pixel data of the image.

[0016] In a third aspect, an embodiment of the present disclosure provides an electronic device, comprising: one or more processors; a storage device on which one or more computer programs are stored, and when the one or more computer programs are executed by the one or more processors, the one or more processors implement a method as described in any one of the first aspect or the second aspect.

[0017] In a fourth aspect, an embodiment of the present disclosure provides a computer-readable medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the method as described in any one of the first aspect or the second aspect is implemented.

[0018] In a fifth aspect, an embodiment of the present disclosure provides a computer program product, including a computer program, which implements the method as described in any one of the first aspect or the second aspect when executed by a processor.

[0019] The picture background color adaptation method and device provided by the embodiments of the present disclosure obtains the pixel data of the picture through the interface of the canvas itself, and then extracts the main color of the picture in combination with the color clustering algorithm, and applies it to the page background color, so as to achieve the effect of the page background color adapting to the main color of the picture, making the picture more harmonious, improving the user's sensory comfort, reducing the cost of manual configuration, and improving flexibility and adaptability. The canvas can use a canvas canvas, which can make full use of the characteristics of the canvas canvas, directly operate pixels in the browser, can run on various browsers, and supports multiple image formats, which is suitable for creating interactive and dynamic Web applications.

[0020] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] Other features, objects and advantages of the present disclosure will become more apparent from the detailed description of non-limiting embodiments made with reference to the following drawings:

[0022] Figure 1 is an exemplary system architecture diagram in which an embodiment of the present disclosure may be applied;

[0023] Figure 2 is a flow chart of an embodiment of a method for image background color adaptation according to the present disclosure;

[0024] Figure 3a , 3b is a schematic diagram of an application scenario of the picture background color adaptive method according to the present disclosure;

[0025] Figure 4 is a structural schematic diagram of an embodiment of a device for self-adapting background color of a picture according to the present disclosure;

[0026] Figure 5 It is a structural diagram of a computer system of an electronic device suitable for implementing an embodiment of the present disclosure. DETAILED DESCRIPTION

[0027] The present disclosure is further described in detail below in conjunction with the accompanying drawings and embodiments. It is understood that the specific embodiments described herein are only used to explain the relevant invention, rather than to limit the invention. It is also necessary to explain that, for ease of description, only the parts related to the relevant invention are shown in the accompanying drawings.

[0028] It should be noted that, in the absence of conflict, the embodiments and features in the embodiments of the present disclosure may be combined with each other. The present disclosure will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0029] Figure 1 An exemplary system architecture 100 is shown to which an embodiment of a method or apparatus for image background color adaptation of the present disclosure can be applied.

[0030] like Figure 1 As shown, the system architecture 100 may include terminal devices 101, 102, 103, a network 104 and a server 105. The network 104 is used to provide a medium for communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0031] Users can use terminal devices 101, 102, 103 to interact with server 105 through network 104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 101, 102, 103, such as web browser applications, 3D video players, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0032] Terminal devices 101, 102, 103 can be hardware or software. When terminal devices 101, 102, 103 are hardware, they can be various electronic devices with display screens and supporting web browsers, including but not limited to smart phones, tablet computers, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III, Moving Picture Experts Group Audio Layer 3), MP4 (Moving Picture Experts Group Audio Layer IV, Moving Picture Experts Group Audio Layer 4) players, laptop computers and desktop computers, etc. When terminal devices 101, 102, 103 are software, they can be installed in the electronic devices listed above. It can be implemented as multiple software or software modules (for example, to provide distributed services), or it can be implemented as a single software or software module. No specific limitation is made here.

[0033] The server 105 may be a server providing various services, such as a backend web server that supports web browsers displayed on the terminal devices 101, 102, and 103. The backend web server may adjust the background color according to the main color of the image in the web page, and feed back the adjustment result to the terminal device.

[0034] It should be noted that the server can be hardware or software. When the server is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or it can be implemented as a single server. When the server is software, it can be implemented as multiple software or software modules (for example, multiple software or software modules used to provide distributed services), or it can be implemented as a single software or software module. No specific limitation is made here. The server can also be a server of a distributed system, or a server combined with a blockchain. The server can also be a cloud server, or an intelligent cloud computing server or intelligent cloud host with artificial intelligence technology.

[0035] It should be noted that the picture background color adaptation method provided in the embodiments of the present disclosure is generally executed by the server 105 , and accordingly, the picture background color adaptation device is generally disposed in the server 105 .

[0036] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0037] Continue to refer Figure 2 , shows a process 200 of an embodiment of a method for image background color adaptation according to the present disclosure. The method for image background color adaptation comprises the following steps:

[0038] Step 201, loading the image in the page into the canvas.

[0039] In this embodiment, the execution subject of the image background color adaptation method (for example Figure 1 The server (shown in Figure 1) detects that the image in the page has been updated and needs to adjust the background color. The page can be a web page or an application page. The canvas can be any of the following:

[0040] 1. Canvas: Canvas is a pixel-based drawing technology that can draw a large number of elements at a very high speed. It provides various APIs, such as drawing lines, paths, fill colors, etc., and can be used to draw complex dynamic graphics effects, such as charts, games, etc. Canvas uses JavaScript to write code, which is more flexible and can use complex algorithms and logic in drawing.

[0041] 2. SVG (Scalable Vector Graphics): SVG is an XML-based vector graphics format that can be used to create dynamic, interactive and scalable graphics. JavaScript can be used in conjunction with SVG to modify and control SVG elements through DOM operations.

[0042] 3. WebGL: WebGL is a JavaScript API that allows 3D and 2D graphics to be rendered on the page. It takes advantage of GPU acceleration and can handle complex graphics and animations.

[0043] 4. Three.js: Three.js is a popular JavaScript library for creating and displaying 3D computer graphics on the page. It provides a high-level API that simplifies the process of using WebGL.

[0044] 5. D3.js: D3.js is a data visualization library that is specifically designed to convert data into interactive and dynamic graphics. It supports multiple rendering technologies such as SVG, Canvas, and HTML.

[0045] 6. Paper.js: Paper.js is a vector graphics editing library that provides an API similar to Adobe Illustrator. It can be used to create and manipulate vector graphics, and supports animation and event handling.

[0046] This application uses a canvas to extract the main color of an image, so it is necessary to first load the image in the page into the canvas. For example, use the <canvas> element of HTML5 to load the image onto the canvas, so that the pixel data of the image can be manipulated. The canvas is a newly added tag in HTML5 for generating images in real time on the page and can manipulate the image content. Basically, it is a bitmap that can be manipulated with JavaScript. The canvas object represents an HTML canvas element- <canvas>It has no behavior of its own, but defines an API to support scripted client-side drawing operations.

[0047] Step 202: Obtain pixel data of the image through the rendering context object interface of the canvas.

[0048] In this embodiment, the getImageData method of the CanvasRenderingContext2D interface is used to obtain the pixel data of the image. This method returns an ImageData object containing the pixel data of the image. The width, height and position coordinates of the upper left corner of the image in the canvas can be input to determine the pixel data of the area where the image is located. The ImageData object contains a data attribute, which is a Uint8ClampedArray array that represents the RGBA pixel data of the image. Each pixel is represented by 4 consecutive bytes, corresponding to the red, green, blue and transparency (alpha) channels respectively.

[0049] Step 203, determining the main color tone of the image according to the pixel data.

[0050] In this embodiment, the main color of the image refers to the 1-2 colors with the largest area in the picture, which represents the overall color tendency of the picture and generally appears as the background color, ambient color or overall color cast. This color occupies the vast majority of the picture, helps to unify the picture and make the various parts of the photo resonate and echo each other, such as Figure 3b As shown in the figure, the red frame area is the navigation area, and the area outside the navigation area is the picture. Although there are many colors in the picture, blue occupies a large area, so the main color is blue. The determination of the main color is crucial to the overall atmosphere and emotional expression of the photo, because it can set off the atmosphere of the photo and create a specific mood. Different colors will bring completely different emotional associations to people. When the picture is "dominated" by a certain color, it is easier to create an atmosphere and the viewer can easily "read" the emotions in it.

[0051] Methods for determining the dominant color may include:

[0052] Using color area: Let the scene with a certain color appear in a large area in the picture to determine the main color of the picture. The color with the largest number of appearances can be determined as the main color by counting the number of pixels of each color in the picture. The color with the largest number of appearances can be counted through some clustering algorithms.

[0053] Use harmonious colors: The main color is not necessarily just one color, it can be composed of different colors, but these colors need to be harmonious with each other to create a unified visual experience. Harmonious colors refer to the combination of colors into a set of coordinated and harmonious color schemes through certain color matching rules in color selection. This color scheme can not only make the overall design beautiful, but also make people feel visually comfortable and harmonious.

[0054] Bright scenes are suitable for expressing colorful colors: If a photo needs to give the viewer a colorful visual experience, the brightness of the picture needs to be slightly higher, because the atmosphere created by a high-brightness picture is more compatible with colorful colors.

[0055] Use the Tone Separation tool to assist: Compared to adjusting white balance and color temperature, the Tone Separation tool is more suitable for creating the main color tone because it provides a richer range of optional colors and can adjust the colors of highlights and shadows to achieve countless combinations of picture tones.

[0056] Step 204, adjusting the background color of the page according to the main color tone.

[0057] In this embodiment, the background color of the current page can be replaced by the main color determined in step 203. Optionally, a harmonious color of the main color (the same color as the main body or a color close to the main body) can be used as the background color of the page. Figure 3b As shown, the main color is blue, and the navigation area can be changed to a similar blue instead of the same blue as the main color.

[0058] Optionally, it is detected whether the color difference between the edge color of the picture and the main color is greater than a predetermined threshold. If it is less than the predetermined threshold, a harmonious color of the main color (the same color as the main body or a close color) is used as the background color of the page.

[0059] The method provided by the above-mentioned embodiment of the present disclosure extracts the main color tone of the picture through a canvas combined with a color clustering algorithm, and applies it to the background color, thereby achieving an effect in which the page background color is adaptive to the main color tone of the picture, reducing the cost of manual configuration and improving flexibility and adaptability.

[0060] In some optional implementations of this embodiment, loading the image in the page into the canvas includes: creating a canvas; creating a context of the canvas; obtaining the width and height of the image; and drawing the image into the canvas according to the width and the height.

[0061] The following is a detailed description of the steps:

[0062] First, create a canvas using a method that dynamically creates a new canvas element (for example, document.createElement('canvas'));

[0063] Create a canvas context using a method that specifies the type of drawing to be done on the canvas (e.g. canvas.getContext('2d') );

[0064] Get the width and height of the image;

[0065] Draw the image to the canvas using methods that maintain the image's original size and proportions (for example, the context.drawImage method).

[0066] In some optional implementations of this embodiment, determining the main color tone of the image according to the pixel data includes: performing color clustering according to the pixel data of the image to obtain at least one color cluster; and selecting the color with the largest number from the at least one color cluster as the main color tone. Color clustering is a technology that groups colors in an image or data set according to similarity. Color clustering mainly relies on clustering algorithms, such as K-means, hierarchical clustering, etc. These algorithms can automatically divide points (i.e., colors) in the color space into multiple clusters, and the colors in each cluster have a high similarity, while the colors between different clusters are quite different. For example, 10 color clusters are obtained by the color clustering algorithm, and each color cluster has a central color, i.e., a cluster center, assuming 2 red cluster centers, 4 green cluster centers, 3 blue cluster centers, and 1 black cluster center. The color with the largest number selected from the 10 center colors is green (appears 4 times). If there is more than one color with the largest number, all of them can be used as the main color tone. It is also possible to re-cluster and set the number of cluster centers to be more to obtain a more accurate clustering result.

[0067] In some optional implementations of the present embodiment, color clustering is performed based on the pixel data of the image to obtain at least one color cluster, including: dividing the pixel data of the image into multiple color boxes; cutting the multiple color boxes into smaller boxes by a median cut method; repeating the cutting process until a predetermined number of boxes is reached; and selecting the largest number of colors from each box to obtain at least one color cluster.

[0068] The color box is used to store the pixel and color data of the image.

[0069] Median Cut is a widely used color quantization algorithm that aims to reduce the number of colors in an image to a specified number while keeping the image as readable as possible. This algorithm is not only used in image processing software such as Photoshop and GIMP, but its principles are also used in various image processing and compression tasks.

[0070] The basic principle of the color median cut method is to map all pixels of the image into a three-dimensional color space, which consists of three dimensions of RGB. The algorithm iteratively divides this color space until the required number of colors is reached. The specific steps are as follows:

[0071] Initialization: Put all the pixels of the image into a box, which is represented in the RGB color space.

[0072] Calculate the difference: Calculate the difference between the maximum and minimum values ​​of the RGB three elements of all pixels in this box, and find the color channel with the largest difference.

[0073] Sort and split: Sort the pixels in the box according to the selected color channel, and then cut from the median to divide the pixels into two boxes, each containing the same number of pixels.

[0074] Iteration: Repeat the above process for the two separated boxes until the required number of colors is reached or a certain stopping condition is met.

[0075] Color quantization: Finally, the pixel color within each box is quantized to the average color of the box to obtain the final color quantized image.

[0076] The advantage of the color median cut method is that it can effectively reduce the number of colors in an image while maintaining the basic visual information of the image. By iteratively splitting the color space, the algorithm can find the set that best represents the colors of the original image, thereby achieving effective color quantization. This algorithm is not only used in image processing software, but also plays an important role in various scenarios that require color quantization.

[0077] In some optional implementations of the present embodiment, the color clustering is performed based on the pixel data of the image to obtain at least one color cluster, including: dividing the image into multiple sub-images; statistically compiling a histogram based on the color distribution of the pixel data in each sub-image; and taking the color with the highest frequency in each histogram as a color cluster. Color histogram is a color feature widely used in many image retrieval systems. It describes the proportion of different colors in the entire image, and does not care about the spatial position of each color, that is, it cannot describe the objects or subjects in the image. Color histogram is particularly suitable for describing images that are difficult to automatically segment.

[0078] In some optional implementations of this embodiment, the obtaining of the pixel data of the image includes: obtaining the red channel data, green channel data, blue channel data, and transparency channel data of each pixel in the image; finding the target pixel whose transparency channel data is greater than a first predetermined value, and whose red channel data, green channel data, and blue channel data are not greater than a second predetermined value from the image, as the pixel data of the image. The first predetermined value may be a value such as 125, 126, 127, etc., and the second predetermined value may be a value such as 250, 251, 252, etc. In this way, transparent pixels and white pixels may be filtered out.

[0079] Continue to see Figure 3a-3b , Figure 3a-3b is a schematic diagram of an application scenario of the image background color adaptive method according to this embodiment. Figure 3a In the application scenario, the green apple picture (background color is green) is replaced by a red apple picture on the page. The red apple picture is loaded into the canvas, and the color of each pixel in the picture is obtained by using the rendering context object interface of the canvas. The picture can be cut into 4*6 grids, and the color with the largest area in each grid is determined as the cluster center through a color clustering algorithm (for example, the median cut method, color histogram, etc.). The cluster center of 15 grids is red, and the number of red grids accounts for the majority, so the main color of the picture is red (RGB (242, 31, 22)). The background color of the page can be adjusted to a color close to the main color red, such as RGB (238, 14, 16), and green is no longer used. In this way, the picture and background color of the page can be unified, which looks more harmonious and does not incur labor costs.

[0080] exist Figure 3b In the application scenario, there is no need to cut the image into small grids. The main color of the image is determined to be blue (RGB (150, 250, 250)) directly through the color clustering algorithm (for example, the median cut method, color histogram and other algorithms). The color of the navigation area of ​​the page can be adjusted from the default color (for example, white) to a color close to the main color of blue, such as RGB (125, 210, 250). In this way, the color of the navigation area is unified with the color of the image, the picture is more harmonious, and the user experience is improved.

[0081] Further references Figure 4 As an implementation of the methods shown in the above figures, the present disclosure provides an embodiment of a device for image background color adaptation. Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0082] like Figure 4 As shown, the image background color adaptation device 400 of this embodiment includes: a loading unit 401, an acquisition unit 402, a determination unit 403 and an adjustment unit 404. The loading unit 401 is configured to load the image in the page into the canvas; the acquisition unit 402 is configured to obtain the pixel data of the image through the rendering context object interface of the canvas; the determination unit 403 is configured to determine the main color tone of the image according to the pixel data; and the adjustment unit 404 is configured to adjust the background color of the page according to the main color tone.

[0083] In this embodiment, the specific processing of the loading unit 401, the obtaining unit 402, the determining unit 403 and the adjusting unit 404 of the image background color adaptive device 400 can be referred to. Figure 2 Corresponding to step 201, step 202, step 203, and step 204 in the embodiment.

[0084] In some optional implementations of this embodiment, the loading unit 401 is further configured to: create a canvas; create a context of the canvas; obtain the width and height of the image; and draw the image into the canvas according to the width and the height.

[0085] In some optional implementations of this embodiment, the determination unit 403 is further configured to: perform color clustering according to the pixel data of the image to obtain at least one color cluster; and select the color with the largest number from the at least one color cluster as the main color.

[0086] In some optional implementations of this embodiment, the determination unit 403 is further configured to: divide the pixel data of the image into multiple color boxes; cut the multiple color boxes into smaller boxes by a median cutting method; repeat the cutting process until a predetermined number of boxes is reached; and select the color with the largest number from each box to obtain at least one color cluster.

[0087] In some optional implementations of this embodiment, the determination unit 403 is further configured to: divide the image into multiple sub-images; generate a histogram based on the color distribution of pixel data in each sub-image; and take the color with the highest frequency of occurrence in each histogram as a color cluster.

[0088] In some optional implementations of this embodiment, the acquisition unit 402 is further configured to: acquire red channel data, green channel data, blue channel data, and transparency channel data of each pixel in the image; and search from the image for target pixels whose transparency channel data is greater than a first predetermined value, and whose red channel data, green channel data, and blue channel data are all not greater than a second predetermined value, as pixel data of the image.

[0089] It should be noted that the collection, collection, updating, analysis, processing, use, transmission, storage and other aspects of user personal information involved in the technical solution of this disclosure are in compliance with the provisions of relevant laws and regulations, are used for legitimate purposes, and do not violate public order and good morals. Necessary measures are taken for user personal information to prevent illegal access to user personal information data and maintain the security of user personal information, network security and national security.

[0090] According to an embodiment of the present disclosure, the present disclosure also provides an electronic device and a readable storage medium.

[0091] An electronic device comprises: one or more processors; a storage device on which one or more computer programs are stored, and when the one or more computer programs are executed by the one or more processors, the one or more processors implement the method described in process 200.

[0092] A computer-readable medium stores a computer program, wherein the computer program implements the method described in process 200 when executed by a processor.

[0093] Figure 5 A schematic block diagram of an example electronic device 500 that can be used to implement an embodiment of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples and are not intended to limit the implementation of the present disclosure described and / or required herein.

[0094] like Figure 5 As shown, the device 500 includes a computing unit 501, which can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 502 or a computer program loaded from a storage unit 508 into a random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the device 500 can also be stored. The computing unit 501, the ROM 502, and the RAM 503 are connected to each other via a bus 504. An input / output (I / O) interface 505 is also connected to the bus 504.

[0095] A number of components in the device 500 are connected to the I / O interface 505, including: an input unit 506, such as a keyboard, a mouse, etc.; an output unit 507, such as various types of displays, speakers, etc.; a storage unit 508, such as a disk, an optical disk, etc.; and a communication unit 509, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 509 allows the device 500 to exchange information / data with other devices through a computer network such as the Internet and / or various telecommunication networks.

[0096] The computing unit 501 may be a variety of general and / or special processing components with processing and computing capabilities. Some examples of the computing unit 501 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various dedicated artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, digital signal processors (DSPs), and any appropriate processors, controllers, microcontrollers, etc. The computing unit 501 performs the various methods and processes described above, such as the road area planning method. For example, in some embodiments, the road area planning method may be implemented as a computer software program, which is tangibly contained in a machine-readable medium, such as a storage unit 508. In some embodiments, part or all of the computer program may be loaded and / or installed on the device 500 via the ROM 502 and / or the communication unit 509. When the computer program is loaded into the RAM 503 and executed by the computing unit 501, one or more steps of the road area planning method described above may be performed. Alternatively, in other embodiments, the computing unit 501 may be configured to perform the road area planning method in any other appropriate manner (e.g., by means of firmware).

[0097] Various implementations of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various implementations can include: being implemented in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which can be a special purpose or general purpose programmable processor that can receive data and instructions from a storage system, at least one input device, and at least one output device, and transmit data and instructions to the storage system, the at least one input device, and the at least one output device.

[0098] The program code for implementing the method of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general-purpose computer, a special-purpose computer, or other programmable data processing device, so that the program code, when executed by the processor or controller, enables the functions / operations specified in the flow chart and / or block diagram to be implemented. The program code may be executed entirely on the machine, partially on the machine, partially on the machine and partially on a remote machine as a stand-alone software package, or entirely on a remote machine or server.

[0099] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0100] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user can provide input to the computer. Other types of devices can also be used to provide interaction with the user; for example, the feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including acoustic input, voice input, or tactile input).

[0101] The systems and techniques described herein may be implemented in a computing system that includes back-end components (e.g., as a data server), or a computing system that includes middleware components (e.g., an application server), or a computing system that includes front-end components (e.g., a user computer with a graphical user interface or a web browser through which a user can interact with implementations of the systems and techniques described herein), or a computing system that includes any combination of such back-end components, middleware components, or front-end components. The components of the system may be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: a local area network (LAN), a wide area network (WAN), and the Internet.

[0102] A computer system may include a client and a server. The client and the server are generally remote from each other and usually interact through a communication network. The relationship between the client and the server is generated by computer programs running on the respective computers and having a client-server relationship with each other. The server may be a server of a distributed system, or a server combined with a blockchain. The server may also be a cloud server, or an intelligent cloud computing server or intelligent cloud host with artificial intelligence technology. The server may be a server of a distributed system, or a server combined with a blockchain. The server may also be a cloud server, or an intelligent cloud computing server or intelligent cloud host with artificial intelligence technology.

[0103] It should be understood that the various forms of processes shown above can be used to reorder, add or delete steps. For example, the steps recorded in this disclosure can be executed in parallel, sequentially or in different orders, as long as the desired results of the technical solutions disclosed in this disclosure can be achieved, and this document does not limit this.

[0104] The above specific implementations do not constitute a limitation on the protection scope of the present disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions can be made according to design requirements and other factors. Any modification, equivalent substitution and improvement made within the spirit and principle of the present disclosure shall be included in the protection scope of the present disclosure.< / canvas>

Claims

1. A method for adaptively adjusting the background color of an image, comprising: Load the image from the page into the canvas; Obtain pixel data of the image through the rendering context object interface of the canvas; Determine the main color tone of the picture according to the pixel data; The background color of the page is adjusted according to the main color tone.

2. The method according to claim 1, wherein: The step of loading the image in the page into the canvas includes: Create a canvas; Create a canvas context; Get the width and height of the image; Draw the image into the canvas according to the width and the height.

3. The method according to claim 1, wherein: The determining the main color tone of the picture according to the pixel data includes: Performing color clustering according to pixel data of the image to obtain at least one color cluster; A color with the largest number is selected from the at least one color cluster as a main color.

4. The method according to claim 3, wherein: The color clustering is performed according to the pixel data of the picture to obtain at least one color cluster, including: Dividing pixel data of the image into a plurality of color boxes; Cutting the plurality of color boxes into smaller boxes by a median cutting method; The cutting process is repeated until the predetermined number of boxes is reached; Select the color with the largest number from each box to get at least one color cluster.

5. The method according to claim 3, wherein: The step of performing color clustering according to the pixel data of the picture to obtain at least one color cluster includes: Dividing the picture into a plurality of sub-pictures; A histogram is generated based on the color distribution of the pixel data in each sub-image; The color with the highest frequency in each histogram is regarded as a color cluster.

6. The method according to claim 1, wherein: The obtaining pixel data of the picture includes: Obtain red channel data, green channel data, blue channel data and transparency channel data for each pixel in the image; A target pixel whose transparency channel data is greater than a first predetermined value and whose red channel data, green channel data and blue channel data are not greater than a second predetermined value is found from the picture as the pixel data of the picture.

7. A device for self-adapting picture background color, comprising: A loading unit, configured to load the image in the page into the canvas; An acquisition unit, configured to acquire pixel data of the image through a rendering context object interface of the canvas; a determining unit, configured to determine a main color tone of the image according to the pixel data; The adjustment unit is configured to adjust the background color of the page according to the main color tone.

8. An electronic device comprising: one or more processors; a storage device having one or more computer programs stored thereon, When the one or more computer programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 6.

9. A computer readable medium having a computer program stored thereon, wherein: When the computer program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

10. A computer program product, comprising a computer program, which, when executed by a processor, implements the method according to any one of claims 1 to 6.

Images