README-en.md

English | 简体中文

Other Versions：GitHubTags

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/l-watermark@2.0.6/dist/l-watermark.umd.js"></script>

3 Demo

3.1 Add watermarks to webpage

3.1.1 Full screen text watermark

WaterMark.page({
  targe: 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({
  targe: 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

---

Options	Default	Explain	Type	Necessary
target	document.body	the element to be watermarked	HTMLElement	false
containerEl	document.body	same as "target", not recommended after v2.0.6	HTMLElement	false
text	Demo Text	watermark text (conflicts with image)	string	false
image		watermark image (conflicts with text)	string(img.src)	false
color	"rgba(0, 0, 0, 0.15)"	color of text	string	false
fontSize	24	font size of text	number|string	false
zIndex	"10000"	css: z-index	number|string	false
cSpace	0	the crosswise spacing between individual watermarks	number|string	false
vSpace	0	the vertical spacing between individual watermarks	number|string	false

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

---

Options	Default	Explain	Type	Necessary
target		the target to watermark	HTMLImageElement|string(img.src)	true
text	"Demo Text"	watermark text (conflicts with image)	string	false
image		watermark image (conflicts with text)	string(img.src)	false
imageWidth		the width of the image	number|string	false
imageHeight		the width of the height	number|string	false
secret	false	whether to add a hidden watermark	boolean	false
color	"rgba(0, 0, 0, 0.15)"	color of text	string	false
fontSize	24	font size of text	number|string	false
position	"repeat"	the location of the watermark (default covered with target, other options is add a watermark at the specified location)	string(repeat |center |bottomRight |bottomLeft |topLeft |topRight)	false

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})