Image processing method and device, nonvolatile storage medium and computer equipment

Abstract

The invention discloses an image processing method and device, a nonvolatile storage medium and computer equipment. The method comprises the following steps: acquiring an initial image; a canvas container matched with the initial image is generated based on a preset self-defined instruction, and the self-defined instruction represents an extension instruction for generating a target effect by the initial image; extracting color values of a plurality of pixel points of the initial image; and based on the color value, rendering the initial image on the canvas container by using a non-uniform noise algorithm to obtain a target image which is an image with a snowflake noise disturbance effect. The technical problems that the threshold of an existing image rendering technology is high, and complex codes need to be written are solved.

Description

Technical Field

[0001] The present invention relates to the field of image processing, and in particular to an image processing method, apparatus, non-volatile storage medium and computer equipment. Background Art

[0002] With the increasing richness of modern web applications and the widespread use of multimedia content, video playback has become an indispensable part. Users have higher requirements for the visual experience during video loading, not only for informational prompts, but also for innovative and engaging visual effects. <video>The element provides basic playback and loading functions, but its default pause frame display during loading often lacks dynamic beauty, especially compared with users' growing aesthetic needs and interactive expectations, it appears relatively monotonous and unattractive.

[0003] Currently, most video loading effect designs are limited to preset, static icons or progress bars. While intuitive and clear, these solutions lack personalization and dynamic changes, making them difficult to adapt to the customized needs of different application scenarios or brand styles. Furthermore, although WebGL technology can achieve complex graphics calculations and real-time animation effects, existing video loading solutions fail to fully utilize this potential. Most of them do not apply the parallel processing capabilities of the GPU to the dynamic effect generation of video frames, which limits the innovation and visual expressiveness of loading effects. Integrating WebGL rendering technology with the video loading process requires developers to have in-depth knowledge of graphics programming, especially shader development. This raises the technical threshold and limits the popularity and application of such effects among general developers. Furthermore, the visual transition between video loading and normal playback in current technologies is relatively abrupt. The direct switch from the static loading effect to the video content may cause a sense of disconnection for users, affecting the smoothness of the viewing experience.

[0004] To address the above-mentioned problems, no effective solutions have been proposed so far. Summary of the Invention

[0005] The embodiments of the present invention provide an image processing method, apparatus, non-volatile storage medium, and computer device to at least solve the technical problem that current image rendering technology has a high threshold and requires writing complex codes.

[0006] According to one aspect of an embodiment of the present invention, there is provided an image processing method, comprising: acquiring an initial image; generating a canvas container matching the initial image based on preset custom instructions, wherein the custom instructions are represented as extended instructions for generating a target effect for the initial image; extracting color values ​​of multiple pixels of the initial image; and rendering the initial image on the canvas container using a non-uniform noise algorithm based on the color values ​​to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect.

[0007] Optionally, extracting color values ​​of multiple pixel points of the initial image includes: determining a texture image of the initial image based on a web graphics library WebGL, wherein the texture image is a format corresponding to the initial image in the web graphics library; determining texture coordinates of the texture image in a canvas container based on a vertex shader, wherein the texture coordinates are used to locate multiple pixel points in the texture image; and extracting color values ​​of the multiple pixel points through a fragment shader based on the texture coordinates.

[0008] Optionally, based on the color value, the initial image is rendered on the canvas container using a non-uniform noise algorithm to obtain a target image, including: generating a perturbation noise value based on a noise function corresponding to the non-uniform noise algorithm; in a fragment shader, mixing the color values ​​of multiple pixels with the perturbation noise value respectively to obtain target color values ​​of the multiple pixels; and applying the target color value to the canvas container to obtain a target image.

[0009] Optionally, the expression for determining the target color value is as follows:

[0010] final_color=color+(noise+NoiseColor)×strength

[0011] Among them, final_color is the target color value, color is the color value, noise is the disturbance noise value, NoiseColor is the preset color parameter, and strength is the preset strength parameter. The preset color parameter and preset strength parameter are adjusted based on user needs.

