Method and device for generating picture watermark

Abstract

The embodiment of the invention discloses a method and device for generating a picture watermark, and the method comprises the following steps: obtaining an original picture and watermark parameters uploaded by a user, dynamically constructing an HTML template file according to the watermark parameters, and generating a CSS style file matched with the HTML template file; starting a Chromium browser in a Headless mode by using a Puppeteer, loading the HTML template file and the CSS style file through the Chromium browser, and generating a watermark picture; and carrying out superposition processing on the watermark picture and the original picture to generate a picture with a watermark. According to the embodiment of the invention, the Chromium browser in the Headless mode is started by using Puppeteer to generate the watermark picture, so that the diversified requirements on the watermark style of the picture in a complex business scene can be met, and the high dynamic and configuration of the watermark style can be realized.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and specifically relates to a method and device for generating an image watermark. Background Art

[0002] In the current technological environment, the application scenarios of image watermarks are becoming more and more extensive, especially in the fields of image copyright protection, information transmission, brand promotion, etc. Copyright logos or brand names can be added to images to prevent the images from being stolen or disseminated without authorization; they can be used in advertising, e-commerce platform product display and other scenarios to dynamically generate watermarks with specific styles; unique logos can be added to important documents or images to facilitate tracking of information sources and enhance the credibility of content.

[0003] At present, the main way to implement image watermarks is to use the back-end image processing library (such as ImageMagick, GraphicsMagick, Pillow, etc.) to perform direct pixel-level operations on the image and superimpose text or graphic watermarks on the image. The processing is simple and supports common text or pattern watermarks, but it is inefficient when processing complex watermarks and it is difficult to meet diverse watermark requirements.

[0004] Application Contents

[0005] The purpose of the embodiments of the present application is to provide a method and device for generating a picture watermark, so as to solve the defect that the prior art is difficult to meet the diverse watermark requirements.

[0006] In order to solve the above technical problems, this application is implemented as follows:

[0007] In a first aspect, a method for generating an image watermark is provided, comprising the following steps:

[0008] Obtain the original image and watermark parameters uploaded by the user, dynamically construct an HTML template file according to the watermark parameters, and generate a CSS style file matching the HTML template file;

[0009] Use Puppeteer to start the Chromium browser in headless mode, load the HTML template file and the CSS style file through the Chromium browser, and generate a watermark image;

[0010] The watermarked image is superimposed on the original image to generate a watermarked image.

[0011] In a second aspect, a device for generating a picture watermark is provided, comprising:

[0012] The acquisition module is used to acquire the original image and watermark parameters uploaded by the user, dynamically construct an HTML template file according to the watermark parameters, and generate a CSS style file matching the HTML template file;

[0013] A loading module is used to start a Chromium browser in headless mode using Puppeteer, load the HTML template file and the CSS style file through the Chromium browser, and generate a watermark image;

[0014] The generating module is used to superimpose the watermarked image with the original image to generate a watermarked image.

[0015] The embodiment of the present application uses Puppeteer to start the Chromium browser in headless mode to generate a watermark image, which can meet the diverse needs for image watermark styles in complex business scenarios and achieve highly dynamic and configurable watermark styles. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 This is a flow chart of a method for generating a picture watermark provided by an embodiment of the present application;

[0017] Figure 2 It is a structural schematic diagram of a device for generating an image watermark provided in an embodiment of the present application. DETAILED DESCRIPTION

[0018] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0019] The traditional watermark generation method has the following problems:

[0020] 1. Insufficient performance: Traditional watermark generation based on image processing libraries is inefficient and prone to performance bottlenecks when processing large quantities of images or complex business scenarios.

[0021] 2. The style is not flexible enough: Most existing solutions only support simple text or graphic watermarks, and have limited ability to dynamically generate and adjust complex styles.

[0022] 3. Poor environmental adaptability: Traditional solutions usually rely on specific operating environments or complex dependency configurations and cannot be flexibly deployed on multiple servers or lightweight environments.

[0023] 4. Poor scalability: Due to the limitations of the implementation method, it is difficult to quickly adapt to new business needs or style changes.

[0024] In view of the above shortcomings, the embodiment of the present application proposes an efficient image watermark generation method and device based on Node.js+Puppeteer, which mainly solves the following problems:

