watermark-js-plus 0.0.1 → 0.0.3

package/docs/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.

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()
-```