Dynamic graph conversion method and device, electronic equipment and computer readable storage medium

Abstract

The embodiment of the invention discloses a motion graph conversion method and device, electronic equipment and a computer readable storage medium, and the method is applied to a webpage and comprises the steps that a bitmap motion graph is obtained; in response to triggering a dynamic graph conversion control of the webpage, converting the bitmap dynamic graph into a multi-frame static graph; drawing a plurality of canvas elements according to the plurality of frames of static graphs; creating a plurality of vector frame files according to the plurality of canvas elements; and generating a vector motion graph according to the plurality of vector frame files. In this way, according to the scheme, the bitmap dynamic graph can be converted into the vector dynamic graph through the webpage.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of image processing technology, and specifically to a method, device, electronic device and computer-readable storage medium for converting a moving image. Background Art

[0002] A bitmap is composed of points called pixels. Enlarging a bitmap is achieved by enlarging each pixel, so the bitmap will be distorted when enlarged. A vector image is a graphic drawn based on geometric characteristics. The image file of a vector image contains independent separate images that can be freely and unlimitedly recombined. A vector image will not be distorted after being enlarged.

[0003] The animated graphics used in web pages need to maintain high-quality display under different devices and resolutions. Most animated graphics are bitmap graphics, which have distortion problems. If vector animated graphics are redesigned, the workload is large and the efficiency is low. In the related art, the conversion of bitmap animated graphics into vector animated graphics usually relies on third-party software, which has high operating costs. Summary of the invention

[0004] The embodiments of the present application provide a method, device, electronic device and computer-readable storage medium for converting a dynamic image, which can convert a bitmap dynamic image into a vector dynamic image using a web page.

[0005] In a first aspect, an embodiment of the present application provides a method for converting a moving picture, which is applied to a web page, comprising:

[0006] Get the bitmap animation;

[0007] In response to triggering a dynamic image conversion control of the webpage, converting the bitmap dynamic image into a plurality of static images;

[0008] Draw multiple canvas elements according to the multiple frames of static images;

[0009] Creating a plurality of vector frame files according to the plurality of canvas elements; and

[0010] A vector animation is generated according to the plurality of vector frame files.

[0011] In one embodiment, converting the bitmap dynamic image into a multi-frame static image includes:

[0012] Converting the bitmap animation into binary large object data;

[0013] Using a file reader, the binary large object data is read into a Base64 format image file;

[0014] Extracting multiple frame files of the bitmap animation from the Base64 format image file;

[0015] Convert the multiple frame files of the bitmap dynamic image into multiple frames of the static image.

[0016] In one embodiment, drawing a plurality of canvas elements according to the plurality of frames of the static image comprises:

[0017] Obtaining relative position information of each frame of the static image in the bitmap dynamic image, and obtaining pixel information of each frame of the static image;

[0018] Creating an initial canvas element corresponding to the static image according to the size of each frame of the static image and the relative position information;

[0019] According to the pixel information of each frame of the static image, the initial canvas element corresponding to the static image is drawn to obtain a plurality of the canvas elements.

[0020] In one embodiment, creating a plurality of vector frame files according to a plurality of the canvas elements comprises:

[0021] Creating a plurality of vector graphics elements according to the plurality of canvas elements, wherein the sizes of the vector graphics elements are consistent with the sizes of the canvas elements;

[0022] Screening out completely transparent pixels in the canvas element to obtain target pixels;

[0023] Creating a plurality of vector rectangle elements according to the color value of the target pixel in the canvas element;

[0024] Adding a plurality of the vector rectangle elements to the vector image element, to obtain a plurality of the vector frame files.

[0025] In one embodiment, generating a vector animation according to the plurality of vector frame files comprises:

[0026] adding a plurality of the vector frame files into a container;

[0027] The vector animation is generated according to the plurality of vector frame files in the container by adopting a polling method.

[0028] In one embodiment, obtaining a bitmap animation includes:

[0029] In response to triggering the animated image upload control of the webpage, the locally uploaded bitmap animated image is obtained.

[0030] In one embodiment, after generating the vector animation, the method further includes:

[0031] Displaying the vector animation on the webpage; and / or

[0032] A download control for the vector animation is displayed on the web page.

[0033] In a second aspect, an embodiment of the present application provides a dynamic image conversion device, which is applied to a web page, including:

[0034] The acquisition module is used to obtain the bitmap animation;

[0035] A conversion module, configured to convert the bitmap dynamic image into multiple frames of static images in response to triggering a dynamic image conversion control of the webpage;

[0036] A drawing module, used for drawing a plurality of canvas elements according to the plurality of frames of the static images;

[0037] A creation module, used for creating a plurality of vector frame files according to a plurality of the canvas elements;

[0038] A generating module is used to generate a vector animation according to the plurality of vector frame files.

[0039] In one embodiment, the conversion module includes:

[0040] A conversion unit, used for converting the bitmap dynamic image into binary large object data;

[0041] A reading unit, used for reading the binary large object data into a Base64 format image file using a file reader;

[0042] An extraction unit, used for extracting a plurality of frame files of the bitmap dynamic image from the Base64 format image file;

[0043] The static image conversion unit is used to convert the multiple frame files of the bitmap dynamic image into multiple frames of the static image.

[0044] In one embodiment, the drawing module includes:

[0045] An information acquisition unit, used to acquire relative position information of each frame of the static image in the bitmap dynamic image, and to acquire pixel information of each frame of the static image;

[0046] A canvas element creation unit, used to create an initial canvas element corresponding to the static image according to the size of each frame of the static image and the relative position information;

[0047] The drawing unit is used to draw the initial canvas element corresponding to the static image according to the pixel information of each frame of the static image to obtain a plurality of the canvas elements.

[0048] In one embodiment, the creation module includes:

[0049] A vector graphics element creation unit, used to create a plurality of vector graphics elements according to the plurality of canvas elements, wherein the size of the vector graphics elements is consistent with the size of the canvas elements;

[0050] A screening unit, used for screening out completely transparent pixels in the canvas element to obtain target pixels;

[0051] A rectangle element creation unit, used for creating a plurality of vector rectangle elements according to the color value of the target pixel in the canvas element;

[0052] The adding unit is used to add a plurality of the vector rectangular elements to the vector image element to obtain a plurality of the vector frame files.

[0053] In one embodiment, the generating module comprises:

[0054] A file adding unit, used for adding a plurality of the vector frame files into a container;

[0055] The dynamic image generation unit is used to generate the vector dynamic image according to the multiple vector frame files in the container by adopting a polling method.

[0056] In one embodiment, the acquisition module includes:

[0057] The uploading unit is used to obtain the bitmap dynamic image uploaded locally in response to triggering the dynamic image upload control of the webpage.

[0058] In one of the embodiments, after generating the vector animation, the device further comprises:

[0059] A first display module is used to display the vector animation on the web page; and / or

[0060] The second display module is used to display the download control of the vector animation on the web page.

[0061] In a third aspect, an embodiment of the present application further provides an electronic device, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program implements the steps in the above-mentioned dynamic image conversion method when executed by the processor.

[0062] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps in the above-mentioned dynamic image conversion method are implemented.

[0063] In a fifth aspect, the embodiments of the present application further provide a computer program product or a computer program, which includes a computer instruction stored in a computer-readable storage medium. The processor of the computer device reads the computer instruction from the computer-readable storage medium, and the processor executes the computer instruction, so that the computer device executes the method provided in various optional implementations described in the embodiments of the present application.

[0064] In summary, in the embodiment of the present application, a web page can directly obtain a bitmap animated image; in response to triggering the animated image conversion control of the web page, the bitmap animated image is converted into multiple frames of static images; multiple canvas elements are drawn according to the multiple frames of the static images; multiple vector frame files are created according to the multiple canvas elements; and vector animated images are generated according to the multiple vector frame files. In this way, a web page can directly convert a bitmap animated image into a vector animated image without relying on third-party software, which is simple to operate and low in cost. BRIEF DESCRIPTION OF THE DRAWINGS

[0065] In order to more clearly illustrate the technical solutions in the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0066] Figure 1 It is a schematic diagram of the steps of a method for converting a moving picture provided by an embodiment of the present application;

[0067] Figure 2 is a structural schematic diagram of a dynamic image conversion device provided by an embodiment of the present application;

[0068] Figure 3 It is a schematic diagram of the structure of an electronic device provided in one embodiment of the present application. DETAILED DESCRIPTION

[0069] The following will be combined with the drawings in this application to clearly and completely describe the technical solutions in this application. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. Based on the embodiments in the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0070] In one embodiment, Figure 1 As shown, a method for converting an animated image is provided. Although a logical order is shown in the step diagram, in some cases, the steps shown or described may be performed in an order different from that shown in the figure. Specifically, the method for converting an animated image may be applied to a web page.

[0071] It should be noted that the order of description of the following embodiments is not intended to limit the priority order of the embodiments.

[0072] according to Figure 1 The method for converting a moving picture shown in the figure comprises at least steps S110 to S150, which are described in detail as follows:

[0073] In step S110, a bitmap animation is obtained.

[0074] Bitmap is also called dot matrix image, pixel map or raster image. Bitmap is composed of many pixels arranged neatly. Each pixel carries specific color information, and these pixels are arranged to form a complete image. Bitmap is closely related to resolution. When the bitmap image is enlarged, the pixels will be enlarged accordingly, the image will gradually have jagged edges, and the details will become blurred, because its essence relies on a fixed number of pixels to reflect the picture effect.

