watermark-js-plus 0.0.2 → 0.0.4

package/docs/zh/config/index.md

@@ -1,178 +0,0 @@
----
-layout: doc
----
-# 基础配置项
-
-## width
-
-- **Type:** `number`
-- **Default:** `300`
-
-单个水印的宽度。
-
-## height
-
-- **Type:** `number`
-- **Default:** `300`
-
-单个水印的高度。
-
-## rotate
-
-- **Type:** `number`
-- **Default:** `45`
-
-水印旋转角度
-
-以文本的中心为原点旋转。
-
-## contentType
-
-- **Type:** `string`
-- **Default:** `'text'`
-- **available values**: `'text' | 'image' | 'multi-line-text' | 'rich-text'`
-
-水印内容类型。
-
-## content
-
-- **Type:** `string`
-- **Default:** `'hello watermark-js-plus'`
-
-水印内容。
-
-## imageWidth
-
-- **Type:** `number`
-- **Default:** `0`
-
-水印图像宽度。
-
-## imageHeight
-
-- **Type:** `number`
-- **Default:** `0`
-
-水印图像高度。
-
-## lineHeight
-
-- **Type:** `number`
-- **Default:** `30`
-
-水印内容行高。
-
-## zIndex
-
-- **Type:** `number`
-- **Default:** `10000`
-
-z-index
-
-## backgroundPosition
-
-- **Type:** `string`
-- **Default:** `'0 0, 0 0'`
-
-background-position
-
-## fontSize
-
-- **Type:** `number`
-- **Default:** `20`
-
-水印内容的字体大小。
-
-## fontFamily
-
-- **Type:** `string`
-- **Default:** `'sans-serif'`
-
-水印内容的字体。
-
-## textAlign
-
-- **Type:** `string`
-- **Default:** `'center'`
-- **available values**: `'center' | 'left' | 'right'`
-
-水印内容水平对齐方式。
-
-## textBaseline
-
-- **Type:** `string`
-- **Default:** `'middle'`
-- **available values**: `'top' | 'bottom' | 'middle'`
-
-水印内容基准线。
-
-## fontColor
-
-- **Type:** `string`
-- **Default:** `'#000'`
-
-水印内容字体颜色。
-
-## globalAlpha
-
-- **Type:** `number`
-- **Default:** `0.5`
-
-水印的透明度。
-
-## fontWeight
-
-- **Type:** `string`
-- **Default:** `'normal'`
-
-水印内容字体权重。
-
-## mode
-
-- **Type:** `string`
-- **Default:** `'default'`
-- **available values**: `'default' | 'blind'`
-
-水印模式。
-
-## mutationObserve
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-启用侦听水印dom更改。
-
-## unique
-
-- **Type:** `boolean`
-- **Default:** `true`
-
-不能重复添加水印。
-
-## parent
-
-- **Type:** `Element | string`
-- **Default:** `'body'`
-
-水印的容器。
-
-## onSuccess
-
-- **Type:** `Function`
-- **Default:** `() => {}`
-
-水印添加成功的回调事件。
-
-## onBeforeDestroy
-
-- **Type:** `Function`
-- **Default:** `() => {}`
-
-水印删除前的回调事件。
-
-## onDestroyed
-
-- **Type:** `Function`
-- **Default:** `() => {}`
-
-水印删除后的回调事件。

package/docs/zh/guide/blink-watermark.md

