watermark-js-plus 0.0.1

package/docs/guide/watermark.md

@@ -0,0 +1,213 @@
+---
+layout: doc
+---
+# Watemark
+
+<script setup lang="ts">
+import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
+import { ref, getCurrentInstance } from 'vue';
+import wm from '../../src';
+import { useData } from 'vitepress';
+
+const { isDark } = useData();
+const decodeBlindImage = ref('');
+const app = getCurrentInstance();
+
+// text watermark
+const textWatermark = new wm.Watermark({
+  content: 'hello my text watermark',
+  width: 200,
+  height: 200,
+  onSuccess: () => {
+    app.appContext.config.globalProperties.$message({
+      message: 'The text watermark added successfully!',
+      type: 'success'
+    });
+  }
+});
+const handleAddTextWatermark = () => {
+  if (isDark) {
+    textWatermark.options.fontColor = '#fff'
+  }
+  textWatermark.create();
+};
+const handleRemoveTextWatermark = () => {
+  textWatermark.destroy();
+};
+
+// multiline text watermark
+const multiLineTextWatermark = new wm.Watermark({
+  contentType: 'multi-line-text',
+  content: 'hello my multi text watermark',
+  fontSize: 30,
+  width: 200,
+  height: 200,
+  onSuccess: () => {
+    app.appContext.config.globalProperties.$message({
+      message: 'The multi text watermark added successfully!',
+      type: 'success'
+    });
+  }
+});
+const handleAddMultiLineTextWatermark = () => {
+  if (isDark) {
+    multiLineTextWatermark.options.fontColor = '#fff'
+  }
+  multiLineTextWatermark.create();
+};
+const handleRemoveMultiLineTextWatermark = () => {
+  multiLineTextWatermark.destroy();
+};
+
+// image watermark
+const imageWatermark = new wm.Watermark({
+  contentType: 'image',
+  image: 'https://cdn.jsdelivr.net/gh/zhensherlock/oss@main/uPic/github-mkWBiK.png',
+  imageWidth: 200,
+  // imageHeight: 20,
+  width: 300,
+  height: 300,
+  onSuccess: () => {
+    app.appContext.config.globalProperties.$message({
+      message: 'The image watermark added successfully!',
+      type: 'success'
+    });
+  }
+});
+const handleAddImageWatermark = () => {
+  imageWatermark.create();
+};
+const handleRemoveImageWatermark = () => {
+  imageWatermark.destroy();
+};
+
+// rich text watermark
+const richTextWatermark = new wm.Watermark({
+  contentType: 'rich-text',
+  content: '<div style="background: #ccc;">The watermark is so <span style="color: #f00">nice</span>.</div>',
+  width: 300,
+  height: 300,
+  onSuccess: () => {
+    app.appContext.config.globalProperties.$message({
+      message: 'The rich text watermark added successfully！',
+      type: 'success'
+    });
+  }
+});
+const handleAddRichTextWatermark = () => {
+  richTextWatermark.create();
+};
+const handleRemoveRichTextWatermark = () => {
+  richTextWatermark.destroy();
+};
+</script>
+
+## Text Watermark
+
+```js
+import wm from 'watermark-js-plus' // import watermark plugin
+
+const watermark = new wm.Watermark({
+  content: 'hello my watermark',
+  width: 200,
+  height: 200,
+  onSuccess: () => {
+    app.appContext.config.globalProperties.$message({
+      message: 'The text watermark added successfully!',
+      type: 'success'
+    });
+  }
+})
+
+watermark.create() // add watermark
+
+watermark.destroy() // remove watermark
+```
+<el-space>
+  <VPButton text="Add Text Watermark" @click="handleAddTextWatermark"></VPButton>
+  <VPButton text="Remove Text Watermark" @click="handleRemoveTextWatermark"></VPButton>
+</el-space>
+
+## Multiline Text Watermark
+
+```js
+import wm from 'watermark-js-plus' // import watermark plugin
+
+const watermark = new wm.Watermark({
+  contentType: 'multi-line-text',
+  content: 'hello my watermark watermark',
+  fontSize: 30,
+  width: 200,
+  height: 200,
+  onSuccess: () => {
+    app.appContext.config.globalProperties.$message({
+      message: 'The multiline text watermark added successfully!',
+      type: 'success'
+    });
+  }
+})
+
+watermark.create() // add watermark
+
+watermark.destroy() // remove watermark
+```
+<el-space>
+  <VPButton text="Add MultiLine Text Watermark" @click="handleAddMultiLineTextWatermark"></VPButton>
+  <VPButton text="Remove MultiLine Text Watermark" @click="handleRemoveMultiLineTextWatermark"></VPButton>
+</el-space>
+
+## Image Watermark
+
+```js
+import wm from 'watermark-js-plus' // import watermark plugin
+
+const watermark = new wm.Watermark({
+  contentType: 'image',
+  content: 'http://upic-service.test.upcdn.net/uPic/github-JxMIKf.png',
+  width: 300,
+  height: 300,
+  imageWidth: 100, // image width
+  // imageHeight: 20, // image height
+  onSuccess: () => {
+    app.appContext.config.globalProperties.$message({
+      message: 'The image watermark added successfully!',
+      type: 'success'
+    });
+  }
+})
+
+watermark.create() // add watermark
+
+watermark.destroy() // remove watermark
+```
+<el-space>
+  <VPButton text="Add Image Watermark" @click="handleAddImageWatermark"></VPButton>
+  <VPButton text="Remove Image Watermark" @click="handleRemoveImageWatermark"></VPButton>
+</el-space>
+
+## Rich Text Watermark
+
+```js
+import wm from 'watermark-js-plus' // import watermark plugin
+
+const watermark = new wm.Watermark({
+  contentType: 'rich-text',
+  content: '<div style="background: #ccc;">Rich text watermark is so <span style="color: #f00">nice</span></div>',
+  width: 300,
+  height: 300,
+  onSuccess: () => {
+    app.appContext.config.globalProperties.$message({
+      message: 'The rich text watermark added successfully!',
+      type: 'success'
+    });
+  }
+})
+
+watermark.create() // add watermark
+
+watermark.destroy() // remove watermark
+```
+<el-space>
+  <VPButton text="Add Rich Text Watermark" @click="handleAddRichTextWatermark"></VPButton>
+  <VPButton text="Remove Rich Text Watermark" @click="handleRemoveRichTextWatermark"></VPButton>
+</el-space>