[0025] 1. Rich styles and flexibility

[0026] The watermark style is described by HTML+CSS, allowing developers to quickly build watermark content using Web technology. It supports multiple styles such as text, pictures, dynamic effects (such as gradients, shadows, rotations), etc., to meet the needs of complex business scenarios.

[0027] 2. High performance and low latency

[0028] Based on Chromium's headless mode, the browser engine is used for rendering, which significantly improves the speed of image generation. At the same time, the asynchronous characteristics of Node.js are used to handle concurrent requests, which can support fast response in high-concurrency scenarios.

[0029] 3. Cross-platform consistency

[0030] Since the watermark style relies on HTML+CSS+Chromium engine rendering, the generated watermark has a consistent display effect in various operating systems and environments, solving the compatibility problem of traditional back-end image processing libraries.

[0031] 4. Simple and easy-to-use interface

[0032] Services are provided externally in the form of RESTful API. Users only need to call the interface and upload images and watermark parameters to complete the operation, reducing complex implementation costs.

[0033] 5. Dynamic Configuration and Scalability

[0034] Supports passing dynamic parameters (such as watermark content, color, size, layout, etc.) through the interface to meet the personalized needs of different scenarios. Watermark templates can be managed and expanded independently, and new styles can be easily added.

[0035] 6. Independent Deployment and Compatibility

[0036] The system is developed based on the Koa framework and can be independently deployed and run on any server without relying on specific hardware or operating system environment. It has strong compatibility and low deployment cost.

[0037] The embodiments of the present application have the following features:

[0038] 1. System architecture and technical process

[0039] 1. Efficient watermark generation technology based on Node.js+Puppeteer.

[0040] 2. Modular design (service entry, template generation, rendering module, image processing module, result return module) and its internal collaboration process.

[0041] 2. HTML+CSS dynamic watermark template generation technology

[0042] 1. A technical solution that uses HTML and CSS to describe the watermark content and style, and renders it as an image through Puppeteer.

[0043] 2. Support the design and implementation of dynamically defined watermark parameters (text, font, color, transparency, etc.).

[0044] 3. Combined application of Puppeteer and Sharp

[0045] 1. An efficient method of using Puppeteer to render dynamic watermark images and then synthesizing them through Sharp.

[0046] 2. Chromium headless browser rendering technology based on Puppeteer.

[0047] 4. Interface design and parameterized control

[0048] 1. Provide a RESTful API that supports dynamic adjustment of watermarks, ensuring the flexibility of parameter design and ease of use of the interface.

[0049] 5. Performance Optimization Technology

[0050] 1. Management strategy of Puppeteer browser pool to improve service performance and reduce resource consumption.

[0051] 2. Image compression and format optimization methods to improve image processing efficiency and output quality.

[0052] 6. Expanded capabilities to support highly customized watermarks

[0053] 1. Use HTML and CSS to describe any watermark style and render it dynamically to meet different business needs.

[0054] 2. Supports customization of watermark styles such as complex layouts, multiple font effects, and multi-language texts.

[0055] 7. Business scenario adaptability

[0056] 1. For complex scenarios where you need to dynamically add multiple watermarks to images, a highly scalable technical solution is provided.

[0057] 2. It can be applied to various business areas such as e-commerce, document protection, image copyright, corporate brand promotion, etc.

[0058] The embodiment of the present application provides a high-performance, flexible and easy-to-deploy dynamic image watermark generation method, which can meet the customization requirements of image watermark styles in complex business scenarios. By combining Web technology with a high-performance browser engine, it overcomes the shortcomings of traditional watermark generation technology such as single style, insufficient performance and poor cross-platform consistency, and provides an efficient, flexible and scalable dynamic watermark generation solution to achieve highly dynamic and configurable watermark styles. Users can complete customized adjustments to watermark content through simple parameter passing. It is particularly suitable for business scenarios that need to quickly process massive images and have highly customized requirements for watermark styles.

[0059] In the following, in conjunction with the accompanying drawings, a method for generating an image watermark provided by an embodiment of the present application is described in detail through specific embodiments and application scenarios.

[0060] like Figure 1 FIG. 1 is a flow chart of a method for generating a picture watermark provided in an embodiment of the present application, and the method comprises the following steps:

[0061] Step 101, obtaining the original image and watermark parameters uploaded by the user, dynamically constructing an HTML template file according to the watermark parameters, and generating a CSS style file matching the HTML template file.

[0062] Specifically, the original image and watermark parameters uploaded by the user through the RESTful API may be obtained, wherein the watermark parameters include watermark content, font, color, size, transparency, position and layout.

[0063] In this embodiment, after obtaining the original image and watermark parameters uploaded by the user, the format of the original file may be checked to verify the integrity and validity of the watermark parameters.

[0064] Step 102: Use Puppeteer to start the Chromium browser in headless mode, load the HTML template file and the CSS style file through the Chromium browser, and generate a watermark image.

[0065] Specifically, the HTML template file and the CSS style file can be loaded through the Chromium browser to render a watermark effect corresponding to the watermark parameters; after the rendering is completed, the page content of the Chromium browser is exported as a picture to generate a watermark picture.

[0066] In this embodiment, the HTML template file and the CSS style file can be loaded through the Chromium browser to simulate web page loading, use the original image as the background, and overlay the watermark content; save the rendering result as an image through the page.screenshot() method to generate a watermark image.

[0067] The HTML template file is used to describe the structure of the watermark, which includes text content and image content; the CSS style file is used to define the style of the watermark, which includes font, color, size, transparency and rotation angle.

[0068] Step 103, superimposing the watermarked image with the original image to generate a watermarked image.

[0069] In this embodiment, a browser pool can also be used to manage the Chromium instance of Puppeteer, and a queue can be used to schedule rendering tasks to limit the maximum number of tasks per second.

[0070] The embodiment of the present application uses Puppeteer to start the Chromium browser in headless mode to generate a watermark image, which can meet the diverse needs for image watermark styles in complex business scenarios and achieve highly dynamic and configurable watermark styles.

[0071] In the embodiments of the present application, a method and device for dynamically generating image watermarks based on Node.js and Puppeteer are provided, aiming to realize an efficient and flexible image watermark generation process and provide support for highly customized watermark styles. The overall technical solution can be described in detail from the following aspects:

[0072] 1. System Architecture Overview

[0073] The system mainly consists of the following modules:

[0074] 1. Watermark generation module

[0075] Use Puppeteer to control the Chromium browser, use HTML+CSS to describe the watermark style, and render the watermarked image.

[0076] 2. Image processing module

[0077] Responsible for receiving pictures uploaded by users, parsing and processing them through the Node.js middle layer, and synthesizing the pictures with watermarks.

[0078] 3. Interface management module

[0079] Provides a RESTful API, allowing users to pass image files and watermark parameters through HTTP requests, to achieve dynamic generation and return of image watermarks.

[0080] 4. Configuration Management Module

[0081] Dynamically manage watermark style templates, including font, color, size, position, transparency and other parameters. Users can pass configuration items through the interface to customize watermark content.

[0082] 5.Task Scheduling Module

[0083] Based on the asynchronous I / O characteristics of Node.js, the task queue is used to schedule the generation process to ensure system performance in high-concurrency scenarios.

[0084] 6. Result return module

[0085] After the watermarked image is generated, it is returned to the client in the form of a file stream, supporting multiple image formats (such as PNG, JPEG).

[0086] 2. System Workflow

[0087] The system's workflow is as follows:

[0088] 1. Request reception and analysis

[0089] 1) The user uploads an image through the RESTful API and carries the configuration parameters of the custom watermark in the request (such as watermark content, font, color, size, transparency, position, etc.). The system parses the request and verifies the legitimacy of the image file format and watermark parameters.

[0090] 2. HTML+CSS dynamically generates watermark templates

[0091] 1) Dynamically generate the HTML and CSS files required for watermarking based on the configuration parameters uploaded by the user.

[0092] 2) HTML file content: describes the structure of the watermark, including text content, image content, etc.

[0093] 3) CSS file content: defines the style of the watermark (font, color, size, transparency, rotation angle, etc.).

[0094] 3. Puppeteer renders images

[0095] 1) Start Puppeteer and load the Chromium browser in Headless mode.

[0096] 2) Puppeteer loads the generated HTML and CSS and renders the watermark effect through the browser.

[0097] 3) After rendering is completed, the page content is exported as an image to generate an image with a watermark.

[0098] 4. Image and watermark synthesis