@@ -1,288 +0,0 @@
----
-layout: doc
----
-# 暗水印
-
-<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('');
-
-// 文本暗水印
-const textBlindWatermark = new wm.BlindWatermark({
-  content: 'hello my watermark',
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '文本暗水印添加成功！',
-      type: 'success'
-    });
-  }
-});
-const handleAddTextBlindWatermark = () => {
-  if (isDark) {
-    textBlindWatermark.options.fontColor = '#fff'
-  }
-  textBlindWatermark.create();
-};
-const handleRemoveTextBlindWatermark = () => {
-  textBlindWatermark.destroy();
-};
-
-// 多行水印
-const multiLineTextBlindWatermark = new wm.BlindWatermark({
-  contentType: 'multi-line-text',
-  content: 'hello my watermark watermark',
-  fontSize: 30,
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '多行文本暗水印添加成功！',
-      type: 'success'
-    });
-  }
-});
-const handleAddMultiLineTextBlindWatermark = () => {
-  if (isDark) {
-    multiLineTextBlindWatermark.options.fontColor = '#fff'
-  }
-  multiLineTextBlindWatermark.create();
-};
-const handleRemoveMultiLineTextBlindWatermark = () => {
-  multiLineTextBlindWatermark.destroy();
-};
-
-// 图片暗水印
-const imageBlindWatermark = new wm.BlindWatermark({
-  contentType: 'image',
-  image: 'http://upic-service.test.upcdn.net/uPic/github-JxMIKf.png',
-  imageWidth: 200,
-  // imageHeight: 20,
-  width: 300,
-  height: 300,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '图片暗水印添加成功！',
-      type: 'success'
-    });
-  }
-});
-const handleAddImageBlindWatermark = () => {
-  imageBlindWatermark.create();
-};
-const handleRemoveImageBlindWatermark = () => {
-  imageBlindWatermark.destroy();
-};
-
-// 富文本水印
-const richTextBlindWatermark = new wm.BlindWatermark({
-  contentType: 'rich-text',
-  content: '<div style="background: #ccc;">富文本暗水印 <span style="color: #f00">good</span></div>',
-  width: 300,
-  height: 300,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '富文本暗水印添加成功！',
-      type: 'success'
-    });
-  }
-});
-const handleAddRichTextBlindWatermark = () => {
-  richTextBlindWatermark.create();
-};
-const handleRemoveRichTextBlindWatermark = () => {
-  richTextBlindWatermark.destroy();
-};
-
-// 支持暗黑模式单行文本暗水印
-const textBlindWatermarkSupportDark = new wm.BlindWatermark({
-  content: 'hello my watermark',
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '支持暗黑模式单行文本暗水印添加成功！',
-      type: 'success'
-    });
-  }
-});
-const handleSupportDarkAddTextBlindWatermark = () => {
-  textBlindWatermarkSupportDark.create();
-};
-const handleSupportDarkRemoveTextBlindWatermark = () => {
-  textBlindWatermarkSupportDark.destroy();
-};
-
-// 解析暗水印
-const handleSuccess = (uploadFile) => {
-  wm.BlindWatermark.decode({
-    ...(isDark ? {
-      compositeOperation: 'overlay',
-      fillColor: '#fff',
-    } : {}),
-    url: uploadFile.url,
-    onSuccess: (imageBase64) => {
-      decodeBlindImage.value = imageBase64
-    }
-  });
-}
-</script>
-
-## 文本暗水印
-
-```js
-import wm from 'watermark-js-plus' // 引入水印插件
-
-const watermark = new wm.BlindWatermark({
-  content: 'hello my watermark',
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '文本暗水印添加成功！',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // 添加水印
-
-watermark.destroy() // 删除水印
-```
-<el-space>
-  <VPButton text="添加文本暗水印" @click="handleAddTextBlindWatermark"></VPButton>
-  <VPButton text="删除文本暗水印" @click="handleRemoveTextBlindWatermark"></VPButton>
-</el-space>
-
-## 多行文本暗水印
-
-```js
-import wm from 'watermark-js-plus' // 引入水印插件
-
-const watermark = new wm.BlindWatermark({
-  contentType: 'multi-line-text',
-  content: 'hello my watermark watermark',
-  fontSize: 30,
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '多行文本暗水印添加成功！',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // 添加水印
-
-watermark.destroy() // 删除水印
-```
-<el-space>
-  <VPButton text="添加多行文本暗水印" @click="handleAddMultiLineTextBlindWatermark"></VPButton>
-  <VPButton text="删除多行文本暗水印" @click="handleRemoveMultiLineTextBlindWatermark"></VPButton>
-</el-space>
-
-## 图片暗水印
-
-```js
-import wm from 'watermark-js-plus' // 引入水印插件
-
-const watermark = new wm.BlindWatermark({
-  contentType: 'image',
-  content: 'http://upic-service.test.upcdn.net/uPic/github-JxMIKf.png',
-  width: 300,
-  height: 300,
-  imageWidth: 100, // 图片宽度
-  // imageHeight: 20, // 图片高度
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '图片暗水印添加成功！',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // 添加水印
-
-watermark.destroy() // 删除水印
-```
-<el-space>
-  <VPButton text="添加图片暗水印" @click="handleAddImageBlindWatermark"></VPButton>
-  <VPButton text="删除图片暗水印" @click="handleRemoveImageBlindWatermark"></VPButton>
-</el-space>
-
-## 富文本水印
-
-```js
-import wm from 'watermark-js-plus' // 引入水印插件
-
-const watermark = new wm.BlindWatermark({
-  contentType: 'rich-text',
-  content: '<div style="background: #ccc;">富文本暗水印 <span style="color: #f00">good</span></div>',
-  width: 300,
-  height: 300,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '富文本暗水印添加成功！',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // 添加水印
-
-watermark.destroy() // 删除水印
-```
-<el-space>
-  <VPButton text="添加富文本暗水印" @click="handleAddRichTextBlindWatermark"></VPButton>
-  <VPButton text="删除富文本暗水印" @click="handleRemoveRichTextBlindWatermark"></VPButton>
-</el-space>
-
-
-
-## 解析暗水印
-
-```js
-import wm from 'watermark-js-plus' // 引入水印插件
-
-wm.BlindWatermark.decode({
-  url: uploadFile.url, // 需要解析暗水印图片的URL
-  onSuccess: (imageBase64) => { // 解析成功后的回调事件，返回的是解析后图片的base64
-  }
-});
-```
-
-<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/zh/guide/getting-started.md

