English | 简体中文

1. What is l-watermark？

l-watermark is a web watermark SDK based on TS, which contains:

• Can cover more than scene watermarking method
  1. Add text/picture watermark to webpage
  2. Add text/picture watermark to picture
  3. Add a 'hidden watermark' to the picture
  4. Decrypt hidden watermark images
• Guard the watermark from being tampered with and deleted
• Provides a variety of callback functions
  1. onchange: a callback when a user attempts to tamper with or delete a watermark, at which point you get the user ID and report it to the server
  2. onerror: the callback when the watermark failed to be added, you can see why the watermark failed to be added
  3. success: you can get the watermarked image base64 as a callback when the watermark is successfully added
• Custom watermark style
  1. Customize color, font size, hierarchy, spacing, transparency, rotation angle, etc
  2. Customize the watermark position in the picture: full, middle, upper left corner, lower right corner, etc

2. Install

2.1 npm

npm install l-watermark
import WaterMark from "l-watermark"

2.2 CDN

You can get the latest SDK at unpkg.com/l-watermark, or you can specify @x.x.x'to get a specific version of the SDK, and then import it at the appropriate location

<script src="https://unpkg.com/[email protected]/dist/l-watermark.umd.js"></script>

3 Demo

3.1 Add watermarks to webpage

3.1.1 Full screen text watermark

WaterMark.page({
  containerEl: document.body,
  text: "Internal Data",
  color: "rgba(0, 0, 0, 0.4)",
  fontSize: 24
})

3.1.2 Partial area of the image watermark

WaterMark.page({
  containerEl: document.getElementById("hello_world"),
  image: "https://cdn.jsdelivr.net/gh/CleverLiurx/image_repo/glass15-wm.png",
  cSpace: 20,
  vSpace: 50
})

3.2 Add watermarks to picture

3.2.1 Text watermarking

WaterMark.image({
  target: document.getElementById('demo-image'),
  text: 'Angelababy',
  cSpace: 20,
  color: 'rgba(0,0,0,0.6)',
  fontSize: 20,
})

3.2.2 Image watermarking

WaterMark.image({
  target: document.getElementById('demo-image'),
  image: "https://cdn.jsdelivr.net/gh/CleverLiurx/image_repo/glass15-wm.png",
  cSpace: 20,
  vSpace: 20,
  imageWidth: 60,
  imageHeight: 40
})

3.2.3 Adds a watermark at the specified location

// Add text watermark in the lower right corner of the photo
WaterMark.image({
  target: document.getElementById('demo-image'),
  position: "bottomRight",
  text: '@ GitHub - CleverLiurx',
  color: 'rgba(255, 0, 0, 1)',
  fontSize: 20,
  cSpace: 20,
  vSpace: 10,
})

// Add the image watermark to the top left corner of the photo
WaterMark.image({
  target: document.getElementById('demo-image'),
  position: "topLeft",
  image: "https://cdn.jsdelivr.net/gh/CleverLiurx/image_repo/glass15-wm.png",
  imageWidth: 100,
  imageHeight: 60,
  cSpace: 20,
  vSpace: 20
})

3.2.4 Get the base64 format of the watermark image

When target is not HTMLImageElement, the page will not change after watermarking, but you can get the base64 watermarked image through the success callback function

WaterMark.image({
  target: "https://cdn.jsdelivr.net/gh/CleverLiurx/image_repo/ab-v1.0.0-demo.png",
  text: 'Angelababy',
  cSpace: 100,
  success: (data) => console.log(data),
})

3.2.5 Encryption/decryption of hidden watermark

To set hidden watermarking, just set secret to true, but this version only supports text mode, not image mode

WaterMark.image({
  target: document.getElementById("demo-image"),
  text: "User Id: 1008611",
  position: 'center',
  secret: true,
})

After adding the hidden watermark, the naked eye will look no different from the original image

However, after the hidden watermark decryption tool is called, the watermark text is displayed

const decodeImage = async () => {
  const imgDom = document.getElementById("demo-image")
  const decodeSrc = await WaterMark.utils.decodeImage(imgDom.src)
  imgDom.src = decodeSrc
}

4. Options

4.1 WaterMark.page(PageOp)

This is the configuration item when the WaterMark.page(PageOp) function is called to add a watermark to the page

4.2 WaterMark.image(ImageOp)

This is the configuration item when the WaterMark.image(ImageOp) function is called to add a watermark to the picture

NOTE：img.src means that it can be a image path、URL address or base64

4.3 WaterMark.utils

4.3.1 Decrypt hidden watermark images

Receives a string argument (img.src) and returns Promise<string>

const imgBase64 = await WaterMark.utils.decodeImage(url)

4.3.2 Add hidden watermark

Of course you can use the success callback in WaterMarking. image (ImageOp) to get the watermarked image, but we also provide a utility function that let's you add hidden watermark to the image and get its base64, which returns Promise<string>

const imgBase64 = await WaterMark.utils.decodeImage({ImageOp})