[0099] 1) The generated watermarked image is superimposed with the original image uploaded by the user to finally generate a complete watermarked image.

[0100] 2) The synthesis process is completed through Puppeteer screenshots or Node.js image processing libraries such as Sharp.

[0101] 5. Return of watermarked images

[0102] 1) The synthesized image is returned to the user in the form of a file stream or file download.

[0103] 2) Support multiple image formats (such as PNG, JPEG) and ensure that the output file size and quality meet user requirements.

[0104] 3. System Features

[0105] 1. Efficiency

[0106] Use Chromium to render watermarks, fully utilize the browser's rendering performance, and quickly generate high-quality watermark images.

[0107] 2. Dynamic

[0108] Users can dynamically control the watermark content and style by passing parameters through the interface, without the need for hard-coding watermark templates.

[0109] 3. Scalability

[0110] The watermark template is built based on HTML+CSS, and developers can freely define the watermark style to meet the needs of complex business scenarios.

[0111] 4. Compatibility

[0112] The system is built on Node.js and Puppeteer, and can run on a variety of server environments (Linux, Windows, macOS), and the watermark effect remains consistent on different platforms.

[0113] 4. System performance optimization

[0114] 1. Task Queue

[0115] Utilize the asynchronous features of Node.js and task queues (such as Bull.js) to distribute watermark generation tasks and avoid blocking the main thread.

[0116] 2. Resource Management

[0117] Control the number of Puppeteer browser instances and pages, and use pooling technology to improve concurrency performance.

[0118] 3. Image compression

[0119] Use image processing libraries (such as Sharp) to compress output images to reduce bandwidth consumption.

[0120] Specifically, the implementation method of this application is based on Node.js and Puppeteer, and realizes the dynamic generation of image watermarks through standardized steps. The following describes in detail the specific implementation method of the implementation process from the aspects of request reception, processing, rendering, and output.

[0121] 1. Request reception and analysis

[0122] The user uploads the image and watermark related parameters through HTTP POST request, for example:

[0123] {

[0124] "file":"example.jpg",

[0125] "watermarkText":"Confidential",

[0126] "fontSize":16,

[0127] "color":"#4daf7c",

[0128] "opacity":0.5,

[0129] "position":"bottom-right",

[0130] "rotation":30

[0131] }

[0132] 2. Parameter verification: The system verifies the uploaded files and parameters: ensures that the image format is legal (supports JPEG, PNG, etc.) Verifies the integrity and validity of the watermark parameters, for example, the font size cannot be a negative number, and the transparency is between 0 and 1.

[0133] 3. HTML+CSS template generation

[0134] Dynamically generate HTML templates:

[0135] The HTML content is dynamically constructed based on the watermark parameters provided by the user. HTML describes the layout and content of the watermark text or graphics on the page. The HTML template generated by the example is:

[0136] <div class＝"watermark"style＝"opacity:0.5；font-size:16px；color:#4daf7c；transform:rotate(30deg)；position:absolute；bottom:10px；right:10px；">

[0137] Confidential

[0138] Dynamically generate CSS styles:

[0139] Combine watermark parameters to generate a CSS style file that matches HTML to control the watermark font style and size

[0140] 4. Puppeteer renders watermarked images

[0141] Start Puppeteer:

[0142] Use Puppeteer to start the Chromium browser in headless mode and load the generated HTML template file.

[0143] const puppeteer=require('puppeteer');

[0144] async function renderWatermark(htmlContent){

[0145] const browser=await puppeteer.launch();

[0146] const page=await browser.newPage();

[0147] await page.setContent(htmlContent); / / Load dynamically generated HTML

[0148] const screenshot = await page.screenshot({encoding:'binary'}); / / Render the page as a picture

[0149] await browser.close();

[0150] return screenshot;

[0151] }

[0152] Rendering watermark:

[0153] The page rendered by Puppeteer uses the original picture uploaded by the user as the background and superimposes the generated watermark content to complete the visual effect of the watermark.

[0154] 5. Image synthesis processing

[0155] Synthesize watermark and original image:

[0156] Overlay the watermark image generated by Puppeteer with the original image uploaded by the user.

[0157] const sharp=require('sharp');