[0012] Optionally, the noise function includes Perlin Poisson noise, Simplex noise or Worley cell noise, wherein the noise function includes a preset time parameter, and the preset time parameter is adjusted based on user needs.

[0013] Optionally, the initial image is an image corresponding to a pause frame in the initial video.

[0014] Optionally, obtaining the initial image includes: based on an event listener, detecting the playback state of the initial video, wherein the playback state includes normal playback and paused playback; when the playback state is paused playback, determining that the image corresponding to the current pause frame is the initial image.

[0015] According to another aspect of an embodiment of the present invention, an image processing device is also provided, including: an acquisition module for acquiring an initial image; a generation module for generating a canvas container matching the initial image based on preset custom instructions, wherein the custom instructions are represented as extended instructions for generating a target effect for the initial image; an extraction module for extracting the color values ​​of multiple pixels of the initial image; and a rendering module for rendering the initial image on the canvas container using a non-uniform noise algorithm based on the color values ​​to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect.

[0016] According to another aspect of an embodiment of the present invention, a non-volatile storage medium is provided. The non-volatile storage medium includes a stored program, wherein when the program is running, the device where the non-volatile storage medium is located is controlled to execute any one of the above-mentioned image processing methods.

[0017] According to yet another aspect of an embodiment of the present invention, a computer device is provided. The computer device includes a processor, and the processor is configured to run a program. When the program is run, any one of the above-mentioned image processing methods is executed.

[0018] According to yet another aspect of an embodiment of the present invention, a computer program product is provided, including a computer program, which implements any one of the above-mentioned image processing methods when executed by a processor.

[0019] In an embodiment of the present invention, an image processing method is adopted, by obtaining an initial image; generating a canvas container matching the initial image based on a preset custom instruction, wherein the custom instruction is characterized as an extended instruction for generating a target effect for the initial image; extracting the color values ​​of multiple pixels of the initial image; and rendering the initial image on the canvas container using a non-uniform noise algorithm based on the color values ​​to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect, thereby achieving the purpose of efficiently rendering the initial image with a snowflake noise disturbance effect on the canvas container, thereby realizing the technical effect of lowering the development threshold and enabling developers to achieve efficient loading effects without writing complex code, thereby solving the technical problem that the current image rendering technology has a high threshold and requires writing complex code. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of this application. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:

[0021] Figure 1 A hardware structure block diagram of a computer terminal for implementing an image processing method is shown;

[0022] Figure 2 is a flowchart of an image processing method provided according to an embodiment of the present invention;

[0023] Figure 3 is a comparative diagram showing an implementation effect provided according to an optional embodiment of the present invention;

[0024] Figure 4 is a structural block diagram of an image processing device provided according to an embodiment of the present invention. DETAILED DESCRIPTION

[0025] In order to enable those skilled in the art to better understand the solutions of the present invention, the technical solutions in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the embodiments described are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of the present invention.

[0026] It should be noted that the terms "first," "second," and the like in the specification and claims of the present invention and the accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or precedence. It should be understood that the terms used in this manner are interchangeable where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "including," "having," and any variations thereof are intended to cover non-exclusive inclusions. For example, a process, method, system, product, or apparatus comprising a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units that are not explicitly listed or that are inherent to such process, method, product, or apparatus.

[0027] According to an embodiment of the present invention, an embodiment of an image processing method is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0028] The method embodiment provided in the first embodiment of the present application can be executed in a mobile terminal, a computer terminal or a similar computing device. Figure 1 FIG1 shows a hardware structure block diagram of a computer terminal for implementing an image processing method. Figure 1 As shown, the computer terminal 10 may include one or more (illustrated as 102a, 102b, ..., 102n in the figure) processors (the processor may include but is not limited to a microprocessor MCU or a programmable logic device FPGA and other processing devices), a memory 104 for storing data. In addition, it may also include: a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of the BUS bus), a network interface, a power supply and / or a camera. It will be understood by those skilled in the art that Figure 1 The structure shown is only for illustration and does not limit the structure of the above electronic device. Figure 1 More or fewer components than shown, or with Figure 1 Different configurations shown.