[0075] Bitmap animation is an animation based on bitmaps. It is a form of image expression that uses the human eye's visual persistence to present dynamic visual effects by quickly switching and playing multiple consecutive bitmaps in a specific order and time interval. Bitmap animations include but are not limited to: GIF animations and APNG animations.

[0076] In the field of web design, animated images are often used to create website loading animations, dynamic switching effects of navigation bars, etc., attracting users' attention and improving user experience through dynamic elements.

[0077] Web pages can obtain bitmap animations from local or server.

[0078] In one embodiment, when developing a web page, React.js (an open source JavaScript library for building user interfaces) is used to divide the page into two DOM (Document Object Model) areas. One DOM area is used to display a GIF upload control and a material list of bitmap GIFs, and the other DOM area is used to display an operation control for the bitmap GIFs in the material list, and to display a list of vector GIFs obtained after conversion, and to provide a download control for the vector GIFs.

[0079] In one embodiment, the acquiring of the bitmap dynamic image may include: in response to triggering a dynamic image upload control of the webpage, acquiring the bitmap dynamic image uploaded locally. In this way, the bitmap dynamic image may be acquired locally.

[0080] The animated image upload control may be an input button for uploading a bitmap animated image, and the animated image upload control may be triggered by clicking the input button. In response to the animated image upload control in the webpage being triggered, a local file selector is opened using JavaScript (a high-level programming language widely used in webpage development), and in response to one or more bitmap animated images selected by the user in the local file selector, the bitmap animated images are uploaded to the webpage.

[0081] In the material list of bitmap animations on the webpage, one or more bitmap animations selected by the local file selector are displayed. When there are multiple bitmap animations, the display order of the multiple bitmap animations can be determined according to the order in which the bitmap animations are selected by the local file selector, or according to the names of the bitmap animations.

[0082] In step S120, in response to triggering the dynamic image conversion control of the webpage, the bitmap dynamic image is converted into multiple frames of static images.

[0083] The operation controls of the bitmap animation may include an animation conversion control. In response to triggering the animation conversion control, each bitmap animation in the material list of the bitmap animation can be converted into a vector animation; or, a target bitmap animation in the material list of the bitmap animation can be selected, and the animation conversion control can be triggered to convert the target bitmap animation into a vector animation.

[0084] In order to convert the bitmap animation into a vector animation, the bitmap animation is first converted into a multi-frame static image. In response to triggering the animation conversion control, JavaScript is used to store the link of the bitmap animation into an array. The links of the bitmap animation in the array are traversed, and the fetch method of native JavaScript (a tool for obtaining resources on the Internet) is used to obtain the bitmap animation corresponding to each link, and the bitmap animation is converted into a multi-frame static image.

[0085] In one embodiment, an online conversion tool can be used to quickly convert a bitmap dynamic image into a multi-frame static image. For example, the GIF decomposition function of GIF Chinese website can quickly split a GIF dynamic image into a multi-frame static image and provide a static image download function.

[0086] In one embodiment, a corresponding library or module can be used to convert a bitmap dynamic image into a multi-frame static image. For example, in Python, the Pillow library (an image processing library) can be used to read the dynamic image and decompose it into a static image.

[0087] In one embodiment, converting the bitmap dynamic image into multiple frames of static images may include: converting the bitmap dynamic image into binary large object data; using a file reader to read the binary large object data as a Base64 format image file; extracting multiple frame files of the bitmap dynamic image from the Base64 format image file; and converting the multiple frame files of the bitmap dynamic image into multiple frames of static images.

[0088] When using the fetch method to obtain the bitmap animation corresponding to each link, the bitmap animation can be directly converted into binary large object data (Blob). Using the file reader, the binary large object can be read as a Base64 format image file.

[0089] You can call the GIF.js library (an open source library for creating and processing GIF animations) to extract each frame of the bitmap animation from the Base64 format image file. Alternatively, you can use gif.load() to extract multiple frame files of the bitmap animation from the Base64 format image file. Among them, gif.load() is used to load existing animation data and parse it into an internal format that the GIF.js library can operate on, so as to facilitate various subsequent processing of the animation, such as obtaining its frame information, modifying frame properties, or re-saving.

[0090] By traversing each frame file corresponding to each bitmap animation, multiple frame files are converted into multiple frame static images using const img = new Image() and img.src = frame.getImageDataURL(). Among them, const img = new Image() is used to create a new Image (image) object; img.src = frame.getImageDataURL() represents calling the getImageDataURL method of the frame object to obtain the URL representation of the image data, and assigning the obtained URL to the properties of the previously created Image object, so that the Image object can load the image resource corresponding to the URL, and finally obtain a static image.

[0091] In this way, the bitmap animation can be converted into multiple frames of static images, and the code used in the embodiments of the present application facilitates dynamic operation of images in web pages.

[0092] In step S130, a plurality of canvas elements are drawn according to the plurality of frames of the static image.

