watermark-js-plus 0.0.2 → 0.0.3

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>

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

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

@@ -1,33 +0,0 @@
----
-layout: home
-sidebar: false
-title: watermark-js-plus.js
-titleTemplate: Watermark
-
-hero:
-  name: watermark-js-plus
-  text: 高级的水印插件
-  tagline: 简易、强大、高性能。
-  image:
-    src: /hero-image.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/rollup.config.mjs

@@ -1,40 +0,0 @@
-import filesize from 'rollup-plugin-filesize'
-import babel from '@rollup/plugin-babel'
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import eslint from '@rollup/plugin-eslint'
-// import terser from './tools/terser.js'
-import terser from '@rollup/plugin-terser'
-import typescript from '@rollup/plugin-typescript'
-
-export default {
-  input: 'src/index.ts',
-  output: [
-    {
-      file: 'dist/watermark.js',
-      format: 'umd',
-      exports: 'default',
-      name: 'watermark',
-    },
-    {
-      file: 'dist/watermark.min.js',
-      format: 'umd',
-      exports: 'default',
-      name: 'watermark',
-      plugins: [terser()]
-    }
-  ],
-  plugins: [
-    typescript(),
-    eslint({
-      throwOnError: true,
-      throwOnWarning: true,
-      include: ['src/**'],
-      exclude: ['node_modules/**']
-    }),
-    resolve(),
-    commonjs(),
-    filesize(),
-    babel({ babelHelpers: 'runtime', exclude: ['node_modules/**'] })
-  ]
-}

package/src/blind.ts

@@ -1,43 +0,0 @@
-import Watermark from './watermark'
-import { CreateWatermarkModeEnum, DecodeBlindWatermark, DecodeBlindWatermarkModeEnum, WatermarkOptions } from './types'
-import { convertImage, isFunction } from './utils'
-
-export default class BlindWatermark extends Watermark {
-  constructor (props: Partial<WatermarkOptions> = {}) {
-    props.globalAlpha = 0.005
-    props.mode = CreateWatermarkModeEnum.blind
-    super(props)
-  }
-
-  static decode (props: Partial<DecodeBlindWatermark>) {
-    const options = Object.assign({
-      url: '',
-      fillColor: '#000',
-      compositeOperation: 'color-burn',
-      mode: DecodeBlindWatermarkModeEnum.canvas
-    }, props)
-    if (!options.url) {
-      return
-    }
-    if (options.mode === DecodeBlindWatermarkModeEnum.canvas) {
-      const img = new Image()
-      img.src = options.url
-      img.onload = () => {
-        const { width, height } = img
-        const canvas = Watermark.createCanvas(width, height)
-        const ctx = canvas.getContext('2d')
-        if (ctx === null) {
-          throw new Error('get context error')
-        }
-        ctx.drawImage(img, 0, 0, width, height)
-        ctx.globalCompositeOperation = options.compositeOperation as any
-        ctx.fillStyle = options.fillColor
-        ctx.fillRect(0, 0, width, height)
-        const resultImage = convertImage(canvas)
-        if (options.onSuccess && isFunction(options.onSuccess)) {
-          options.onSuccess?.(resultImage)
-        }
-      }
-    }
-  }
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-import Watermark from './watermark'
-import BlindWatermark from './blind'
-
-export default {
-  Watermark,
-  BlindWatermark
-}