[0029] It should be noted that the one or more processors and / or other data processing circuits described above may generally be referred to herein as "data processing circuitry." The data processing circuitry may be embodied in whole or in part as software, hardware, firmware, or any other combination thereof. Furthermore, the data processing circuitry may be a single, independent processing module, or may be fully or partially integrated into any of the other components of the computer terminal 10. As described in the embodiments of the present application, the data processing circuitry serves as a processor control (e.g., selection of a variable resistor terminal path connected to an interface).

[0030] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the image processing method in the embodiment of the present invention. The processor executes the software programs and modules stored in the memory 104 to perform various functional applications and data processing, that is, to implement the image processing method of the application described above. The memory 104 may include high-speed random access memory and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include memory remotely located relative to the processor, and these remote memories may be connected to the computer terminal 10 via a network. Examples of the aforementioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0031] The display may be, for example, a touch screen liquid crystal display (LCD) that enables a user to interact with a user interface of the computer terminal 10 .

[0032] Figure 2 FIG. 1 is a flow chart of an image processing method according to an embodiment of the present invention. Figure 2 As shown, the method includes the following steps:

[0033] Step S201: Acquire an initial image.

[0034] In this step, the initial image can be a static image to be processed, or it can be a video frame displayed by a video player when it is paused. Specifically, it can involve instantly capturing the current frame of the video when the video is loading or paused, which serves as the basis for subsequent image processing and special effect generation.

[0035] Step S202 : generating a canvas container that matches the initial image based on a preset custom instruction, wherein the custom instruction is represented as an extended instruction for generating a target effect for the initial image.

[0036] In this step, Vue Custom Directives are an extension mechanism provided by the Vue.js framework for adding specific behaviors or functionality to HTML elements. These directives allow developers to bind custom behaviors to DOM elements, allowing for greater flexibility and controllability in rendering and interaction. A key feature of custom directives is that they can be reused and applied across different components, improving code maintainability and reusability. Developers can customize directives based on specific needs or use a community-provided custom directive library to simplify the development process.

[0037] In this example, first, you can create a Vue custom directive (such as `v-snowy-loading`), which is bound to ` <video>`element. When the directive is bound to an element, that is, an initial image, a ` <canvas>`Canvas container, can be achieved through the `inserted` hook of the directive to ensure that the image and the Canvas container are completely synchronized. In addition, after creating the canvas container, you also need to ` <canvas>`Get a WebGL context so that you can render the video through WebGL. You need to ensure that the basic settings of the WebGL rendering environment are correct, including the viewport size, background clear color, etc. You can use `gl.getContext('webgl')` to create a WebGL context and initialize the WebGL rendering state, such as `gl.clearColor()` to set the background color and `gl.viewport()` to determine the rendering area. Canvas container` <canvas>`Size needs to be the same as` <video>`The initial image elements remain synchronized and need to be dynamically adjusted when the image size or window is adjusted` <canvas>`size to achieve accurate coverage.

[0038] Step S203: extracting color values ​​of multiple pixels of the initial image.

[0039] In this step, the fragment shader is responsible for the final pixel color calculation, which is the core of generating visual effects. In the fragment shader, texture coordinates are used to sample color values ​​from the texture image. This operation is performed using the texture2D function provided by WebGL. This function locates the corresponding pixel in the texture image based on the input texture coordinates, thereby extracting its color information (usually in RGBA format).

[0040] Step S204 , based on the color value, the initial image is rendered on the canvas container using a non-uniform noise algorithm to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect.

[0041] In this step, the snow noise perturbation effect involves processing the image through graphics rendering techniques to create a "snow noise" effect similar to that found on traditional televisions. For example, when a video is buffering or loading, the frame isn't frozen. Instead, it's converted into a visually randomly distributed noise image, mimicking the white noise or snow effect that occurs when a TV signal is unstable. This effect not only adds visual movement but also provides a unique dynamic feedback during loading.