[0093] According to each static image frame, multiple canvas elements can be drawn on canvas. Canvas is an HTML element used for drawing on web pages through JavaScript. Canvas provides a blank "canvas" area. Developers can use JavaScript code to draw various graphics, images, and text on this canvas. They can also achieve animation effects and perform complex data visualization and other operations. It is essentially an interface for graphics drawing and display in web page development.

[0094] Each frame of static image corresponds to a canvas element. Get the pixel information in the static image, and draw the canvas element on the canvas according to each pixel information.

[0095] In step S140, a plurality of vector frame files are created according to the plurality of canvas elements.

[0096] A vector frame file can be created based on each canvas element. The graphics information drawn on the canvas can be extracted using a JavaScript library, and the corresponding XML code content can be generated according to the specifications of the vector graphics format, and then the code content can be saved as a vector frame file.

[0097] In step S150, a vector animation is generated according to the plurality of vector frame files.

[0098] A plurality of vector frames are generated according to the plurality of vector frame files, and the plurality of vector frames are combined to generate a vector animation according to the order of the corresponding plurality of static frames in the bitmap animation.

[0099] Vector graphics use geometric elements such as points, lines, curves, polygons, and corresponding mathematical formulas to define the shape, position, color, and other information of graphics. For example, a circle can be accurately represented by the coordinates of the center (x, y) and the radius r. The computer can draw the corresponding graphics on the display device based on these mathematical descriptions, and no matter how many times it is enlarged or reduced, the graphics can remain clear because vector graphics generate images based on mathematical rules, and there is no blurring of pixels or jaggedness.

[0100] Vector animations are animations based on vector graphics. Appropriate animations include but are not limited to: SVG (Scalable Vector Graphics, scalable vector graphics) animations, AI (Adobe Illustrator, a native file format) format animations, EPS (Encapsulated PostScript, a file format) format animations and CDR (CorelDRAW, a dedicated file format) format animations.

[0101] By adopting the technical solution of the embodiment of the present application, a web page can directly obtain a bitmap animated image; in response to triggering the animated image conversion control of the web page, the bitmap animated image is converted into a plurality of frames of static images; multiple canvas elements are drawn according to the plurality of frames of the static images; multiple vector frame files are created according to the plurality of canvas elements; and vector animated images are generated according to the plurality of vector frame files. In this way, a web page can directly convert a bitmap animated image into a vector animated image without relying on third-party software, and the operation is simple and the cost is low.

[0102] Based on the above technical solution, as an embodiment, after generating the vector animation, the method further includes: displaying the vector animation on the web page; and / or displaying a download control for the vector animation on the web page.

[0103] After the vector animation is generated, the vector animation can be displayed in the DOM area of ​​the web page. When multiple bitmap animations are converted, multiple vector animations are generated accordingly. Multiple vector animations can be arranged and displayed in a list, and the display order of the multiple vector animations can be the display order of the bitmap animations corresponding to each vector animation.

[0104] After the vector animation is generated, a download control for the vector animation can be displayed on the web page. In response to triggering the download control for the vector animation, an option for the vector animation can be provided, and in response to the selected target vector animation, the target vector animation is downloaded and saved locally.

[0105] Optionally, after the vector animation is generated, a vector animation upload control may be displayed on the web page. In response to triggering the vector animation upload control, vector animation options may be provided, and in response to the selected target vector animation, the target vector animation may be uploaded to the server.

[0106] By adopting the technical solution of the embodiment of the present application, the vector animation can be displayed, so that the user can clearly see the display effect of the vector animation. The download control and / or upload control of the vector animation is provided, and the vector animation can be saved locally and / or on a server, so that the generated vector animation can be reused in subsequent processing.

[0107] On the basis of the above technical solution, as an embodiment, drawing multiple canvas elements according to multiple frames of the static image may include: obtaining the relative position information of each frame of the static image in the bitmap animation, and obtaining the pixel information of each frame of the static image; creating an initial canvas element corresponding to the static image according to the size of each frame of the static image and the relative position information; drawing the initial canvas element corresponding to the static image according to the pixel information of each frame of the static image to obtain multiple canvas elements.

[0108] The information of the static image can be extracted through gif.on(), which includes the relative position information of the static image in the bitmap animation and the pixel information of the static image.

[0109] In a bitmap animation, each static image frame has its specific relative position in the entire animation. The relative position can be described by coordinates. The upper left corner of the animation can be used as the coordinate origin (0,0). The coordinate value of the upper left corner vertex of each static image frame relative to this origin is its relative position information. For example, if the coordinates of the upper left corner vertex of a static image frame are (100,200), it means that it is 100 units horizontally away from the left edge of the animation and 200 units vertically away from the upper edge of the animation.

