Canvas H5 continuous image capturing and processing method and system
By using the Canvas element to render camera video streams and perform asynchronous processing in an H5 environment, the problem of cumbersome and inefficient continuous image capture in existing technologies is solved, achieving efficient and smooth image capture and processing, adapting to both portrait and landscape viewing angles, and supporting multi-platform compatibility.
Patent Information
- Application Number
- CN202511942007.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-12-22
- Publication Date
- 2026-03-03
AI Technical Summary
Existing image capture technologies in the H5 environment suffer from problems such as cumbersome operation, low efficiency, page lag, lack of intelligent optimization, and complex cross-platform adaptation in continuous static image capture scenarios, making it difficult to meet the needs of high-quality, intelligent continuous image capture.
The system retrieves real-time video streams from the camera by calling the media capture interface and sends them to the Canvas element. It then initiates continuous capture in response to a single interaction, adapts to both portrait and landscape viewing angles, and passes the image data to a background thread on the web for asynchronous processing, including operations such as compression, rotation, and adding watermarks.
It achieves efficient and smooth continuous image capture and processing in a pure H5 environment, simplifies user operation, avoids page lag, supports multi-platform compatibility, and meets the actual needs of web applications.
Smart Images
Figure CN121597938A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of image processing technology, and in particular to a method and system for capturing and processing continuous H5 images using Canvas. Background Technology
[0002] In the field of web application development, HTML5 (H5) is widely used in cross-platform web application development. Image capture is a common requirement for various web applications, such as mobile H5 photo upload and ID photo shooting.
[0003] In existing technologies, image capture in the H5 environment mainly relies on native APIs. However, this approach has significant shortcomings in continuous static image capture scenarios: First, the native single-shot API only supports single-frame capture, requiring users to trigger multiple interactions to achieve continuous shooting, which is cumbersome and inefficient, and cannot meet the needs of high-speed continuous shooting. Second, directly processing captured image data in the browser's main thread can easily cause page lag, affecting user experience. Third, the native API can only obtain raw image data and lacks intelligent optimization and personalized processing capabilities. To implement related functions, third-party plugins or native application encapsulation are required, increasing development costs and compatibility risks. Fourth, the native interface performance varies across different terminal browsers, and page adaptation for landscape and portrait shooting also requires separate development, increasing the complexity of technical implementation.
[0004] Furthermore, extending H5 continuous image capture capabilities through plugins or native applications causes web applications to lose their cross-platform compatibility and imposes additional operational burdens on users. Therefore, existing native H5 technologies are insufficient to meet the demands of web applications for high-quality, intelligent continuous image capture, and a superior technical solution is urgently needed to address these issues. Summary of the Invention
[0005] To address the aforementioned issues, this application provides a method and system for capturing and processing continuous H5 images using Canvas, comprising the following:
[0006] Firstly, this application provides a method for capturing and processing continuous H5 images using Canvas, the method comprising:
[0007] Call the media acquisition interface to obtain the real-time video stream from the user device's camera, and render the real-time video stream onto the Canvas element of the H5 page to form a dynamic image source;
[0008] In response to a single user interaction, a continuous image capture process is initiated, and the real-time video stream is synchronized to the video display element as the image display source.
[0009] The display state of the H5 page is adjusted according to the shooting direction of the user's device to adapt to the shooting angle of horizontal or vertical shooting.
[0010] Within a preset capture period, the Canvas image processing interface is invoked to extract static image data from the dynamic image source;
[0011] After the extracted raw image data is passed to the backend thread on the web for asynchronous processing, the processed image data is managed and user feedback is performed.
[0012] Optionally, the step of calling the Canvas image processing interface to extract static image data from the dynamic image source includes:
[0013] The Canvas drawing interface is called to draw the images from the video display elements onto the Canvas canvas, and then the Canvas to Binary Large Objects interface is called to retrieve the binary data of the static image from the Canvas canvas.
[0014] Optionally, the step of transmitting the extracted raw image data to a background thread on the Web client for asynchronous processing includes:
[0015] The process includes at least one of the following core processing steps: compressing the original image data to reduce file storage size, converting the format to unify it into JPEG or PNG format, and enhancing the image quality to adjust the brightness or contrast.
[0016] Optionally, the step of transmitting the extracted raw image data to a background thread on the Web client for asynchronous processing includes:
[0017] A weighted decision algorithm is applied to accurately determine four standard directions: 0°, 90°, 180°, and 270°. Gyroscope data, screen orientation data, and video stream data are integrated to detect the shooting angle of the raw image data in real time. Based on the angle metadata bound to the raw image data, an intelligent rotation operation is performed on the raw image data to ensure the accuracy of image rotation and the smoothness of system operation, ultimately outputting an optimized image with the correct orientation. Optionally, the step of transferring the extracted raw image data to a background thread on the web for asynchronous processing includes:
[0018] Add at least one of the following to still image data: add watermark, add timestamp, add specific filter, or generate image thumbnail.
[0019] Optionally, the process of managing the processed image data and providing user feedback includes:
[0020] The final image data after processing is stored. The main thread receives processing status notifications from the background thread and updates the interactive interface of the H5 page to display the image capture and processing progress. After the continuous image capture process is completed, the processed image data is displayed in the form of thumbnail grid for users to preview and select. Unselected raw image data or intermediate processing data is cleaned up to free up the browser's running memory resources.
[0021] Optionally, adjusting the display state of the H5 page according to the shooting direction of the user's device to adapt to horizontal or vertical shooting angles includes:
[0022] When a user takes a horizontal shot, the H5 page should rotate synchronously with the user's device, or remain fixed and not rotate with the user's device; when a user takes a vertical shot, the H5 page should maintain a display layout adapted to the vertical shooting angle.
[0023] Secondly, this application provides a Canvas H5 continuous image capture and processing system, characterized in that the system comprises:
[0024] The video stream rendering module is used to call the media acquisition interface to obtain the real-time video stream from the user device's camera and render the real-time video stream into the Canvas element of the H5 page to form a dynamic image source.
[0025] The capture trigger module is used to initiate a continuous image capture process in response to a single user interaction and synchronize the real-time video stream to the video display element as the screen display source;
[0026] The page adaptation module is used to adjust the display state of the H5 page according to the shooting direction of the user's device, adapting to the shooting angle of horizontal or vertical shooting.
[0027] The image extraction module is used to extract static image data from the dynamic image source by calling the Canvas image processing interface within a preset capture period;
[0028] The asynchronous processing module and the result management module are used to pass the extracted raw image data to the background thread on the Web side for asynchronous processing, and then perform result management and user feedback operations on the processed image data.
[0029] Optionally, the image extraction module is specifically used to: call the Canvas drawing image interface to draw the image in the video display element onto the Canvas canvas, and then call the Canvas to binary large object conversion interface to extract the binary data of the static image from the Canvas canvas.
[0030] Optionally, the asynchronous processing module includes a core processing submodule, which is used to: compress the original image data to reduce the file storage size, perform format conversion processing to unify it into JPEG or PNG format, and perform image quality enhancement processing to adjust at least one of the following: image brightness or contrast.
[0031] Optionally, the asynchronous processing module includes an intelligent optimization submodule, which is used to: apply a weighted decision algorithm to accurately determine four standard directions: 0°, 90°, 180°, and 270°; integrate gyroscope data, screen orientation data, and video stream data to detect the shooting angle of the original image data in real time; perform intelligent rotation operation on the original image data according to the angle metadata bound to the original image data to ensure the accuracy of image rotation and the smoothness of system operation; and finally output an optimized image with the correct orientation.
[0032] Optionally, the asynchronous processing module includes an additional processing submodule, which is used to: add a watermark, add a timestamp, add a specific filter, or generate an image thumbnail for static image data.
[0033] Optionally, the page adaptation module is specifically used to: control the H5 page to rotate synchronously with the rotation of the user's device when the user takes a horizontal shot, or keep the H5 page fixed and not rotate with the user's device; and maintain the display layout of the H5 page adapted to the vertical shooting angle when the user takes a vertical shot.
[0034] Optionally, the result management module is used to: store the final image data after processing, receive processing status notifications from the background thread through the main thread and update the interactive interface of the H5 page to display the image capture and processing progress, display the processed image data in the form of thumbnail grids for users to preview and select after the continuous image capture process ends, and clean up unselected original image data or intermediate processing data to release the browser's running memory resources.
[0035] Thirdly, this application provides an apparatus comprising a memory and a processor, the memory for storing instructions or code, and the processor for executing the instructions or code to cause the apparatus to perform the method described in any of the implementations of the first aspect.
[0036] Fourthly, this application provides a computer-readable storage medium storing code, wherein when the code is executed, a device executing the code implements the method described in any of the implementations of the first aspect.
[0037] This application provides a method for continuous image capture and processing in H5 using Canvas. When executing the method, firstly, a media acquisition interface is called to obtain the real-time video stream from the user's device camera, and the real-time video stream is rendered into the Canvas element of the H5 page to form a dynamic image source. Then, in response to a single user interaction, a continuous image capture process is initiated, and the real-time video stream is synchronized to a video display element as the image display source. Next, the display state of the H5 page is adjusted according to the user's device's shooting direction to adapt to horizontal or vertical shooting angles. Within a preset capture period, the Canvas image processing interface is called to extract static image data from the dynamic image source. Finally, the extracted raw image data is passed to a background thread on the Web side for asynchronous processing, and the processed image data is then managed for results and user feedback is provided. This approach, by rendering the real-time video stream from the camera and capturing frame data using the Canvas element as the core carrier, replaces the traditional single-shot API call method of H5. This allows users to trigger continuous image capture with a single interaction, eliminating the need for multiple operations and bypassing the overhead of traditional single-shot API calls. By adjusting the H5 page display state according to the shooting direction, the page can adapt to the display requirements of different shooting angles, such as horizontal and vertical shots. By asynchronously processing the raw image data in a background thread on the web, image processing operations do not consume browser main thread resources. This achieves efficient capture and smooth processing of continuous images in a pure H5 environment, simplifying the user's workflow and preventing page lag due to image processing. Thus, this method can run on various terminal browsers that support the H5 standard without relying on third-party plugins or native application encapsulation, and the captured images are processed and presented to the user in an intuitive way, meeting the practical needs of web applications for continuous image capture functionality. Attached Figure Description
[0038] To more clearly illustrate the technical solutions in this embodiment or the prior art, the drawings used in the description of the embodiment or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0039] Figure 1 A flowchart of a Canvas H5 continuous image capture and processing method provided in this application embodiment;
[0040] Figure 2 A horizontal shooting test effect diagram provided for an embodiment of this application;
[0041] Figure 3Another horizontal shooting test effect diagram provided in the embodiments of this application;
[0042] Figure 4 A vertical shooting test effect diagram provided for an embodiment of this application;
[0043] Figure 5 This is a schematic diagram of the structure of a Canvas H5 continuous image capture and processing system provided in an embodiment of this application. Detailed Implementation
[0044] As described in the background section of this application, in the prior art, image capture in the H5 environment mainly relies on native APIs. However, this type of solution has significant shortcomings in continuous static image capture scenarios: First, the native single-shot API only supports single-frame capture, requiring users to trigger interactions multiple times to achieve continuous shooting, which is cumbersome and inefficient, and cannot meet the needs of high-speed continuous shooting; Second, directly processing the captured image data in the browser's main thread can easily cause page lag and affect user experience; Third, the native API can only obtain raw image data and lacks intelligent optimization and personalized processing capabilities. To achieve related functions, third-party plugins or native application encapsulation are required, increasing development costs and compatibility risks; Fourth, the native interface performance of different terminal browsers varies, and page adaptation for landscape and portrait shooting also requires separate development, increasing the complexity of technical implementation.
[0045] Furthermore, extending H5 continuous image capture capabilities through plugins or native applications causes web applications to lose their cross-platform compatibility and imposes additional operational burdens on users. Therefore, existing native H5 technologies are insufficient to meet the demands of web applications for high-quality, intelligent continuous image capture, and a superior technical solution is urgently needed to address these issues.
[0046] To address the aforementioned technical issues, this application provides a Canvas-based H5 continuous image capture and processing method. This method uses the Canvas element as the core carrier to render the real-time video stream from the camera and capture frame data, replacing the traditional single-shot API call method of H5. This allows users to trigger continuous image capture with a single interaction, eliminating the need for multiple operations and bypassing the overhead of traditional single-shot API calls. By adjusting the H5 page display state according to the shooting direction, the page can adapt to the display requirements of different shooting angles, such as horizontal and vertical shots. By transmitting the raw image data to the background thread on the Web client for asynchronous processing, the image processing operation does not consume browser main thread resources. This achieves efficient capture and smooth processing of continuous images in a pure H5 environment, simplifying the user's operation process and avoiding page lag due to image processing. Thus, this method can run on various terminal browsers that support the H5 standard without relying on third-party plugins or native application encapsulation, and the captured images are processed and presented to the user in an intuitive form, meeting the practical needs of Web applications for continuous image capture functionality.
[0047] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.
[0048] It should be noted that the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of related data must comply with the relevant laws, regulations and standards of the relevant countries and regions.
[0049] Figure 1 This is a flowchart illustrating a method for capturing and processing continuous H5 images using Canvas, provided as an embodiment of this application. (Combined with...) Figure 1 As shown in the embodiments of this application, the H5 continuous image capture and processing method for Canvas provided may include:
[0050] S101. Call the media acquisition interface to obtain the real-time video stream from the user device's camera, and render the real-time video stream into the Canvas element of the H5 page to form a dynamic image source.
[0051] In this embodiment, the media acquisition interface adopts the getUserMedia interface in the H5 standard. This interface can realize the call to the user device's camera permissions and the acquisition of video stream data. The acquired real-time video stream is rendered to a Canvas element, and the graphics drawing characteristics of the Canvas are used to form a continuous dynamic image source, which provides a stable image foundation for subsequent image capture. Compared with the traditional method of relying on the native photo capture interface, a visual carrier of the video stream is established in advance, avoiding the problem of image interruption during a single photo capture.
[0052] S102. In response to a single user interaction, initiate a continuous image capture process and synchronize the real-time video stream to the video display element as the image display source.
[0053] In this embodiment, a user's single interaction operation may include interactive forms supported by the H5 page, such as long-pressing a button or clicking the shooting icon. Based on this single interaction, continuous image capture can be triggered without the user having to perform repeated operations. At the same time, the video stream is synchronized to video display elements such as video, allowing users to intuitively see the real-time captured image. This improves the convenience of operation and the visual appeal of the image, solves the drawback of the native single-shot API requiring multiple triggering interactions, and effectively improves the efficiency of continuous capture operations.
[0054] S103. Adjust the display state of the H5 page according to the shooting direction of the user's device to adapt to the shooting angle of horizontal or vertical shooting.
[0055] Specifically, adjusting the display state of the H5 page according to the shooting direction of the user's device to adapt to the shooting angle of horizontal or vertical shooting includes: when the user shoots in horizontal mode, controlling the H5 page to rotate synchronously with the rotation of the user's device, or keeping the H5 page fixed and not rotating with the user's device; when the user shoots in vertical mode, maintaining the display layout of the H5 page adapted to the vertical shooting angle.
[0056] In this embodiment, various shooting visual effects can be presented through different page display control logics, such as... Figure 2 This application provides a landscape shooting test effect diagram, which shows the shooting effect after the page rotates with the mobile phone when shooting in landscape mode. At this time, the display direction of the H5 page is consistent with the rotation angle of the mobile phone device, and the user can obtain a horizontal shooting field of view that matches the device direction when shooting in landscape mode. Figure 3 Another horizontal shooting test effect diagram provided for the embodiments of this application shows the shooting effect after the page does not follow the rotation of the mobile phone when shooting horizontally. Even if the mobile phone device is rotated horizontally, the H5 page still maintains the initial display direction, which is suitable for horizontal shooting scenarios that require a fixed page view. Figure 4This application provides a vertical shooting test effect diagram, which shows the shooting effect of the page when shooting vertically. At this time, the page layout is adapted to the visual ratio of vertical shooting to ensure the complete presentation of the vertical shooting image.
[0057] By adjusting the page display status as described above, the H5 page can be flexibly adapted to the user's actual shooting habits and device orientation. Whether shooting horizontally or vertically, it can provide the user with a comfortable shooting field of view, solve the problem of inconsistent page display under different shooting directions, and improve the adaptability of cross-scene shooting.
[0058] S104. Within a preset capture period, call the Canvas image processing interface to extract static image data from the dynamic image source.
[0059] The step of calling the Canvas image processing interface to extract static image data from the dynamic image source includes: calling the Canvas drawing image interface to draw the image in the video display element onto the Canvas canvas, and then calling the Canvas to binary large object conversion interface to retrieve the binary data of the static image from the Canvas canvas.
[0060] In this embodiment, a Binary Large Object (Blob) is a data object type used on the web to store large binary files such as images and videos. It is also the basic data carrier for subsequent asynchronous processing operations such as image compression, format conversion, and watermarking. The preset capture period can be set according to actual business needs, such as capturing one frame of image every 100 milliseconds. The canvas drawing image interface corresponds to the drawImage interface in the Canvas API, and the canvas to binary large object conversion interface corresponds to the toBlob interface in the Canvas API. Through these two steps, the static image binary data of a single frame can be accurately extracted from the dynamic video stream. This data format facilitates subsequent processing and storage. Compared with directly obtaining the raw video frame data, it further simplifies the processing difficulty of image data and ensures the accuracy and efficiency of image extraction.
[0061] S105. After the extracted raw image data is transferred to the Web client's backend thread for asynchronous processing, the processed image data is managed and user feedback is performed.
[0062] In this embodiment, the background thread on the web side is implemented using Web Workers. Asynchronous processing via this background thread avoids image processing operations consuming the browser's main thread resources, ensuring smooth operation of the H5 page. Specifically, asynchronous processing includes operations in multiple dimensions:
[0063] The core processing steps include at least one of the following: compressing the original image data to reduce file size, converting the format to JPEG or PNG, and enhancing image quality by adjusting brightness or contrast. Through this core processing, image storage performance and visual effects can be optimized, making the image data more suitable for practical use.
[0064] Intelligent optimization steps: Integrating gyroscope data, screen orientation data, and video stream data, the system uses multi-source sensor fusion to detect the shooting angle of the original image data in real time. A weighted decision algorithm is applied to accurately determine four standard directions: 0°, 90°, 180°, and 270°. The system employs anti-shake filtering technology to filter out instantaneous jitter, ensuring the stability of angle detection. In the background thread on the web client, intelligent rotation is performed on the original image data based on the angle metadata bound to it. Canvas optimization is used to maintain image quality, while the UI preview orientation is automatically adjusted. The entire process achieves complete decoupling between angle detection and image rotation processing, ensuring the accuracy of image rotation and the smoothness of system operation, ultimately outputting an optimized image with the correct orientation.
[0065] Additional processing steps include adding at least one of the following to static image data: adding a watermark, adding a timestamp, adding a specific filter, or generating an image thumbnail. These additional processing steps enrich the presentation and informational dimensions of the image, meeting the personalized image processing needs of different web application scenarios.
[0066] After completing the asynchronous processing described above, the processed image data undergoes result management and user feedback operations. Specifically, this includes: storing the final image data after processing; receiving processing status notifications from the background thread via the main thread and updating the H5 page's interactive interface to display the image capture and processing progress; displaying the processed image data in a thumbnail grid format for user preview and selection after the continuous image capture process concludes; and clearing unselected raw image data or intermediate processing data to free up browser memory resources. Through these result management and feedback operations, users can not only monitor the shooting and processing progress in real time but also enhance their selection experience through visual previews. Furthermore, timely clearing of invalid data optimizes browser memory usage efficiency and ensures stable application operation.
[0067] From a user operation and usage perspective, the design of triggering continuous capture with a single interaction in step S102 allows users to initiate an automatic, high-speed continuous shooting process with just a long press or other single operation. Through asynchronous processing and result feedback in this step, users instantly obtain high-quality photos, thumbnail grids, and other processed results. Furthermore, through multiple processing steps including core processing, intelligent optimization, and additional processing, users do not receive messy raw data after taking a photo, but rather a finished product photo that has undergone automatic compression, intelligent filtering and enhancement, and even watermarking. Simultaneously, the entire technical solution is implemented entirely based on the H5 standard, relying on native H5 technologies such as Canvas elements and Web Workers to complete all processes. It does not depend on third-party plugins or native application encapsulation and can run uniformly on modern browsers that support standard H5, such as PCs, iOS, and Android. This eliminates the need for developing separate adaptation versions for different platforms, significantly improving the cross-platform compatibility and scalability of the technical solution.
[0068] The above are some specific implementations of a Canvas-based H5 continuous image capture and processing method provided in the embodiments of this application. Based on this, this application also provides a corresponding system. The system provided in the embodiments of this application will be described below from the perspective of functional modularity.
[0069] Figure 5 This is a schematic diagram of the structure of a Canvas-based H5 continuous image capture and processing system provided in an embodiment of this application. (Combined with...) Figure 5 As shown in the embodiment of this application, the H5 continuous image capture and processing method 500 for Canvas includes:
[0070] The video stream rendering module 510 is used to call the media acquisition interface to obtain the real-time video stream from the user device's camera and render the real-time video stream to the Canvas element of the H5 page to form a dynamic image source.
[0071] The capture trigger module 520 is used to initiate a continuous image capture process in response to a single user interaction and synchronize the real-time video stream to the video display element as the screen display source;
[0072] The page adaptation module 530 is used to adjust the display state of the H5 page according to the shooting direction of the user's device, and adapt to the shooting angle of horizontal or vertical shooting.
[0073] Image extraction module 540 is used to extract static image data from the dynamic image source by calling the Canvas image processing interface within a preset capture period;
[0074] The asynchronous processing module and result management module 550 are used to transmit the extracted raw image data to the background thread on the Web for asynchronous processing, and then perform result management and user feedback operations on the processed image data.
[0075] In one implementation of this application, the image extraction module is specifically used to: call the Canvas drawing image interface to draw the image in the video display element onto the Canvas canvas, and then call the Canvas to binary large object conversion interface to extract the binary data of the static image from the Canvas canvas.
[0076] In one implementation of this application, the asynchronous processing module includes a core processing submodule, which is used to: compress the original image data to reduce the file storage size, perform format conversion processing to unify it into JPEG or PNG format, and perform image quality enhancement processing to adjust at least one of the following: the brightness or contrast of the image.
[0077] In one implementation of this application, the asynchronous processing module includes an intelligent optimization submodule. The intelligent optimization submodule is used to: apply a weighted decision algorithm to accurately determine four standard directions: 0°, 90°, 180°, and 270°; integrate gyroscope data, screen orientation data, and video stream data to detect the shooting angle of the original image data in real time; perform intelligent rotation operation on the original image data according to the angle metadata bound to the original image data to ensure the accuracy of image rotation and the smoothness of system operation; and finally output an optimized image with the correct orientation.
[0078] In one implementation of this application, the asynchronous processing module includes an additional processing submodule, which is used to: add a watermark, add a timestamp, add a specific filter, or generate an image thumbnail for static image data.
[0079] In one implementation of this application, the page adaptation module is specifically used to: control the H5 page to rotate synchronously with the rotation of the user's device when the user takes a horizontal shot, or keep the H5 page fixed and not rotate with the user's device; and maintain the display layout of the H5 page adapted to the vertical shooting angle when the user takes a vertical shot.
[0080] In one implementation of this application, the result management module is used to: store the final image data after processing, receive processing status notifications from the background thread through the main thread and update the interactive interface of the H5 page to display the image capture and processing progress, display the processed image data in the form of thumbnail grids for users to preview and select after the continuous image capture process ends, and clean up unselected original image data or intermediate processing data to release the browser's running memory resources.
[0081] This application also provides corresponding devices and computer storage media for implementing the solutions provided in this application.
[0082] The device includes a memory and a processor. The memory stores instructions or code, and the processor executes the instructions or code to cause the device to perform the method described in any embodiment of this application.
[0083] The computer storage medium stores code, and when the code is run, the device running the code implements the method described in any embodiment of this application.
[0084] As can be seen from the above description of the embodiments, those skilled in the art can clearly understand that all or part of the steps in the methods of the above embodiments can be implemented by means of software plus a general-purpose hardware platform. Based on this understanding, the technical solution of this application can be embodied in the form of a software product. This computer software product can be stored in a storage medium, such as a read-only memory (ROM) / RAM, magnetic disk, optical disk, etc., including several instructions to cause a computer device (which may be a personal computer, a server, or a network communication device such as a router) to execute the methods described in various embodiments or some parts of the embodiments of this application.
[0085] It is understood that in the specific embodiments of this application, the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved need to obtain user permission or consent when the above embodiments of this application are applied to specific products or technologies, and the collection, use and processing of related data need to comply with the relevant laws, regulations and standards of relevant countries and regions.
[0086] It should be noted that, in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0087] It should also be noted that the various embodiments in this specification are described in a progressive manner, and the same or similar parts between the various embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, for the device and system embodiments, since they are basically similar to the method embodiments, the description is relatively simple, and the relevant parts can be referred to the description of the method embodiments. The device and system embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate, and the components indicated as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of the solution in this embodiment according to actual needs. Those skilled in the art can understand and implement this without creative effort.
[0088] The above description is merely one specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the technical scope disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.
Claims
1. A method for capturing and processing continuous H5 images using Canvas, characterized in that, The method includes: Call the media acquisition interface to obtain the real-time video stream from the user device's camera, and render the real-time video stream onto the Canvas element of the H5 page to form a dynamic image source; In response to a single user interaction, a continuous image capture process is initiated, and the real-time video stream is synchronized to the video display element as the image display source. The display state of the H5 page is adjusted according to the shooting direction of the user's device to adapt to the shooting angle of horizontal or vertical shooting. Within a preset capture period, the Canvas image processing interface is invoked to extract static image data from the dynamic image source; After the extracted raw image data is passed to the backend thread on the web for asynchronous processing, the processed image data is managed and user feedback is performed.
2. The method according to claim 1, characterized in that, The step of calling the Canvas image processing interface to extract static image data from the dynamic image source includes: The Canvas drawing interface is called to draw the images from the video display elements onto the Canvas canvas, and then the Canvas to Binary Large Objects interface is called to retrieve the binary data of the static image from the Canvas canvas.
3. The method according to claim 1, characterized in that, The step of transmitting the extracted raw image data to a background thread on the Web client for asynchronous processing includes: The process includes at least one of the following core processing steps: compressing the original image data to reduce file storage size, converting the format to unify it into JPEG or PNG format, and enhancing the image quality to adjust the brightness or contrast.
4. The method according to claim 1, characterized in that, The step of transmitting the extracted raw image data to a background thread on the Web client for asynchronous processing includes: A weighted decision algorithm is applied to accurately determine four standard directions: 0°, 90°, 180°, and 270°. Gyroscope data, screen orientation data, and video stream data are integrated to detect the shooting angle of the original image data in real time. Based on the angle metadata bound to the original image data, an intelligent rotation operation is performed on the original image data to ensure the accuracy of image rotation and the smoothness of system operation, and finally output an optimized image with the correct orientation.
5. The method according to claim 1, characterized in that, The step of transmitting the extracted raw image data to a background thread on the Web client for asynchronous processing includes: Add at least one of the following to still image data: add watermark, add timestamp, add specific filter, or generate image thumbnail.
6. The method according to claim 1, characterized in that, The process of managing the processed image data and providing user feedback includes: The final image data after processing is stored. The main thread receives processing status notifications from the background thread and updates the interactive interface of the H5 page to display the image capture and processing progress. After the continuous image capture process is completed, the processed image data is displayed in the form of thumbnail grid for users to preview and select. Unselected raw image data or intermediate processing data is cleaned up to free up the browser's running memory resources.
7. The method according to claim 1, characterized in that, The adjustment of the H5 page display state according to the shooting direction of the user's device, adapting to horizontal or vertical shooting angles, includes: When a user takes a horizontal shot, the H5 page should rotate synchronously with the user's device, or remain fixed and not rotate with the user's device; when a user takes a vertical shot, the H5 page should maintain a display layout adapted to the vertical shooting angle.
8. A Canvas-based H5 continuous image capture and processing system, characterized in that, The system includes: The video stream rendering module is used to call the media acquisition interface to obtain the real-time video stream from the user device's camera and render the real-time video stream into the Canvas element of the H5 page to form a dynamic image source. The capture trigger module is used to initiate a continuous image capture process in response to a single user interaction and synchronize the real-time video stream to the video display element as the screen display source; The page adaptation module is used to adjust the display state of the H5 page according to the shooting direction of the user's device, adapting to the shooting angle of horizontal or vertical shooting. The image extraction module is used to extract static image data from the dynamic image source by calling the Canvas image processing interface within a preset capture period; The asynchronous processing module and the result management module are used to pass the extracted raw image data to the background thread on the Web side for asynchronous processing, and then perform result management and user feedback operations on the processed image data.
9. A computing device, characterized in that, The computing device includes: a memory and a processor; The memory is used to store computer programs; The processor is configured to implement the steps of the 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 that, when executed by a processor, implements the steps of the method as described in any one of claims 1 to 7.