[0042] Noise algorithms are a technique used in computer graphics to simulate the randomness and complexity of nature. The purpose of the non-uniform noise algorithm here is to generate an irregular, dynamically changing snowflake noise pattern in the fragment shader. The fragment shader updates the color value of each pixel in real time based on the calculation results, generating a target image with the perturbed snowflake noise effect. This process is executed in parallel on the GPU, maintaining a high frame rate and responsiveness even when rendering high-resolution video frames.

[0043] Through the above steps, the goal of efficiently rendering the initial image with the snow noise disturbance effect on the canvas container is achieved, thereby achieving the technical effect of lowering the development threshold and enabling developers to achieve efficient loading effects without writing complex code, thereby solving the technical problem that the current image rendering technology has a high threshold and requires writing complex code.

[0044] As an optional embodiment, extracting color values ​​of multiple pixel points of an initial image includes: determining a texture image of the initial image based on a web graphics library WebGL, wherein the texture image is a format corresponding to the initial image in the web graphics library; determining texture coordinates of the texture image in a canvas container based on a vertex shader, wherein the texture coordinates are used to locate multiple pixel points in the texture image; and extracting color values ​​of the multiple pixel points through a fragment shader based on the texture coordinates.

[0045] Alternatively, WebGL is a JavaScript-based 3D and 2D graphics rendering API that leverages the web browser's GPU hardware acceleration to render images. In this step, the paused frame of the video (the initial image) is converted into a texture format that WebGL can process. A texture image is a GPU-accessible data structure that can store image data, allowing WebGL shader programs to directly read and manipulate the image's pixels.

[0046] Vertex shader is mainly used to map pixel coordinates to the normalized device coordinate system (NDC). Vertex shader is a key component in the WebGL rendering process. It is responsible for processing vertex data such as position, color and texture coordinates to generate the geometry of the final image. At this stage, the vertex shader calculates the video frame in <canvas>How is it drawn in the image? Specifically, it calculates the texture coordinates for each vertex. The fragment shader is responsible for generating the final color for each pixel. It samples the color value from the texture image based on the texture coordinates of each pixel. The texture coordinates map the pixels on the texture image to the pixels of the final rendered image, allowing the fragment shader to accurately access the color information of each pixel of the original image (the paused frame of the video).

[0047] Specifically, the fragment shader is a stage in the graphics rendering pipeline that calculates the color value of each pixel. It is an important component of OpenGL, WebGL and other graphics programming APIs. During the rendering process, the fragment shader receives interpolated data (such as texture coordinates, normal vectors, etc.) passed by the vertex shader and determines the final pixel color based on this data and the written GLSL code. The fragment shader is executed once for each pixel to be rendered and plays a key role in lighting, texture mapping and other visual effects. Typically, developers use vertex shaders to work with fragment shaders. The vertex shader is responsible for transforming and projecting the geometry and passing the results to the fragment shader for further processing.

[0048] GLSL is a programming language for writing graphics shaders, which are used to perform high-performance parallel computing and graphics processing tasks in the graphics rendering pipeline. GLSL uses C-style syntax and provides a rich set of built-in functions and data types, allowing developers to easily implement a variety of complex image processing effects. It supports different types of shader programs, such as vertex shaders, fragment shaders, and geometry shaders.

[0049] As an optional embodiment, based on the color value, the initial image is rendered on the canvas container using a non-uniform noise algorithm to obtain a target image, including: generating a disturbance noise value based on a noise function corresponding to the non-uniform noise algorithm; in a fragment shader, mixing the color values ​​of multiple pixels with the disturbance noise value respectively to obtain target color values ​​of the multiple pixels; and applying the target color value to the canvas container to obtain a target image.