[0110] Optionally, the file format specification of the animated image records the position information such as the offset of each frame, and the relative position of each static image frame can be determined by parsing the position information such as the offset of each frame. For example, the JavaScript library provides an interface for accessing the animated image frame data structure, based on which the attribute value representing the position can be extracted to obtain the relative position information of each static image frame in the bitmap animated image.

[0111] The pixel information of each static image frame contains the color data and transparency information of each pixel in the static image frame. The color data includes the specific values ​​of the three color channels of red, green, and blue corresponding to the pixel. The combination of these values ​​determines the color effect presented by the pixel. The transparency information is used to indicate the degree of transparency of the pixel.

[0112] The size of each static image can be obtained. The size of the initial canvas element must match the size of the corresponding static image so that the content of the static image can be fully accommodated and displayed. For example, if the size of the static image is 400 pixels wide and 300 pixels high, the size of the canvas element is 400 pixels wide and 300 pixels high, ensuring that the image content will not be cropped because the canvas is too small, and there will be no extra blank area because the canvas is too large.

[0113] Optionally, when determining the initial canvas element size, in addition to directly using the same size as the static image, it may also be necessary to adjust the size according to the actual application scenario. In web development, if you want the canvas element size to be automatically adjusted according to the proportion of the page layout, you can convert the pixel size into a relative unit (such as a percentage), but this must be done under the premise of ensuring that the image will not be over-stretched or compressed to cause distortion, and try to keep the original aspect ratio of the image unchanged.

[0114] The placement of the initial canvas element in the entire display space is determined based on the relative position information of each static image frame in the bitmap animation. For example, if the relative position coordinates of a static image frame are (50,80), it means that the corresponding initial canvas element should be placed 50 units horizontally from the left edge of the display space and 80 units vertically from the top edge, so that the position relationship of each canvas element is consistent with the position relationship of the static image corresponding to them in the bitmap animation, presenting a layout effect similar to the original bitmap animation.

[0115] In web development, you can <canvas>Tag to create the initial canvas element, for example you can use <canvas id＝"canvas1"width＝"400"height＝"300">< / canvas> This code structure creates a canvas element with a specific width, height, and flags.

[0116] Optionally, you can draw a canvas element via ctx.drawImage(img,frame.left,frame.top,frame.width,frame.height).

[0117] In a web page, you can use JavaScript code to perform image drawing and other tasks, or in other graphics processing environments, bind the canvas object with corresponding brushes, color management and other tools to prepare for the subsequent drawing of static image content.

[0118] Restore the pixel information of the static image to the canvas element. According to the color mode in the pixel information of each frame of the static image, the color setting of the drawing tool should be adjusted accordingly before drawing to ensure that the color of the drawn image is consistent with the static image. Figure 1 According to the pixel information of each static image frame, the color value of each pixel of each static image frame is traversed in a loop to obtain the position of each pixel in the matrix and its corresponding color data. For each traversed pixel, the initial canvas element is drawn according to its coordinate position and color value using a drawing tool to obtain a drawn canvas element.

[0119] By adopting the technical solution of the embodiment of the present application, the information of each static image frame can be obtained, and the initial canvas element can be created according to the information of each static image frame, and the initial canvas element can be drawn to obtain the canvas element. The animation composed of each frame generated according to the canvas element conforms to the relative position of each static image frame in the bitmap animation. Therefore, the animation generated according to each canvas element can well restore the information of the bitmap animation.

[0120] On the basis of the above technical solution, as an embodiment, creating multiple vector frame files according to multiple canvas elements may include: creating multiple vector image elements according to multiple canvas elements, the size of the vector image elements being consistent with the size of the canvas elements; filtering out completely transparent pixels in the canvas elements to obtain target pixels; creating multiple vector rectangular elements according to the color values ​​of the target pixels in the canvas elements; and adding multiple vector rectangular elements to the vector image elements to obtain multiple vector frame files.

[0121] You can use the getImageData method in the JavaScript library to get the pixel data on the canvas element. For each canvas element, create a vector element whose size is consistent with the size of the canvas element. After filtering out the completely transparent pixels in the canvas element, use the remaining target pixels (i.e., opaque or semi-transparent pixels) to create corresponding vector rectangle elements, and then add these vector rectangle elements to the vector element whose size matches it, finally forming multiple vector frame files.

[0122] Based on the getImageData method, the values ​​of the red, green, and blue color channels and the transparency value of each pixel in the canvas element can be obtained in turn. The transparency value of each pixel is looped through. When the transparency value indicates that the pixel is completely transparent, the pixel is skipped in the subsequent process of creating vector graphics and is not processed. The opaque or semi-transparent pixel is determined as the target pixel, and the corresponding vector rectangle element is created based on the target.