[0158] async function mergeImages(baseImage,watermarkImage){

[0159] const result=await sharp(baseImage)

[0160] .composite([{input:watermarkImage,gravity:'southeast'}]) / / Watermark superimposed on the lower right corner

[0161] .toBuffer();

[0162] return result;

[0163] }

[0164] Transparency processing:

[0165] During the synthesis process, the transparency of the watermark is set according to user parameters to ensure that it does not affect the main content of the original image.

[0166] 6. Output pictures with watermarks

[0167] Image return: The system returns the synthesized watermarked image to the user in the form of a binary stream, or saves it in a specified file format for the user to download:

[0168] response.setHeader('Content-Type','image / png');

[0169] response.end(watermarkBuffer);

[0170] Supports multiple formats:

[0171] The output images can support multiple formats (PNG, JPEG, etc.), and the resolution, compression quality, etc. can be dynamically adjusted according to needs.

[0172] 7. Exception handling mechanism

[0173] File processing exception: If the file format uploaded by the user is illegal, a 400 error is returned with the specific reason.

[0174] Rendering failure: If an error occurs when Puppeteer renders HTML or synthesizes images, the system will automatically retry once. If it still fails, the error log will be recorded and an error response will be returned.

[0175] Task timeout: Set a task timeout (such as 10 seconds) to prevent the task from taking up too many resources in high concurrency situations.

[0176] 8. Performance optimization

[0177] Browser pool: Use browser pool to manage Puppeteer's Chromium instances to avoid performance bottlenecks caused by repeated startup and destruction of browsers.

[0178] const browserPool = []; / / Maintain a browser pool

[0179] async function getBrowserInstance(){

[0180] if(browserPool.length>0){

[0181] return browserPool.pop();

[0182] }else{

[0183] return await puppeteer.launch();

[0184] }

[0185] }

[0186] async function releaseBrowserInstance(browser){

[0187] browserPool.push(browser);

[0188] }

[0189] Task scheduling: Use queues (such as Bull.js) to schedule rendering tasks, limit the maximum number of tasks per second, and ensure service stability.

[0190] Image compression: Use tools (such as Sharp) to compress the generated images to reduce bandwidth consumption and improve transmission efficiency.

[0191] This application implementation method takes Node.js as the core, combines the headless browser features of Puppeteer and Chromium, and provides a full-process solution from request to result output through efficient dynamic rendering and image processing technology. This implementation method describes the system architecture, functions of each module, core processes and technical details in detail to ensure the completeness and efficiency of the implementation functions.

[0192] 1. System architecture design

[0193] The system architecture includes the following main modules:

[0194] 1. Service entry module: Developed based on Koa.js, it receives user HTTP requests, verifies parameters, and schedules other modules to perform tasks.

[0195] 2. Template generation module: dynamically generates HTML and CSS based on user parameters for rendering watermark styles.

[0196] 3. Rendering module: Use Puppeteer to control Chromium to render images and watermarks.

[0197] 4. Image processing module: Use tools such as Sharp to perform image synthesis, format conversion and optimization.

[0198] 5. Result return module: processes the rendered image and returns it to the user or saves it to a specified location.

[0199] 2. Module Detailed Design

[0200] Service entry module

[0201] 1. Receive the user's HTTP request, including the uploaded image and watermark parameters.

[0202] 2. Verify parameter validity, for example:

[0203] Make sure the format of the uploaded image (JPEG / PNG, etc.) is legal.

[0204] Verify whether the watermark text, color, font, position and other parameters are complete.

[0205] 3. Distribute legitimate requests to the template generation module and record task logs for debugging and monitoring.

[0206] 3. Template Generation Module

[0207] 1. Dynamically generate HTML and CSS templates to describe watermark style and layout.

[0208] 2. Support customized watermark content, including text, pictures, transparency, position, rotation angle, etc.

[0209] 3. The template generation module dynamically generates template content based on input parameters to ensure high customization.

[0210] 4. Rendering Module

[0211] 1. Use Puppeteer to start a headless browser (Chromium) and load the generated HTML and CSS templates.

[0212] 2. Rendering process:

[0213] The browser simulates the loading of a web page, uses the image as the background, and overlays the watermark content.

[0214] The rendering result is saved as an image through the page.screenshot() method.

[0215] 5. Image processing module

[0216] 1. Image synthesis:

[0217] Use the Sharp library to overlay the watermark image rendered by Puppeteer with the original image.

[0218] Supports dynamic adjustment of parameters such as transparency and scaling.

[0219] 2. Format optimization:

[0220] Supports multiple output formats (JPEG, PNG, etc.).

[0221] Use compression algorithms to optimize image size and reduce network transmission time.

[0222] 6. Result return module

[0223] 1. Return the processed image to the user in the form of a binary stream.

[0224] 2. Supports storage to local files or uploading to cloud storage (such as AWS S3, Alibaba Cloud OSS).

[0225] Among them, the key points of the embodiments of the present application include:

[0226] 1. Service architecture based on Node.js

[0227] 1. The Node.js service built on the Koa framework is lightweight, efficient, and easy to deploy, and supports independent operation in a variety of server environments.

[0228] 2. The service design is modular, providing a flexible interface, supporting dynamic reception of user parameters and completing watermark generation and image processing.

[0229] 2. Combination of Puppeteer and Chromium headless browser

[0230] 1. Use Puppeteer to control the Chromium browser and render images and watermarks through HTML and CSS.

[0231] 2. Chromium's headless mode provides high-performance rendering capabilities, enabling fast and high-quality image processing.

[0232] 3. Dynamically generate HTML and CSS watermark templates

[0233] 1. Support dynamic definition of watermark content, style, size, color, transparency, position, etc. based on HTML and CSS.

[0234] 2. Users can customize watermark templates through the interface and generate watermarks of any style to meet diverse needs.

[0235] 4. Efficient Implementation of Image Rendering and Synthesis

[0236] 1. Puppeteer is responsible for rendering watermark images, and tools such as Sharp are responsible for image synthesis and optimization.

[0237] 2. The synthesis process supports transparency adjustment, generation of multiple image formats (JPEG / PNG / WebP) and compression optimization.

[0238] 5. Interface and parameterized design

[0239] 1. Through the RESTful interface, users can dynamically pass parameters and generate watermarked images in real time.

[0240] 2. Parameters include watermark text, font, color, transparency, rotation angle, position, etc., supporting the flexible needs of complex business scenarios.

[0241] 6. High performance and scalability

[0242] 1. The service supports concurrent processing and uses the Puppeteer browser pool to optimize resource usage.

[0243] 2. The system design supports horizontal expansion and can adapt to high-traffic scenarios.

[0244] Compared with the prior art, the embodiments of the present application have the following advantages:

[0245] 1. Efficiency

[0246] In traditional watermark generation technology, most of them rely on image processing libraries (such as PIL, OpenCV) to draw watermarks on pictures. This method directly operates pixels, resulting in slow processing speed, especially when batch processing large-size pictures, the performance bottleneck is obvious. The embodiment of the present application uses Puppeteer to control the Chromium headless browser for watermark rendering, and combines HTML and CSS to describe the watermark style. Based on the browser's rendering mechanism, pixels are not directly operated, but images are rendered through efficient GPU acceleration, thereby greatly improving the image processing speed. At the same time, the browser pool concurrent processing technology is used to further optimize performance and adapt it to high-concurrency scenarios.

[0247] 2. Flexibility and Customization

[0248] Traditional watermark generation methods are usually based on fixed algorithms or templates. The watermark style and layout are relatively simple, difficult to customize dynamically, and cannot meet the needs of complex scenarios. The embodiment of the present application dynamically generates watermark templates through HTML and CSS, and users can freely define the style, color, font, transparency, layout, rotation angle and other attributes of the watermark. Through interface parameter control, the watermark content and style can be adjusted in real time, which greatly improves flexibility and is suitable for a variety of business needs, such as copyright protection, brand promotion, etc.

[0249] 3. Technical scalability

[0250] Most traditional methods focus on a single function, such as adding fixed text watermarks or image watermarks, and lack scalability. Adding new functions usually requires redesigning the algorithm, which is costly. The embodiments of the present application are based on the standardized description language of HTML and CSS, and can be easily expanded to support more complex watermark styles. For example, CSS can be used to achieve gradient text, pattern overlays, complex layouts, etc., and even SVG animations can be directly embedded as watermarks. The modular design of the system architecture also facilitates the addition of new functions in the future.

[0251] 4. Compatibility

