Webpage watermark

Step 1: Download the webpage watermark SDK

1. Log on to the Workplace Security console.

2. In the left-side navigation pane, choose Digital Watermarking > Embedding Service.

3. On the Embedding Service page, find the webpage watermark and click Download SDK in the Actions column.

   Download the webpage watermark SDK package to your local machine. Currently, only the Java language is supported.

   The downloaded SDK package contains the following files:

   • watermark-puretransparent-v1.0.9.jar: The SDK JAR package for embedding watermarks. You need to add it to your Maven repository.

   • pureTransparentDemo: A demo of the watermark feature that you can use for testing.

4. Click the icon in the AK/SK Information column to copy the AK and SK, and then save them locally.

Step 2: Integrate the SDK

1. Add the JAR package dependency (Maven).

   mvn install:install-file  -Dfile=watermark-puretransparent-v1.0.9.jar  -DgroupId=com.aliyun.security.sase -DartifactId=watermark-puretransparent  -Dversion=v1.0.9  -Dpackaging=jar

   <dependency>
       <groupId>com.aliyun.security.sase</groupId>
       <artifactId>watermark-puretransparent</artifactId>
       <version>v1.0.9</version>
       <scope>compile</scope>
   </dependency>
   <dependency>
       <groupId>net.java.dev.jna</groupId>
       <artifactId>jna</artifactId>
       <version>5.13.0</version>
   </dependency>

2. Make an API call to generate a watermark image.

   1. Initialize the AK and SK.

      /**
       * Initialize the AK and SK.
       * @param appKey The AccessKey ID.
       * @param secret The AccessKey secret.
       * @param useLocalConfig Specifies whether to use a local configuration. 0: remote configuration (requires an internet connection), 1: local configuration.
       */
      WaterMarkPNGUtils.init(appKey, secret,useLocalConfig);

   2. Generate a watermark image.

      • Method 1: Generate a watermark image and output it to a file.

      ParamsFile paramsFile = new ParamsFile();
      // The watermark content, a decimal string like "10012". Its size is limited by the configuration. If not configured, the value can range from 1 to 4294967295.
      paramsFile.setWatermarkbitsStr(watermarkbitsStr);
      // The width.
      paramsFile.setWidth(width);
      // The height.
      paramsFile.setHeight(height);
      // The transparency, with a value range of [1, 255]. For service-based scenarios, we recommend setting this to 255 and controlling the transparency during rendering to reduce server load.
      paramsFile.setAlpha(alpha);
      // Set to 0 for webpage and app watermarks, and 1 for screen watermarks.
      paramsFile.setH_idx(h_idx);
      // The scale.
      paramsFile.setScale(scale);
      // The path of the destination file.
      paramsFile.setDestFilePath(dest);
      /**
       * Generate a watermark file.
       * @param baseParam
       * @return
       * @throws PureTransparentException with an error code and message. For more information, see the "Error codes" section.
       */
      WaterMarkPNGUtils.waterMarkPngFile(paramsFile);

      • Method 2: Generate a watermark image into a byte array.

        // The watermark content, a decimal string like "10012". Its size is limited by the configuration. If not configured, the value can range from 1 to 4294967295.
        paramsBytes.setWatermarkbitsStr(watermarkbitsStr);
        // The width.
        paramsBytes.setWidth(width);
        // The height.
        paramsBytes.setHeight(height);
        // The transparency, with a value range of [1, 255]. For service-based scenarios, we recommend setting this to 255 and controlling the transparency during rendering to reduce server load.
        paramsBytes.setAlpha(alpha);
        // Set to 0 for webpage and app watermarks, and 1 for screen watermarks.
        paramsBytes.setH_idx(h_idx);
        // The scale.
        paramsBytes.setScale(scale);
        /**
         * Generate a watermark file.
         * @param baseParam
         * @return
         * @throws PureTransparentException with an error code and message. For more information, see the "Error codes" section.
         */
        byte[] destFileBytes =  WaterMarkPNGUtils.waterMarkPngFile(paramsBytes);
        System.out.println("destFileBytes len "+destFileBytes.length);

Step 3: Embed the transparent watermark image

1. In the HTML file, import the watermark file (wm.min.js) in the <head></head> section.

   <script src="https://g.alicdn.com/csfe/yd-watermark-loader/1.1.4/wm.min.js"></script>

2. Add the following code at the end of the <body></body> section in the HTML file.

   After you add the code, the HTML file contains the visible and invisible watermarks that you configured. When you open the HTML file in a browser, the visible watermark appears, and the invisible watermark remains hidden.

   <script>
             // Calling the method below renders the visible watermark.
           window.YD_WATERMARK.render({
               horizontalSpace: 300, // Horizontal spacing between visible watermarks in pixels.
               verticalSpace: 300, // Vertical spacing between visible watermarks in pixels.
               opacity: 1, // Opacity of the visible watermark. The value ranges from 0 to 1.
               rotateDegree: 30, //  Rotation angle. The value ranges from -180 to 180.
               fontColor: "#ff0000", // Text color in RGB format.
               rows: ["<Account Name>", "<Email>"], // Multi-line visible watermark text.
           })
           // Calling the method below renders the invisible watermark.
           window.YD_WATERMARK.renderInvisible({
               imgSrc: "URL of the transparent watermark base image", // The public URL of the generated transparent watermark image.
               opacity: 8 // Opacity of the invisible watermark, from 1 to 255. Recommended: 8 to 10.
           })
       </script>

Error codes

Step 1: Create an extraction task

1. Log on to the Workplace Security console.

2. In the left-side navigation pane, choose Digital Watermarking > Extraction Service.

3. Click Create Extraction Task. In the Create Extraction Task panel, set the following parameters for the extraction task.

   Parameter	Description
   Watermark Version	Select the version you purchased.
   Watermark Type	Select webpage watermark.
   Embedded Watermark Size	Set the bit width of the watermark content. This must match the bit width used when generating the watermark image (default is 32-bit).
   Upload file for Watermark Extraction	Follow the on-screen instructions to upload the leaked file.

4. Click OK.

   After the task is created, its information appears on the Extraction Service page.

Step 2: View the extraction result

After the extraction task is complete, view the result to get the watermark content.

1. On the Extraction Service page, click Show in the Extract Information column.

2. The expanded information shows the extracted watermark content, which is a decimal number.

   The expanded information also includes the watermark content type field (for example, a base64-encoded string) and its corresponding watermark content value.