[0050] Optionally, a non-uniform noise algorithm can be implemented in the fragment shader to generate random noise values ​​through mathematical functions and calculations. The size and distribution of these noise values ​​are dynamic and can change over time and the state of video playback, thus providing a unique disturbance effect for each pixel.

[0051] The color of each pixel will be superimposed with the disturbance effect according to the noise intensity, and finally a target image with a snowflake effect will be generated. Figure 3 is a comparative diagram showing an implementation effect provided according to an optional embodiment of the present invention, such as Figure 3 As shown in the figure, the image on the left shows the initial image displayed during the video loading process before image processing. Typically, this image can be a static display of the current frame of the video, or a simple loading animation such as a spinning circle or progress bar. The image on the right shows the snow disturbance effect after processing. This effect visually simulates the snow noise that occurs when old TVs receive unstable signals.

[0052] As an optional embodiment, the expression for determining the target color value is as follows:

[0053] final_color=color+(noise+NoiseColor)×strength

[0054] Among them, final_color is the target color value, color is the color value, noise is the disturbance noise value, NoiseColor is the preset color parameter, and strength is the preset strength parameter. The preset color parameter and preset strength parameter are adjusted based on user needs.

[0055] Optionally, noise is a disturbance noise value calculated by a non-uniform noise algorithm. The size and distribution of the noise value are random and can change with the duration of the video loading state, simulating the randomness and dynamics of the snowflake effect. The preset color parameter NoiseColor is used to adjust the color tendency of the snowflake disturbance effect. This is a color value that developers or users can customize, such as white (vec4(1.0,1.0,1.0,1.0)) or gray to change the appearance of the snowflake disturbance effect. The preset intensity parameter strength is used to control the size and impact of the noise disturbance. The larger this value, the more obvious the disturbance of the original color by the noise, and the stronger the snowflake effect.

[0056] As an optional embodiment, the noise function includes Perlin Poisson noise, Simplex noise or Worley cell noise, wherein the noise function includes a preset time parameter, and the preset time parameter is adjusted based on user needs.

[0057] Alternatively, Perlin noise is a continuous, scalable pseudo-random function invented by Ken Perlin in 1985 and originally used for texture synthesis in movie special effects. It is able to generate natural-looking, smoothly transitioning noise patterns. Simplex noise is an improved version of Perlin noise, proposed by Ken Perlin in 2001. It is more memory-efficient and computationally efficient than Perlin noise, especially in high-dimensional spaces. Worley noise, also known as cellular noise, was designed by Steven Worley in 1996. It generates noise patterns based on a series of randomly generated points (cells) and calculates the shortest distance from each point to the pixel. Worley noise can produce more obvious and structured noise effects.

[0058] The preset timing parameters are crucial to the dynamic nature of these noise functions, ensuring that the noise effect changes in real time, synchronizing with the video loading progress and user interactions, thereby providing a more vivid and engaging visual experience. Furthermore, the selection of these noise functions and the adjustment of their timing parameters can be tailored to the user's specific needs and preferences, making the video loading screen more personalized and customized to meet the visual requirements of different application scenarios.

[0059] As an optional embodiment, the initial image is an image corresponding to a pause frame in the initial video.

[0060] Optionally, when a video is loading or paused, the browser or video player will usually display the current video frame still, which is called the "pause frame". This frame becomes the static image that the user sees during the video loading period and can be used as the "initial image". It is the basis for performing the snow disturbance effect. In other words, the snow disturbance effect is not directly applied to a blank screen or a preset loading icon, but is processed based on the frame of the video that is currently paused. In the Vue component, just ` <video>Use the `v-snowy-loading` directive on the `element to automatically show the snowy effect while the video is loading and hide the effect when the video resumes playing.

[0061] As an optional embodiment, obtaining the initial image includes: based on an event listener, detecting the playback status of the initial video, where the playback status includes normal playback and paused playback; when the playback status is paused playback, determining that the image corresponding to the current pause frame is the initial image.

