watermark-js-plus 0.0.2 → 0.0.4

package/docs/guide/blind-watermark.md

@@ -1,267 +0,0 @@
----
-layout: doc
----
-# Blind watermark
-
-<script setup lang="ts">
-import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';
-import { ref, getCurrentInstance } from 'vue';
-import { Plus } from '@element-plus/icons-vue';
-import wm from '../../src';
-import { useData } from 'vitepress';
-
-const { isDark } = useData();
-const app = getCurrentInstance();
-const decodeBlindImage = ref('');
-
-// text blind watermark
-const textBlindWatermark = new wm.BlindWatermark({
-  content: 'hello my watermark',
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: 'The text blind watermark added successfully!',
-      type: 'success'
-    });
-  }
-});
-const handleAddTextBlindWatermark = () => {
-  if (isDark.value) {
-    textBlindWatermark.options.fontColor = '#fff'
-  }
-  textBlindWatermark.create();
-};
-const handleRemoveTextBlindWatermark = () => {
-  textBlindWatermark.destroy();
-};
-
-// multiline blind text watermark
-const multiLineTextBlindWatermark = new wm.BlindWatermark({
-  contentType: 'multi-line-text',
-  content: 'hello my multiline blind watermark',
-  fontSize: 30,
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: 'The multiline text blind watermark added successfully!',
-      type: 'success'
-    });
-  }
-});
-const handleAddMultiLineTextBlindWatermark = () => {
-  if (isDark.value) {
-    multiLineTextBlindWatermark.options.fontColor = '#fff'
-  }
-  multiLineTextBlindWatermark.create();
-};
-const handleRemoveMultiLineTextBlindWatermark = () => {
-  multiLineTextBlindWatermark.destroy();
-};
-
-// image blind watermark
-const imageBlindWatermark = new wm.BlindWatermark({
-  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 blind watermark added successfully',
-      type: 'success'
-    });
-  }
-});
-const handleAddImageBlindWatermark = () => {
-  imageBlindWatermark.create();
-};
-const handleRemoveImageBlindWatermark = () => {
-  imageBlindWatermark.destroy();
-};
-
-// rich text blind watermark
-const richTextBlindWatermark = new wm.BlindWatermark({
-  contentType: 'rich-text',
-  content: '<div style="background: #ccc;">The watermark is so <span style="color: #f00">good</span>.</div>',
-  width: 300,
-  height: 300,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: 'The rich text blind watermark added successfully!',
-      type: 'success'
-    });
-  }
-});
-const handleAddRichTextBlindWatermark = () => {
-  richTextBlindWatermark.create();
-};
-const handleRemoveRichTextBlindWatermark = () => {
-  richTextBlindWatermark.destroy();
-};
-
-// decode blind watermark
-const handleSuccess = (uploadFile) => {
-  wm.BlindWatermark.decode({
-    ...(isDark.value ? {
-      compositeOperation: 'overlay',
-      fillColor: '#fff',
-    } : {}),
-    url: uploadFile.url,
-    onSuccess: (imageBase64) => {
-      decodeBlindImage.value = imageBase64
-    }
-  });
-}
-</script>
-
-## Text Blind Watermark
-
-```js
-import wm from 'watermark-js-plus' // import watermark plugin
-
-const watermark = new wm.BlindWatermark({
-  content: 'hello my watermark',
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: 'The text blind watermark added successfully!',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // add watermark
-
-watermark.destroy() // remove watermark
-```
-<el-space>
-  <VPButton text="Add Text Blind Watermark" @click="handleAddTextBlindWatermark"></VPButton>
-  <VPButton text="Remove Text Blind Watermark" @click="handleRemoveTextBlindWatermark"></VPButton>
-</el-space>
-
-## Multiline Text Blind Watermark
-
-```js
-import wm from 'watermark-js-plus' // import watermark plugin
-
-const watermark = new wm.BlindWatermark({
-  contentType: 'multi-line-text',
-  content: 'hello my multiline blind watermark',
-  fontSize: 30,
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: 'The multiline text blind watermark added successfully!',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // add watermark
-
-watermark.destroy() // remove watermark
-```
-<el-space>
-  <VPButton text="Add Multiline Text Blind Watermark" @click="handleAddMultiLineTextBlindWatermark"></VPButton>
-  <VPButton text="Remove Multiline Text Blind Watermark" @click="handleRemoveMultiLineTextBlindWatermark"></VPButton>
-</el-space>
-
-## Image Blind Watermark
-
-```js
-import wm from 'watermark-js-plus' // import watermark plugin
-
-const watermark = new wm.BlindWatermark({
-  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 blind watermark added successfully!',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // add watermark
-
-watermark.destroy() // remove watermark
-```
-<el-space>
-  <VPButton text="Add Image Blind Watermark" @click="handleAddImageBlindWatermark"></VPButton>
-  <VPButton text="Remove Image Blind Watermark" @click="handleRemoveImageBlindWatermark"></VPButton>
-</el-space>
-
-## Rich Text Blind Watermark
-
-```js
-import wm from 'watermark-js-plus' // import watermark plugin
-
-const watermark = new wm.BlindWatermark({
-  contentType: 'rich-text',
-  content: '<div style="background: #ccc;">The watermark is so <span style="color: #f00">good</span>.</div>',
-  width: 300,
-  height: 300,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: 'The rich text blind watermark added successfully!',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // add watermark
-
-watermark.destroy() // remove watermark
-```
-<el-space>
-  <VPButton text="Add RichText Blind Watermark" @click="handleAddRichTextBlindWatermark"></VPButton>
-  <VPButton text="Remove Rich Text Blind Watermark" @click="handleRemoveRichTextBlindWatermark"></VPButton>
-</el-space>
-
-## Decode Blind Watermark
-
-```js
-import wm from 'watermark-js-plus' // import watermark plugin
-
-wm.BlindWatermark.decode({
-  url: uploadFile.url, // image url
-  onSuccess: (imageBase64) => { // success callback
-  }
-});
-```
-
-<div>
-  <el-upload
-    list-type="picture-card"
-    accept="image/*"
-    :auto-upload="false"
-    :show-file-list="false"
-    :on-change="handleSuccess"
-  >
-    <el-icon><Plus /></el-icon>
-  </el-upload>
-  <el-image
-    v-if="decodeBlindImage"
-    style="width: 400px; height: 400px;margin-top: 20px;"
-    :src="decodeBlindImage"
-    :preview-src-list="[decodeBlindImage]"
-    fit="cover"
-  />
-</div>
-
-[//]: # (<div style="position: relative;">)
-
-[//]: # (  <div style="position: absolute;top:0;bottom: 0;left: 0;right: 0;mix-blend-mode: color-burn;background: #000;"></div>)
-
-[//]: # (  <img width="200" src="http://upic-service.test.upcdn.net/uPic/iShot_2022-11-28_10.35.29-RP6dBG.png" alt="">)
-
-[//]: # (</div>)

package/docs/guide/getting-started.md

@@ -1,73 +0,0 @@
----
-layout: doc
----
-
-# Getting Started
-
-## Installing
-
-Using npm:
-
-```bash
-$ npm install watermark-js-plus
-```
-
-[//]: # (Using bower:)
-
-[//]: # ()
-[//]: # (```bash)
-
-[//]: # ($ bower install watermark-js-plus)
-
-[//]: # (```)
-
-Using yarn:
-
-```bash
-$ yarn add watermark-js-plus
-```
-
-[//]: # ()
-[//]: # (Using jsDelivr CDN:)
-
-[//]: # ()
-[//]: # (```html)
-
-[//]: # (<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>)
-
-[//]: # (```)
-
-[//]: # ()
-[//]: # (Using unpkg CDN:)
-
-[//]: # ()
-[//]: # (```html)
-
-[//]: # (<script src="https://unpkg.com/axios/dist/axios.min.js"></script>)
-
-[//]: # (```)
-
-## Usage
-
-1. Import watermark plugin
-```ts
-import wm from 'watermark-js-plus' // 引入水印插件
-```
-2. instantiation
-```ts
-const watermark = new wm.Watermark({
-  content: 'hello my watermark',
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: 'text watermark added successfully！',
-      type: 'success'
-    });
-  }
-})
-```
-3. Add a watermark to the web page
-```ts
-watermark.create()
-```

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.value) {
-    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.value) {
-    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: /hero-image.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
----
-# 解析暗水印
-
-## url
-
-- **Type:** `string`
-- **Default:** `''`
-
-解码暗水印图片路径。
-
-## mode
-
-- **Type:** `string`
-- **Default:** `'canvas'`
-- **available values**: `'canvas'`
-
-解码模式。
-
-## 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
----
-# 暗水印
-
-## globalAlpha
-
-- **Type:** `number`
-- **Default:** `0.005`
-
-水印的透明度。
-
-## mode
-
-- **Type:** `string`
-- **Default:** `'blind'`
-- **available values**: `'default' | 'blind'`
-
-水印模式。