watermark-js-plus 0.0.1

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

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

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

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

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

@@ -0,0 +1,19 @@
+---
+layout: doc
+---
+
+# 这是什么?
+这是一个基于 *canvas* 画布的水印库，作用于浏览器中。
+
+## 功能
+- 创建水印和暗水印
+- 支持文本、多行文本、图片、富文本
+- 支持监听DOM改动行为，可防止水印被手动删除
+- 支持TS
+- 丰富的配置项
+
+## 浏览器兼容性
+
+| ![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/zh/index.md

@@ -0,0 +1,33 @@
+---
+layout: home
+sidebar: false
+title: watermark-js-plus.js
+titleTemplate: Watermark
+
+hero:
+  name: watermark-js-plus
+  text: 高级的水印插件
+  tagline: 简易、强大、高性能。
+  image:
+    src: /logo.png
+    alt: watermark-js-plus
+  actions:
+    - theme: brand
+      text: 开始 👆
+      link: /zh/guide/getting-started
+    - theme: alt
+      text: 在 GitHub 上查看
+      link: https://github.com/zhensherlock/watermark-js-plus
+
+features:
+  - icon: 🛠️
+    title: 丰富的功能
+    details: 支持文本、多行文本、图片、富文本和暗水印。
+  - icon: 🔑
+    title: 完全类型化的API
+    details: 灵活的 API 和完整的 TypeScript 类型。
+  - icon: 📦
+    title: 极致轻量化
+    details: 大小只有 2kb 左右，你甚至可能忘记它的存在！
+---
+

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "watermark-js-plus",
+  "version": "0.0.1",
+  "description": "watermark for the browser",
+  "main": "lib/watermark.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepare": "husky install",
+    "lint": "npx eslint \"src/*.{ts,js}\"",
+    "dev": "concurrently \"npm run src:dev\" \"npm run docs:dev\"",
+    "src:dev": "rollup -c --watch",
+    "build": "rollup -c --environment NODE_ENV:production && rollup -c",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 -n changelog-option.cjs",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs",
+    "lint-changelog": "concurrently \"npm run lint\" \"npm run changelog\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zhensherlock/watermark-js-plus.git"
+  },
+  "author": "zhensherlock",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/zhensherlock/watermark-js-plus/issues"
+  },
+  "homepage": "https://zhensherlock.github.io/watermark-js-plus/",
+  "keywords": [
+    "watermark",
+    "canvas",
+    "水印",
+    "暗水印",
+    "盲水印",
+    "数据水印",
+    "防删除水印",
+    "解密水印"
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@element-plus/icons-vue": "^2.0.10",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^23.0.3",
+    "@rollup/plugin-eslint": "^9.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
+    "@rollup/plugin-terser": "^0.1.0",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@types/markdown-it": "^12.2.3",
+    "@typescript-eslint/parser": "^5.45.0",
+    "@vue/theme": "^1.3.0",
+    "concurrently": "^7.6.0",
+    "conventional-changelog-angular": "^5.0.13",
+    "conventional-changelog-cli": "^2.2.2",
+    "core-js": "^3.26.1",
+    "element-plus": "^2.2.26",
+    "eslint": "^8.29.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-semistandard": "^17.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "husky": "^8.0.2",
+    "lint-staged": "^13.1.0",
+    "markdown-it": "^13.0.1",
+    "rollup": "^3.5.1",
+    "rollup-plugin-filesize": "^9.1.2",
+    "rollup-plugin-your-function": "^0.4.3",
+    "terser": "^5.16.1",
+    "typescript": "^4.9.3",
+    "unplugin-element-plus": "^0.4.1",
+    "vitepress": "^1.0.0-alpha.29"
+  }
+}