[0062] Optionally, when the initial video is playing normally, the transparency of the canvas container is set to 0 to hide it, and pointer-events is set to none. When the initial video enters the loading state and pauses, the `waiting` event listener detects the pause of the video loading and obtains the current pause frame. The `video.currentTime` property can be used to determine the current loading frame, and then the pixel color information of the frame is passed to the shader through WebGL texture mapping. Use the `gl.texImage2D()` method to ` <video>`'s current frame as a WebGL texture.

[0063] Among them, to get the pause frame of the video, you can use `gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,video)` to map the pause frame data of the video to the WebGL texture. Whenever the video triggers the loading state, sample the current frame, pause the video and render it in WebGL. Use `requestAnimationFrame()` for real-time rendering, and continuously update the noise effect when the video is in the loading state. When the `waiting` event ends, the normal playback state of the video is restored through the `canplay` event, and the rendered ` <canvas>`.

[0064] As an optional embodiment, a method for generating a snowy perturbation effect for video loading frames based on custom instructions is proposed. This method performs pixel-level texture perturbation on paused video frames within a shader pipeline, and uses a non-uniform noise algorithm to simulate dynamic interference with the image content, creating an effect similar to "TV snow," presenting a unique visual experience. This solution leverages the GPU's parallel data stream processing capabilities. By dynamically adjusting timing parameters and noise functions within the fragment shader, the snowy effect evolves synchronously with the video loading progress, ensuring real-time responsiveness. This method aims to enhance user experience and visual appeal while lowering the development barrier, allowing developers to achieve efficient loading effects without writing complex code.

[0065] Specifically, developers use the Vue framework to create a custom directive (for example, `v-snowy-load`) that replaces the traditional loading effect during video loading. This directive is registered using `Vue.directive` and executes initialization logic within the element's `mounted` hook. Within the custom directive, an efficient GPU computing environment is first established, laying the foundation for subsequent image processing and rendering by obtaining the underlying context. The created `canvas` element ensures the same size and position as the target video element, and its hierarchy is set using CSS to overlay the video. During the loading process, a shader is used to extract pixel information from the current video frame to generate a visual effect with snowy disturbances. Specifically, the current video frame is sampled as a texture and passed to the fragment shader, where a noise function is used to generate the disturbance. Within the fragment shader, the color value of each pixel is dynamically calculated and combined with a noise algorithm to generate the snowy disturbance effect. This is then dynamically updated based on a time parameter, making the visual effect more vivid. During implementation, `requestAnimationFrame` is used for frame updates to improve rendering efficiency, ensuring smooth visuals and real-time responsiveness to user interactions.

[0066] By replacing the video loading effect from a simple loading icon or progress bar with a snowflake disturbance effect, users can be provided with a more vivid and engaging visual experience, thereby enhancing the appeal of the website. Utilizing the Vue custom directive mechanism, developers can achieve complex visual effects through simple command calls, reducing the technical requirements for front-end developers and improving development efficiency. By using the GPU for image processing and rendering, and fully utilizing its parallel computing capabilities, the loading effect is smoother, reducing the burden on the CPU, and improving the performance of the overall application. The design of custom directives allows developers to flexibly adjust parameters such as the intensity, color, and transparency of the snowflake effect according to their needs, thereby meeting the visual needs of different scenarios.

[0067] It should be noted that for the aforementioned method embodiments, for simplicity of description, they are all expressed as a series of action combinations. However, those skilled in the art should be aware that the present invention is not limited by the order of the actions described, because according to the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present invention.

[0068] Through the description of the above embodiments, those skilled in the art can clearly understand that the image processing method according to the above embodiment can be implemented by means of software plus the necessary general hardware platform, of course, it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product. The computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for enabling a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods described in each embodiment of the present invention.

[0069] According to an embodiment of the present invention, an image processing device for implementing the above image processing method is also provided. Figure 4 is a structural block diagram of an image processing device provided according to an embodiment of the present invention, such as Figure 4 As shown, the device includes: an acquisition module 41, a generation module 42, an extraction module 43 and a rendering module 44. The device is described below.