@@ -1,48 +0,0 @@
----
-layout: doc
----
-
-# 开始
-
-## 安装
-
-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>)
-
-[//]: # (```)

package/docs/zh/guide/watermark.md

@@ -1,213 +0,0 @@
----
-layout: doc
----
-# 明水印
-
-<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();
-
-// 文本水印
-const textWatermark = new wm.Watermark({
-  content: 'hello my watermark',
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '文本水印添加成功！',
-      type: 'success'
-    });
-  }
-});
-const handleAddTextWatermark = () => {
-  if (isDark.value) {
-    textWatermark.options.fontColor = '#fff'
-  }
-  textWatermark.create();
-};
-const handleRemoveTextWatermark = () => {
-  textWatermark.destroy();
-};
-
-// 多行文本水印
-const multiLineTextWatermark = 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: '多行文本水印添加成功！',
-      type: 'success'
-    });
-  }
-});
-const handleAddMultiLineTextWatermark = () => {
-  if (isDark.value) {
-    multiLineTextWatermark.options.fontColor = '#fff'
-  }
-  multiLineTextWatermark.create();
-};
-const handleRemoveMultiLineTextWatermark = () => {
-  multiLineTextWatermark.destroy();
-};
-
-// 图片水印
-const imageWatermark = new wm.Watermark({
-  contentType: 'image',
-  image: 'http://upic-service.test.upcdn.net/uPic/github-JxMIKf.png',
-  imageWidth: 200,
-  // imageHeight: 20,
-  width: 300,
-  height: 300,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '图片水印添加成功！',
-      type: 'success'
-    });
-  }
-});
-const handleAddImageWatermark = () => {
-  imageWatermark.create();
-};
-const handleRemoveImageWatermark = () => {
-  imageWatermark.destroy();
-};
-
-// 富文本水印
-const richTextWatermark = new wm.Watermark({
-  contentType: 'rich-text',
-  content: '<div style="background: #ccc;">富文本水印 <span style="color: #f00">good</span></div>',
-  width: 300,
-  height: 300,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '富文本水印添加成功！',
-      type: 'success'
-    });
-  }
-});
-const handleAddRichTextWatermark = () => {
-  richTextWatermark.create();
-};
-const handleRemoveRichTextWatermark = () => {
-  richTextWatermark.destroy();
-};
-</script>
-
-## 文本水印
-
-```js
-import wm from 'watermark-js-plus' // 引入水印插件
-
-const watermark = new wm.Watermark({
-  content: 'hello my watermark',
-  width: 200,
-  height: 200,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '文本水印添加成功！',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // 添加水印
-
-watermark.destroy() // 删除水印
-```
-<el-space>
-  <VPButton text="添加文本水印" @click="handleAddTextWatermark"></VPButton>
-  <VPButton text="删除文本水印" @click="handleRemoveTextWatermark"></VPButton>
-</el-space>
-
-## 多行文本水印
-
-```js
-import wm from 'watermark-js-plus' // 引入水印插件
-
-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: '多行文本水印添加成功！',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // 添加水印
-
-watermark.destroy() // 删除水印
-```
-<el-space>
-  <VPButton text="添加多行文本水印" @click="handleAddMultiLineTextWatermark"></VPButton>
-  <VPButton text="删除多行文本水印" @click="handleRemoveMultiLineTextWatermark"></VPButton>
-</el-space>
-
-## 图片水印
-
-```js
-import wm from 'watermark-js-plus' // 引入水印插件
-
-const watermark = new wm.Watermark({
-  contentType: 'image',
-  content: 'http://upic-service.test.upcdn.net/uPic/github-JxMIKf.png',
-  width: 300,
-  height: 300,
-  imageWidth: 100, // 图片宽度
-  // imageHeight: 20, // 图片高度
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '图片水印添加成功！',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // 添加水印
-
-watermark.destroy() // 删除水印
-```
-<el-space>
-  <VPButton text="添加图片水印" @click="handleAddImageWatermark"></VPButton>
-  <VPButton text="删除图片水印" @click="handleRemoveImageWatermark"></VPButton>
-</el-space>
-
-## 富文本水印
-
-```js
-import wm from 'watermark-js-plus' // 引入水印插件
-
-const watermark = new wm.Watermark({
-  contentType: 'rich-text',
-  content: '<div style="background: #ccc;">富文本水印超级 <span style="color: #f00">棒</span></div>',
-  width: 300,
-  height: 300,
-  onSuccess: () => {
-    app.appContext.config.globalProperties.$message({
-      message: '富文本水印添加成功！',
-      type: 'success'
-    });
-  }
-})
-
-watermark.create() // 添加水印
-
-watermark.destroy() // 删除水印
-```
-<el-space>
-  <VPButton text="添加富文本水印" @click="handleAddRichTextWatermark"></VPButton>
-  <VPButton text="删除富文本水印" @click="handleRemoveRichTextWatermark"></VPButton>
-</el-space>