watermark-js-plus 0.0.1 → 0.0.3

package/docs/guide/watermark.md

@@ -1,213 +0,0 @@
----
-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

@@ -1,19 +0,0 @@
----
-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

@@ -1,33 +0,0 @@
----
-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

@@ -1,33 +0,0 @@
----
-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

@@ -1,19 +0,0 @@
----
-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

@@ -1,178 +0,0 @@
----
-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.