package/docs/guide/what-is-this.md

@@ -0,0 +1,19 @@
+---
+layout: doc
+---
+
+# What is this?
+This is a canvas-based watermark for browser.
+
+## Features
+- Create watermark and blind watermark
+- Supports text, multi text, image, rich text
+- Watching for DOM changes
+- Supports typescript
+- Rich configuration
+
+## Browser Support
+
+| ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) | ![Opera](https://raw.githubusercontent.com/alrra/browser-logos/main/src/opera/opera_48x48.png) | ![Edge](https://raw.githubusercontent.com/alrra/browser-logos/main/src/edge/edge_48x48.png) | ![IE](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
+|:-------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------:|
+|                                             Latest ✔                                              |                                               Latest ✔                                               |                                             Latest ✔                                              |                                            Latest ✔                                            |                                          Latest ✔                                           |                                                                  11 ✔                                                                   |

package/docs/index.md

@@ -0,0 +1,33 @@
+---
+layout: home
+sidebar: false
+title: watermark-js-plus.js
+titleTemplate: Watermark
+
+hero:
+  name: watermark-js-plus
+  text: Advanced watermark plugin
+  tagline: Simple, powerful, and performant.
+  image:
+    src: /logo.png
+    alt: watermark-js-plus
+  actions:
+    - theme: brand
+      text: Get Started 👆
+      link: /guide/getting-started
+    - theme: alt
+      text: View on GitHub
+      link: https://github.com/zhensherlock/watermark-js-plus
+
+features:
+  - icon: 🛠️
+    title: Rich Features
+    details: Supports text, multi-line text, image and rich text.
+  - icon: 🔑
+    title: Fully Typed APIs
+    details: Flexible programmatic APIs with full TypeScript typing..
+  - icon: 📦
+    title: Extremely light
+    details: weighs ~2kb, you will forget it's even there!
+---
+

package/docs/zh/config/blind-decode.md

@@ -0,0 +1,33 @@
+---
+layout: doc
+---
+# Blind Watermark Decode
+
+## url
+
+- **Type:** `string`
+- **Default:** `''`
+
+Decoding picture path.
+
+## mode
+
+- **Type:** `string`
+- **Default:** `'canvas'`
+- **available values**: `'canvas'`
+
+Mode of decoding.
+
+## fillColor
+
+- **Type:** `string`
+- **Default:** `'#000'`
+
+fill color.
+
+## compositeOperation
+
+- **Type:** `string`
+- **Default:** `'color-burn'`
+
+composite operation.

package/docs/zh/config/blind.md

@@ -0,0 +1,19 @@
+---
+layout: doc
+---
+# Blind Watermark Config
+
+## globalAlpha
+
+- **Type:** `number`
+- **Default:** `0.005`
+
+Transparency of watermark.
+
+## mode
+
+- **Type:** `string`
+- **Default:** `'blind'`
+- **available values**: `'default' | 'blind'`
+
+Watermark mode

package/docs/zh/config/index.md

@@ -0,0 +1,178 @@
+---
+layout: doc
+---
+# Basic Config
+
+## width
+
+- **Type:** `number`
+- **Default:** `300`
+
+A unit of width for a single watermark.
+
+## height
+
+- **Type:** `number`
+- **Default:** `300`
+
+A unit of height for a single watermark.
+
+## rotate
+
+- **Type:** `number`
+- **Default:** `45`
+
+Watermark rotation Angle.
+
+Rotate with the center of the text as the origin.
+
+## contentType
+
+- **Type:** `string`
+- **Default:** `'text'`
+- **available values**: `'text' | 'image' | 'multi-line-text' | 'rich-text'`
+
+Type of watermark content.
+
+## content
+
+- **Type:** `string`
+- **Default:** `'hello watermark-js-plus'`
+
+Watermark content.
+
+## imageWidth
+
+- **Type:** `number`
+- **Default:** `0`
+
+Watermark image width.
+
+## imageHeight
+
+- **Type:** `number`
+- **Default:** `0`
+
+Watermark image height.
+
+## lineHeight
+
+- **Type:** `number`
+- **Default:** `30`
+
+Watermark content line high.
+
+## zIndex
+
+- **Type:** `number`
+- **Default:** `10000`
+
+z-index
+
+## backgroundPosition
+
+- **Type:** `string`
+- **Default:** `'0 0, 0 0'`
+
+background-position
+
+## fontSize
+
+- **Type:** `number`
+- **Default:** `20`
+
+The font size of the watermark content.
+
+## fontFamily
+
+- **Type:** `string`
+- **Default:** `'sans-serif'`
+
+The font family of the watermark content.
+
+## textAlign
+
+- **Type:** `string`
+- **Default:** `'center'`
+- **available values**: `'center' | 'left' | 'right'`
+
+Watermark content horizontal alignment.
+
+## textBaseline
+
+- **Type:** `string`
+- **Default:** `'middle'`
+- **available values**: `'top' | 'bottom' | 'middle'`
+
+Watermark content baseline.
+
+## fontColor
+
+- **Type:** `string`
+- **Default:** `'#000'`
+
+Watermark content font color.
+
+## globalAlpha
+
+- **Type:** `number`
+- **Default:** `0.5`
+
+Transparency of watermark.
+
+## fontWeight
+
+- **Type:** `string`
+- **Default:** `'normal'`
+
+Watermark content font weight.
+
+## mode
+
+- **Type:** `string`
+- **Default:** `'default'`
+- **available values**: `'default' | 'blind'`
+
+Watermark mode
+
+## mutationObserve
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+Enable listening for watermark dom changes.
+
+## unique
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+The watermark cannot be added repeatedly.
+
+## parentElement
+
+- **Type:** `HTMLElement`
+- **Default:** `document.body`
+
+Watermarking container.
+
+## onSuccess
+
+- **Type:** `Function`
+- **Default:** `() => {}`
+
+Watermark added successful callback event.
+
+## onBeforeDestroy
+
+- **Type:** `Function`
+- **Default:** `() => {}`
+
+Watermark delete before callback event.
+
+## onDestroyed
+
+- **Type:** `Function`
+- **Default:** `() => {}`
+
+Watermark deleted after callback event.