[0070] The acquisition module 41 is used to acquire an initial image.

[0071] The generating module 42 is connected to the acquiring module 41 and is used to generate a canvas container matching the initial image based on a preset custom instruction, wherein the custom instruction is characterized as an extended instruction for generating a target effect for the initial image.

[0072] The extraction module 43 is connected to the generation module 42 and is used to extract color values ​​of multiple pixels of the initial image.

[0073] The rendering module 44 is connected to the extraction module 43 and is used to render the initial image on the canvas container based on the color value using a non-uniform noise algorithm to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect.

[0074] It should be noted that the acquisition module 41, generation module 42, extraction module 43, and rendering module 44 described above correspond to steps S201 to S204 in the embodiment. The examples and application scenarios implemented by these modules and corresponding steps are the same, but are not limited to those disclosed in the embodiment. It should be noted that the above modules, as part of the device, can be run in the computer terminal 10 provided in the embodiment.

[0075] An embodiment of the present invention may provide a computer device. Optionally, in this embodiment, the computer device may be located in at least one of a plurality of network devices in a computer network. The computer device includes a memory and a processor.

[0076] Among them, the memory can be used to store software programs and modules, such as the program instructions / modules corresponding to the image processing method and device in the embodiments of the present invention. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory, that is, realizing the above-mentioned image processing method. The memory may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory may further include a memory remotely located relative to the processor, and these remote memories may be connected to the computer terminal via a network. Examples of the above-mentioned network include but are not limited to the Internet, corporate intranet, local area network, mobile communication network and combinations thereof.

[0077] The processor can call the information and application stored in the memory through the transmission device to perform the following steps: obtain an initial image; generate a canvas container that matches the initial image based on preset custom instructions, wherein the custom instructions are represented as extended instructions for generating a target effect for the initial image; extract the color values ​​of multiple pixels of the initial image; based on the color values, render the initial image on the canvas container using a non-uniform noise algorithm to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect.

[0078] An embodiment of the present invention provides an image processing method. The method comprises the following steps: obtaining an initial image; generating a canvas container matching the initial image based on a preset custom instruction, wherein the custom instruction is characterized as an extended instruction for generating a target effect for the initial image; extracting color values ​​of multiple pixels of the initial image; and rendering the initial image on the canvas container using a non-uniform noise algorithm based on the color values ​​to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect. This method achieves the purpose of efficiently rendering the initial image with a snowflake noise disturbance effect on the canvas container, thereby achieving the technical effect of lowering the development threshold and enabling developers to achieve efficient loading effects without having to write complex code. This method further solves the technical problem that current image rendering technology has a high threshold and requires writing complex code.

[0079] A person skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing the hardware related to the terminal device through a program, and the program can be stored in a non-volatile storage medium, which may include: a flash drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0080] The embodiment of the present invention further provides a non-volatile storage medium. Optionally, in this embodiment, the non-volatile storage medium can be used to store the program code executed by the image processing method provided by the embodiment.

[0081] Optionally, in this embodiment, the non-volatile storage medium may be located in any computer terminal in a computer terminal group in a computer network, or in any mobile terminal in a mobile terminal group.

[0082] Optionally, in this embodiment, the non-volatile storage medium is configured to store program code for executing the following steps: obtaining an initial image; generating a canvas container that matches the initial image based on preset custom instructions, wherein the custom instructions represent extended instructions for generating a target effect for the initial image; extracting color values ​​of multiple pixels of the initial image; and rendering the initial image on the canvas container using a non-uniform noise algorithm based on the color values ​​to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect.

[0083] An embodiment of the present invention also provides a computer program product, including a computer program. Optionally, in this embodiment, when the computer program is executed by a processor, it can achieve: obtaining an initial image; generating a canvas container that matches the initial image based on preset custom instructions, wherein the custom instructions are represented as extended instructions for generating a target effect for the initial image; extracting the color values ​​of multiple pixels of the initial image; and rendering the initial image on the canvas container using a non-uniform noise algorithm based on the color values ​​to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect.