[0123] For each determined target pixel, the position attribute of the vector rectangle element needs to be set according to the coordinate position of the target pixel on the canvas. The pixel coordinates are directly used as the coordinate position of the rectangle element in the vector element, so that the vector rectangle element can accurately correspond to the position of the pixel on the canvas, ensuring that the converted vector graphics are consistent with the canvas pixel layout in position.

[0124] The fill color of the rectangle is set according to the RGBA value of the pixel, and the values ​​of the red, green, and blue color channels of the obtained pixel are set as the fill color of the rectangle, so that the rectangle presents the same color effect as the original pixel.

[0125] Add the created vector rectangle elements to the vector element, and place each rectangle element in order according to its corresponding position inside the vector element through DOM operations in JavaScript or following the vector element nesting rules, so that many vector rectangle elements are combined to form a complete vector frame file.

[0126] By adopting the technical solution of the embodiment of the present application, a vector rectangular element is created based on the pixel data of the canvas element, and the conversion can be performed very accurately according to the actual presentation of the image on the canvas, and the opaque or semi-transparent pixels are represented by vectors, which retains the details and features of the original image to the greatest extent. By skipping completely transparent pixels, resources can be saved.

[0127] Optionally, the canvas elements may be converted into vector frame files using a bitmap-to-vector tool (such as Adobe Illustrator).

[0128] Based on the above technical solution, as an embodiment, generating a vector animation according to the multiple vector frame files may include: adding the multiple vector frame files to a container; and using a polling method to generate the vector animation according to the multiple vector frame files in the container.

[0129] Optionally, call the svg.js library, add the generated vector frame file to the svg.js container, combine the information of each static image, call the polling method in svg.js, and generate a vector animation.

[0130] The container is used to organize and manage multiple vector frame files. It collects each independent vector frame file so that these frame files can be processed in a certain order and according to certain rules to construct a coherent vector animation.

[0131] The svg.js library is a library for operating SVG in the JavaScript environment. It provides a convenient application programming interface to create, modify and manage SVG elements and related objects. Using the svg.js library to process vector frame files can be well integrated with JavaScript code and is suitable for generating vector animations in scenarios such as web development.

[0132] The polling method is a mechanism that traverses and processes each vector frame file in the container periodically in a certain order. The purpose is to display each vector frame file in turn and control the display duration of each frame, the switching frequency and other factors, so as to make these static vector frame files coherent and form a dynamic animation effect visually.

[0133] Each vector frame file corresponds to a static image. The order and time interval of each vector frame in the vector animation should be consistent with the order and time interval of the static image in the bitmap animation. Set the display rules of the vector frame according to the order and time interval of the static image in the bitmap animation. The svg.js library calls the polling method in svg.js according to the display rules of the vector frame, displays the vector frame files in the container in turn, and finally generates a vector animation.

[0134] By adopting the technical solution of the embodiment of the present application, a JavaScript library can be used to generate a vector animation based on a vector frame file, thereby realizing the conversion of a bitmap animation into a vector animation on a web page, which has the advantage of being simple and convenient.

[0135] Optionally, CSS animation can be used to generate vector animations based on vector frame files. <svg>The element is embedded into the web document, and then CSS classes are defined to control the frame display, ultimately achieving the display effect of vector animation.

[0136] In order to better implement the dynamic image conversion method of the present application, the present application also provides a dynamic image conversion device based on the above dynamic image conversion method. The meanings of the terms are the same as those in the above dynamic image conversion method, and the specific implementation details can refer to the description in the method embodiment.

[0137] See also Figure 2 , Figure 2 : is a structural schematic diagram of a dynamic image conversion device provided in an embodiment of the present application, wherein the dynamic image conversion device is applied to a web page, and the dynamic image conversion device includes:

[0138] The acquisition module 201 is used to acquire a bitmap animation;

[0139] A conversion module 202, configured to convert the bitmap dynamic image into multiple frames of static images in response to triggering a dynamic image conversion control of the webpage;

[0140] A drawing module 203, used for drawing a plurality of canvas elements according to the plurality of frames of the static image;

[0141] A creation module 204, used for creating a plurality of vector frame files according to the plurality of canvas elements;

[0142] The generating module 205 is used to generate a vector animation according to the plurality of vector frame files.

[0143] In one embodiment, the conversion module 202 includes:

[0144] A conversion unit, used for converting the bitmap dynamic image into binary large object data;

[0145] A reading unit, used for reading the binary large object data into a Base64 format image file using a file reader;

[0146] An extraction unit, used for extracting a plurality of frame files of the bitmap dynamic image from the Base64 format image file;

[0147] The static image conversion unit is used to convert the multiple frame files of the bitmap dynamic image into multiple frames of the static image.

[0148] In one embodiment, the drawing module 203 includes:

[0149] An information acquisition unit, used to acquire relative position information of each frame of the static image in the bitmap dynamic image, and to acquire pixel information of each frame of the static image;