[0252] Some traditional methods rely on specific image processing libraries, which may have compatibility issues between different operating systems or different development languages. The embodiment of this application is built on Node.js and uses Puppeteer to control Chromium. It has good cross-platform compatibility and can run in multiple operating systems (such as Linux, Windows, macOS) and server environments. At the same time, the interface is designed based on the RESTful standard, which is convenient for integration with other systems.

[0253] 5. User-Friendliness

[0254] Traditional solutions generally require developers to have high knowledge of image processing technology, and non-professional developers find it difficult to quickly get started. The embodiment of the present application uses an interface design, and users only need to pass the necessary parameters through HTTP requests to complete complex watermark generation operations without having to deeply understand the underlying technical details. This highly encapsulated approach greatly reduces the threshold for use.

[0255] 6. Performance optimization and resource utilization

[0256] The image processing library in the prior art often requires a lot of computing resources when operating high-resolution images, with slow processing speed and poor concurrency. The browser pool implemented by Puppeteer in the present application embodiment can reuse Chromium instances, greatly reducing resource consumption; using efficient image processing libraries such as Sharp, combined with Puppeteer rendering, optimizes the generation speed and quality of the final image; through the asynchronous I / O model of Node.js, effectively improves the responsiveness of the system under high concurrency.

[0257] 7. Security

[0258] Some traditional watermark generation methods lack data encryption or protection mechanisms during transmission, which may lead to leakage of sensitive image data. The embodiments of the present application provide a secure data transmission mechanism, which ensures data security during image upload and return through HTTPS and signature verification. At the same time, the process of generating watermarks can be run independently in a private server, further improving data protection capabilities.

[0259] 8. Diversity of application scenarios

[0260] Some existing solutions can only be applied to a single field (such as document watermarks, video watermarks, etc.), and are difficult to expand to other fields. The embodiments of this application are applicable to a variety of business scenarios, including but not limited to:

[0261] Image copyright protection: Dynamically generate watermarks to prevent images from being stolen.

[0262] E-commerce platforms: Add brand logos or promotional text to product images.

[0263] Government services: Generate unique identification watermarks for images of certificates, receipts, etc.

[0264] Education: Add anti-counterfeiting watermarks to learning materials or test papers.

[0265] Advertising industry: dynamically generate images with advertising copy.

[0266] Compared with the existing technology, the embodiments of the present application have significant advantages in performance, flexibility, scalability, compatibility, user-friendliness, etc. by combining Node.js, Puppeteer and HTML / CSS technology. It not only overcomes the limitations of traditional technology, but also provides an efficient and practical solution for the field of dynamic image watermark generation, and has broad promotion value and market potential in practical applications.

[0267] like Figure 2 FIG. 1 is a schematic diagram of a structure of a device for generating a picture watermark provided in an embodiment of the present application, including:

[0268] The acquisition module 210 is used to acquire the original image and watermark parameters uploaded by the user, dynamically construct an HTML template file according to the watermark parameters, and generate a CSS style file matching the HTML template file.

[0269] Specifically, the acquisition module 210 is specifically used to acquire the original image and watermark parameters uploaded by the user through the RESTful API, and the watermark parameters include watermark content, font, color, size, transparency, position and layout.

[0270] The loading module 220 is used to start the Chromium browser in the headless mode by using Puppeteer, load the HTML template file and the CSS style file through the Chromium browser, and generate a watermark image.

[0271] Specifically, the loading module 220 is specifically used to load the HTML template file and the CSS style file through the Chromium browser, and render the watermark effect corresponding to the watermark parameters; after the rendering is completed, the page content of the Chromium browser is exported as a picture to generate a watermark picture.

[0272] In this embodiment, the loading module 220 is specifically used to load the HTML template file and the CSS style file through the Chromium browser, simulate the loading of the web page, use the original image as the background, and superimpose the watermark content; save the rendering result as an image through the page.screenshot() method to generate a watermark image.

[0273] The HTML template file is used to describe the structure of the watermark, which includes text content and image content; the CSS style file is used to define the style of the watermark, which includes font, color, size, transparency and rotation angle.

[0274] The generating module 230 is used to perform superposition processing on the watermarked image and the original image to generate a watermarked image.

[0275] Furthermore, the above device further comprises:

[0276] The verification module is used to verify the format of the original file and verify the integrity and validity of the watermark parameters.

[0277] Management module, used to manage Puppeteer's Chromium instances using browser pools, use queues to schedule rendering tasks, and limit the maximum number of tasks per second.

[0278] The embodiment of the present application uses Puppeteer to start the Chromium browser in headless mode to generate a watermark image, which can meet the diverse needs for image watermark styles in complex business scenarios and achieve highly dynamic and configurable watermark styles.

[0279] The embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, each process of the above-mentioned method for generating a picture watermark is implemented, and the same technical effect can be achieved. To avoid repetition, it is not repeated here. The computer-readable storage medium is, for example, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0280] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or 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 device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.

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

[0282] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A method for generating a picture watermark, characterized in that: The following steps are involved: Obtain the original image and watermark parameters uploaded by the user, dynamically construct an HTML template file according to the watermark parameters, and generate a CSS style file matching the HTML template file; Use Puppeteer to start the Chromium browser in headless mode, load the HTML template file and the CSS style file through the Chromium browser, and generate a watermark image; The watermarked image is superimposed on the original image to generate a watermarked image.

2. The method according to claim 1, characterized in that The step of loading the HTML template file and the CSS style file through the Chromium browser to generate a watermark image specifically includes: Loading the HTML template file and the CSS style file through the Chromium browser, and rendering a watermark effect corresponding to the watermark parameters; After the rendering is completed, the page content of the Chromium browser is exported as an image to generate a watermark image.

3. The method according to claim 1, characterized in that The step of loading the HTML template file and the CSS style file through the Chromium browser to generate a watermark image specifically includes: Load the HTML template file and the CSS style file through the Chromium browser, simulate web page loading, use the original image as the background, and overlay the watermark content; The rendering result is saved as an image through the page.screenshot() method to generate a watermark image.

4. The method according to claim 1, characterized in that The HTML template file is used to describe the structure of the watermark, which includes text content and image content; the CSS style file is used to define the style of the watermark, which includes font, color, size, transparency and rotation angle; The obtaining of the original image and watermark parameters uploaded by the user specifically includes: Obtain the original image and watermark parameters uploaded by the user through the RESTful API, the watermark parameters including watermark content, font, color, size, transparency, position and layout; After obtaining the original image and watermark parameters uploaded by the user, the method further includes: The format of the original file is verified to verify the integrity and validity of the watermark parameters.

5. The method according to claim 1, characterized in that Also includes: Use the browser pool to manage Puppeteer's Chromium instance, use the queue to schedule rendering tasks, and limit the maximum number of tasks per second.

6. A device for generating a picture watermark, characterized in that: include: The acquisition module is used to acquire the original image and watermark parameters uploaded by the user, dynamically construct an HTML template file according to the watermark parameters, and generate a CSS style file matching the HTML template file; A loading module is used to start a Chromium browser in headless mode using Puppeteer, load the HTML template file and the CSS style file through the Chromium browser, and generate a watermark image; The generating module is used to superimpose the watermarked image with the original image to generate a watermarked image.

7. The device according to claim 6, characterized in that The loading module is specifically used to load the HTML template file and the CSS style file through the Chromium browser, and render the watermark effect corresponding to the watermark parameters; after the rendering is completed, the page content of the Chromium browser is exported as a picture to generate a watermark picture.

8. The device according to claim 6, characterized in that The loading module is specifically used to load the HTML template file and the CSS style file through the Chromium browser, simulate web page loading, use the original image as the background, and overlay the watermark content; save the rendering result as an image through the page.screenshot() method to generate a watermark image.

9. The device according to claim 6, characterized in that The HTML template file is used to describe the structure of the watermark, which includes text content and image content; the CSS style file is used to define the style of the watermark, which includes font, color, size, transparency and rotation angle; The acquisition module is specifically used to acquire the original image and watermark parameters uploaded by the user through the RESTful API, and the watermark parameters include watermark content, font, color, size, transparency, position and layout; The device further comprises: The verification module is used to verify the format of the original file and verify the integrity and validity of the watermark parameters.

10. The device according to claim 6, characterized in that Also includes: Management module, used to manage Puppeteer's Chromium instances using browser pools, use queues to schedule rendering tasks, and limit the maximum number of tasks per second.

Images