[0084] The serial numbers of the above embodiments of the present invention are for description only and do not represent the advantages or disadvantages of the embodiments.

[0085] In the above embodiments of the present invention, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0086] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only exemplary. For example, the division of the units can be a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.

[0087] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the present embodiment.

[0088] In addition, the functional units in the various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0089] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a non-volatile storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, server or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disk or optical disk, and other media that can store program code.

[0090] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present invention. These improvements and modifications should also be regarded as within the scope of protection of the present invention.< / canvas> < / video> < / video> < / canvas> < / canvas> < / video> < / canvas> < / canvas> < / canvas> < / video> < / video>

Claims

1. An image processing method, characterized in that: include: Get the initial image; Based on a preset custom instruction, a canvas container matching the initial image is generated, wherein the custom instruction represents an extended instruction for generating a target effect for the initial image; Extracting color values ​​of multiple pixels of the initial image; Based on the color value, the initial image is rendered on the canvas container using a non-uniform noise algorithm to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect.

2. The method according to claim 1, characterized in that The step of extracting color values ​​of a plurality of pixels of the initial image includes: Determining a texture image of the initial image based on a WebGL (web graphics library), wherein the texture image is a format corresponding to the initial image in the WebGL (web graphics library); Determining, based on a vertex shader, texture coordinates of the texture image in the canvas container, wherein the texture coordinates are used to locate the plurality of pixel points in the texture image; Based on the texture coordinates, color values ​​of the plurality of pixels are extracted through a fragment shader.

3. The method according to claim 1, characterized in that The step of rendering the initial image on the canvas container using a non-uniform noise algorithm based on the color value to obtain a target image includes: generating a disturbance noise value based on a noise function corresponding to the non-uniform noise algorithm; In a fragment shader, the color values ​​of the plurality of pixel points are mixed with the disturbance noise value respectively to obtain target color values ​​of the plurality of pixel points; The target color value is applied to the canvas container to obtain the target image.

4. The method according to claim 3, characterized in that The expression for determining the target color value is as follows: final_color=color+(noise+NoiseColor)×strength Among them, final_color is the target color value, color is the color value, noise is the disturbance noise value, NoiseColor is the preset color parameter, strength is the preset strength parameter, and the preset color parameter and the preset strength parameter are adjusted based on user needs.

5. The method according to claim 3, characterized in that The noise function includes Perlin Poisson noise, Simplex noise or Worley cell noise, wherein the noise function includes a preset time parameter, and the preset time parameter is adjusted based on user needs.

6. The method according to any one of claims 1 to 5, characterized in that The initial image is an image corresponding to a pause frame in the initial video.

7. The method according to claim 6, characterized in that The obtaining of the initial image comprises: Based on the event listener, detecting the playback state of the initial video, wherein the playback state includes normal playback and paused playback; When the playing state is paused, the image corresponding to the current pause frame is determined to be the initial image.

8. An image processing device, characterized in that: include: An acquisition module, used for acquiring an initial image; A generating module, configured to generate a canvas container matching the initial image based on a preset custom instruction, wherein the custom instruction represents an extended instruction for generating a target effect for the initial image; An extraction module, configured to extract color values ​​of a plurality of pixels of the initial image; A rendering module is used to render the initial image on the canvas container using a non-uniform noise algorithm based on the color value to obtain a target image, wherein the target image is an image with a snowflake noise disturbance effect.

9. A non-volatile storage medium, characterized in that: The non-volatile storage medium includes a stored program, wherein when the program is executed, the device where the non-volatile storage medium is located is controlled to execute the image processing method according to any one of claims 1 to 7.

10. A computer device, characterized in that: include: memory and processor, The memory stores a computer program; The processor is configured to execute a computer program stored in the memory, and when the computer program is run, the processor is enabled to execute the image processing method according to any one of claims 1 to 7.

Images