[0150] A canvas element creation unit, used to create an initial canvas element corresponding to the static image according to the size of each frame of the static image and the relative position information;

[0151] The drawing unit is used to draw the initial canvas element corresponding to the static image according to the pixel information of each frame of the static image to obtain a plurality of the canvas elements.

[0152] In one embodiment, the creation module 204 includes:

[0153] A vector graphics element creation unit, used to create a plurality of vector graphics elements according to the plurality of canvas elements, wherein the size of the vector graphics elements is consistent with the size of the canvas elements;

[0154] A screening unit, used for screening out completely transparent pixels in the canvas element to obtain target pixels;

[0155] A rectangle element creation unit, used for creating a plurality of vector rectangle elements according to the color value of the target pixel in the canvas element;

[0156] The adding unit is used to add a plurality of the vector rectangular elements to the vector image element to obtain a plurality of the vector frame files.

[0157] In one embodiment, the generating module 205 includes:

[0158] A file adding unit, used for adding a plurality of the vector frame files into a container;

[0159] The dynamic image generation unit is used to generate the vector dynamic image according to the multiple vector frame files in the container by adopting a polling method.

[0160] In one embodiment, the acquisition module 201 includes:

[0161] The uploading unit is used to obtain the bitmap dynamic image uploaded locally in response to triggering the dynamic image upload control of the webpage.

[0162] In one of the embodiments, after generating the vector animation, the device further comprises:

[0163] A first display module is used to display the vector animation on the web page; and / or

[0164] The second display module is used to display the download control of the vector animation on the web page.

[0165] By adopting the technical solution of the embodiment of the present application, a web page can directly obtain a bitmap animated image; in response to triggering the animated image conversion control of the web page, the bitmap animated image is converted into a plurality of frames of static images; multiple canvas elements are drawn according to the plurality of frames of the static images; multiple vector frame files are created according to the plurality of canvas elements; and vector animated images are generated according to the plurality of vector frame files. In this way, a web page can directly convert a bitmap animated image into a vector animated image without relying on third-party software, and the operation is simple and the cost is low.

[0166] For the specific definition of the dynamic image conversion device, please refer to the definition of the dynamic image conversion method above, which will not be repeated here. The various modules in the above-mentioned dynamic image conversion device can be implemented in whole or in part by software, hardware and a combination thereof. The above-mentioned modules can be embedded in or independent of the processor in the computer device in the form of hardware, or can be stored in the memory of the computer device in the form of software, so that the processor can call and execute the operations corresponding to the above modules.

[0167] In addition, the present application also provides an electronic device, such as Figure 3 As shown, it shows a schematic diagram of the structure of the electronic device involved in this application, specifically:

[0168] The electronic device may include one or more processors 301 of processing cores and one or more computer-readable storage media memories 302 and other components. Those skilled in the art will appreciate that Figure 3 The electronic device structure shown in the figure does not constitute a limitation on the electronic device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0169] The processor 301 is the control center of the electronic device. It uses various interfaces and lines to connect various parts of the entire electronic device. By running or executing software programs and / or modules stored in the memory 302, and calling data stored in the memory 302, it executes various functions of the electronic device and processes data, thereby monitoring the electronic device as a whole. Optionally, the processor 301 may include one or more processing cores; preferably, the processor 301 may integrate an application processor and a modem processor, wherein the application processor mainly processes the operating system, user interface, and application programs, and the modem processor mainly processes wireless communications. It is understandable that the above-mentioned modem processor may not be integrated into the processor 301.

[0170] The memory 302 can be used to store software programs and modules. The processor 301 executes various functional applications and data processing by running the software programs and modules stored in the memory 302. The memory 302 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 302 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage devices. Accordingly, the memory 302 may also include a memory controller to provide the processor 301 with access to the memory 302.

[0171] In one embodiment, the electronic device further includes a power supply 303 for supplying power to various components. Preferably, the power supply 303 can be logically connected to the processor 301 through a power management system, so as to manage charging, discharging, and power consumption through the power management system. The power supply 303 can also include any components such as one or more DC or AC power supplies, recharging systems, power supply device debugging circuits, power converters or inverters, and power status indicators.

[0172] In one embodiment, the electronic device may further include an input unit 304, which may be used to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal input related to user settings and function control.

[0173] Although not shown, the electronic device may further include a display unit, etc., which will not be described in detail herein. Specifically in this embodiment, the processor 301 in the electronic device will load the executable files corresponding to the processes of one or more application programs into the memory 302 according to the following instructions, and the processor 301 will run the application programs stored in the memory 302, thereby implementing the steps in any one of the dynamic image conversion methods provided in the embodiments of the present application.

[0174] Those skilled in the art will understand that Figure 3 The structure shown in the figure is merely a block diagram of a partial structure related to the scheme of the present application, and does not constitute a limitation on the electronic device to which the scheme of the present application is applied. The specific electronic device may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.

[0175] In one embodiment, an electronic device is provided, including a memory and a processor, wherein a computer program is stored in the memory, and when the processor executes the computer program, the method described in any embodiment of the present application is implemented.

[0176] In one embodiment, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the method described in any embodiment of the present application is implemented.

[0177] In some embodiments, a computer program product is also proposed, including a computer program or instructions, which implement the method described in any embodiment of the present application when executed by a processor.

[0178] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0179] A person of ordinary skill in the art will appreciate that all or part of the steps in the various methods of the above embodiments may be completed by instructions, or by controlling related hardware through instructions. The instructions may be stored in a computer-readable storage medium and loaded and executed by a processor.

[0180] To this end, the present application provides a computer-readable storage medium, on which a computer program is stored. The computer program can be loaded by a processor to execute the steps in any one of the dynamic image conversion methods provided in the present application.

[0181] The specific implementation of the above operations can be found in the previous embodiments, which will not be described in detail here.

[0182] The computer-readable storage medium may include: a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.

[0183] Since the instructions stored in the computer-readable storage medium can execute the steps in any one of the dynamic image conversion methods provided in the present application, the beneficial effects that can be achieved by any one of the dynamic image conversion methods provided in the present application can be achieved. Please refer to the previous embodiments for details and will not be repeated here.

[0184] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or terminal device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or terminal device. In the absence of further restrictions, the elements defined by the sentence "including a..." do not exclude the existence of other identical elements in the process, method, article or terminal device including the elements.

[0185] The above is a detailed introduction to a method, device, electronic device and computer-readable storage medium for converting animated images provided by the present application. Specific examples are used herein to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation methods and application scopes. In summary, the content of this specification should not be understood as a limitation on the present invention.< / svg> < / canvas>

Claims

1. A method for converting a moving picture, characterized in that: Applied to web pages, including: Get the bitmap animation; In response to triggering a dynamic image conversion control of the webpage, converting the bitmap dynamic image into a plurality of static images; Draw multiple canvas elements according to the multiple frames of static images; Creating a plurality of vector frame files according to the plurality of canvas elements; and A vector animation is generated according to the plurality of vector frame files.

2. The method according to claim 1, characterized in that: The step of converting the bitmap dynamic image into a plurality of static images comprises: Converting the bitmap animation into binary large object data; Using a file reader, the binary large object data is read into a Base64 format image file; Extracting multiple frame files of the bitmap animation from the Base64 format image file; Convert the multiple frame files of the bitmap dynamic image into multiple frames of the static image.

3. The method according to claim 1, characterized in that: Drawing a plurality of canvas elements according to the plurality of frames of the static images comprises: Obtaining relative position information of each frame of the static image in the bitmap dynamic image, and obtaining pixel information of each frame of the static image; Creating an initial canvas element corresponding to the static image according to the size of each frame of the static image and the relative position information; According to the pixel information of each frame of the static image, the initial canvas element corresponding to the static image is drawn to obtain a plurality of the canvas elements.

4. The method according to claim 1, characterized in that: The step of creating a plurality of vector frame files according to the plurality of canvas elements comprises: Creating a plurality of vector graphics elements according to the plurality of canvas elements, wherein the sizes of the vector graphics elements are consistent with the sizes of the canvas elements; Screening out completely transparent pixels in the canvas element to obtain target pixels; Creating a plurality of vector rectangle elements according to the color value of the target pixel in the canvas element; Adding a plurality of the vector rectangle elements to the vector image element, to obtain a plurality of the vector frame files.

5. The method according to claim 1, characterized in that Generating a vector animation according to the plurality of vector frame files comprises: adding a plurality of the vector frame files into a container; The vector animation is generated according to the plurality of vector frame files in the container by adopting a polling method.

6. The method according to any one of claims 1 to 5, characterized in that: The obtaining of the bitmap dynamic image comprises: In response to triggering the animated image upload control of the webpage, the locally uploaded bitmap animated image is obtained.

7. The method according to any one of claims 1 to 5, characterized in that: After generating the vector animation, the method further includes: Displaying the vector animation on the webpage; and / or A download control for the vector animation is displayed on the web page.

8. A moving picture conversion device, characterized in that: Applied to web pages, including: The acquisition module is used to obtain the bitmap animation; A conversion module, configured to convert the bitmap dynamic image into multiple frames of static images in response to triggering a dynamic image conversion control of the webpage; A drawing module, used for drawing a plurality of canvas elements according to the plurality of frames of the static images; A creation module, used for creating a plurality of vector frame files according to a plurality of the canvas elements; A generating module is used to generate a vector animation according to the plurality of vector frame files.

9. An electronic device, characterized in that: The method comprises a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the processor implements the steps in the dynamic image conversion method as described in any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in the dynamic image conversion method according to any one of claims 1 to 7 are implemented.

Images