watermark-js-plus 0.0.2 → 0.0.4

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
-}

package/src/types/index.ts

@@ -1,69 +0,0 @@
-export enum ContentTypeEnum {
-  text = 'text',
-  image = 'image',
-  multiLineText = 'multi-line-text',
-  richText = 'rich-text'
-}
-export enum TextAlignEnum {
-  center = 'center',
-  left = 'left',
-  right = 'right'
-}
-
-export enum TextBaselineEnum {
-  top = 'top',
-  bottom = 'bottom',
-  middle = 'middle'
-}
-
-export enum CreateWatermarkModeEnum {
-  default = 'default',
-  blind = 'blind'
-}
-
-export enum DecodeBlindWatermarkModeEnum {
-  canvas = 'canvas',
-  html = 'html',
-  svg = 'svg'
-}
-
-export interface WatermarkDom extends HTMLDivElement {
-  __WATERMARK__?: string;
-  __WATERMARK__INSTANCE__?: any;
-}
-
-export interface WatermarkOptions {
-  width: number;
-  height: number;
-  rotate: number;
-  contentType: ContentTypeEnum;
-  content: string;
-  image?: string;
-  imageWidth: number;
-  imageHeight: number;
-  lineHeight: number;
-  zIndex: number;
-  backgroundPosition: string;
-  fontSize: number;
-  fontFamily: string;
-  textAlign: TextAlignEnum; // 对齐方式 center | left | right
-  textBaseline: TextBaselineEnum; // 底部对齐方式 top | bottom | middle
-  fontColor: string;
-  globalAlpha: number;
-  fontWeight: string;
-  mode: CreateWatermarkModeEnum; // 模式 default | blind
-  mutationObserve: boolean;
-  unique: boolean;
-  parent: Element | string;
-  onSuccess: Function;
-  onBeforeDestroy: Function;
-  onDestroyed: Function;
-}
-
-export interface DecodeBlindWatermark {
-  url: string;
-  fillColor: string;
-  compositeOperation: string;
-  mode: DecodeBlindWatermarkModeEnum;
-  onSuccess: Function;
-}

package/src/utils/index.ts

@@ -1,63 +0,0 @@
-import { WatermarkOptions } from '../types'
-
-export const convertImage = (canvas: HTMLCanvasElement): string => {
-  return canvas.toDataURL('image/png', 1)
-}
-
-export const isFunction = (value: Function): boolean => {
-  return typeof value === 'function'
-}
-
-export const createSVGElement = (tagName: string, attrs: {[key: string]: string} = {}, namespaceURI = 'http://www.w3.org/2000/svg'): Element => {
-  const element = document.createElementNS(namespaceURI, tagName)
-  for (const attr in attrs) {
-    element.setAttribute(attr, attrs[attr])
-  }
-  return element
-}
-
-export const getMultiLineData = (ctx: CanvasRenderingContext2D, text: string, maxWidth: number) => {
-  const result = []
-  let str = ''
-  for (let i = 0, len = text.length; i < len; i++) {
-    str += text.charAt(i)
-    if (ctx.measureText(str).width > maxWidth) {
-      result.push(str.substring(0, str.length - 1))
-      str = ''
-      i--
-    }
-  }
-  result.push(str)
-  return result
-}
-
-export const createCustomContentSVG = (ctx: CanvasRenderingContext2D, options: WatermarkOptions): Element => {
-  const svgElement = createSVGElement('svg', {
-    xmlns: 'http://www.w3.org/2000/svg'
-  })
-  const foreignObjectElement = createSVGElement('foreignObject', {
-    width: options.width.toString(),
-    height: options.height.toString()
-  })
-  const bodyElement = document.createElement('div')
-  bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
-  bodyElement.style.cssText = `
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  font: ${ctx.font};
-  color: ${options.fontColor};
-  `
-  bodyElement.innerHTML = options.content
-  foreignObjectElement.appendChild(bodyElement)
-  svgElement.appendChild(foreignObjectElement)
-  return svgElement
-}
-
-export const convertSVGToImage = (svg: Element): string => {
-  const richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23')
-  return `data:image/svg+xml;charset=utf-8,${richContent}`
-}

package/src/watermark.ts

@@ -1,300 +0,0 @@
-import { convertImage, convertSVGToImage, createCustomContentSVG, getMultiLineData } from './utils'
-import {
-  ContentTypeEnum,
-  CreateWatermarkModeEnum,
-  TextAlignEnum,
-  TextBaselineEnum,
-  WatermarkDom,
-  WatermarkOptions
-} from './types'
-
-export default class Watermark {
-  private readonly options: WatermarkOptions
-  private parentElement: Element = document.body
-  private observer?: MutationObserver
-  private parentObserve?: MutationObserver
-  private watermarkDom?: WatermarkDom
-
-  constructor (props: Partial<WatermarkOptions> = {}) {
-    this.options = Object.assign({
-      width: 300,
-      height: 300,
-      rotate: 45,
-      contentType: ContentTypeEnum.text,
-      content: 'hello watermark-js-plus',
-      imageWidth: 0,
-      imageHeight: 0,
-      lineHeight: 30,
-      zIndex: 10000,
-      backgroundPosition: '0 0, 0 0',
-      fontSize: 20,
-      fontFamily: 'sans-serif',
-      textAlign: TextAlignEnum.center, // 对齐方式 center | left | right
-      textBaseline: TextBaselineEnum.middle, // 底部对齐方式 top | bottom | middle
-      fontColor: '#000',
-      globalAlpha: 0.5,
-      fontWeight: 'normal',
-      mode: CreateWatermarkModeEnum.default, // 模式 default | blind
-      mutationObserve: true,
-      unique: true,
-      parent: 'body',
-      onSuccess: () => {},
-      onBeforeDestroy: () => {},
-      onDestroyed: () => {}
-    }, props)
-    if (this.options?.rotate) {
-      this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180)
-    }
-    this.changeParentElement(this.options.parent)
-  }
-
-  static createCanvas (width: number, height: number): HTMLCanvasElement {
-    const ratio = window.devicePixelRatio || 1
-    const canvas = document.createElement('canvas')
-    canvas.width = width * ratio // 实际渲染像素
-    canvas.height = height * ratio // 实际渲染像素
-    canvas.style.width = `${width}px` // 控制显示大小
-    canvas.style.height = `${height}px` // 控制显示大小
-    canvas.getContext('2d')?.setTransform(ratio, 0, 0, ratio, 0, 0)
-    return canvas
-  }
-
-  changeParentElement (parent: Element | string) {
-    if (typeof parent === 'string') {
-      const parentElement = document.querySelector(parent)
-      parentElement && (this.parentElement = parentElement)
-    } else {
-      this.parentElement = parent
-    }
-  }
-
-  async create () {
-    if (!this.validateUnique()) {
-      return
-    }
-
-    if (!this.validateContent()) {
-      return
-    }
-
-    const canvas = await this.draw()
-    const image = convertImage(canvas)
-    this.watermarkDom = document.createElement('div')
-    const watermarkInnerDom = document.createElement('div')
-    this.watermarkDom.__WATERMARK__ = 'watermark'
-    this.watermarkDom.__WATERMARK__INSTANCE__ = this
-    this.watermarkDom.style.cssText = `
-      z-index: ${this.options.zIndex};
-      position: relative;
-    `
-    watermarkInnerDom.style.cssText = `
-      position: fixed;
-      z-index: ${this.options.zIndex};
-      pointer-events: none;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      background-image: url(${image});
-      background-repeat: repeat;
-      background-size: ${this.options.width}px ${this.options.height}px;
-      background-position: ${this.options.backgroundPosition};
-      -webkit-print-color-adjust: exact;
-    `
-    this.watermarkDom.append(watermarkInnerDom)
-    this.parentElement.appendChild(this.watermarkDom)
-
-    if (this.options.mutationObserve) {
-      this.bindMutationObserve()
-    }
-    this.options.onSuccess?.()
-  }
-
-  destroy () {
-    this.options.onBeforeDestroy?.()
-    this.observer?.disconnect()
-    this.parentObserve?.disconnect()
-    this.watermarkDom?.remove()
-    this.options.onDestroyed?.()
-  }
-
-  private validateUnique (): boolean {
-    let result = true
-    if (this.options.unique) {
-      this.parentElement.childNodes.forEach(node => {
-        if (!result) {
-          return
-        }
-        if (Object.hasOwnProperty.call(node, '__WATERMARK__')) {
-          result = false
-          // throw new Error('duplicate watermark error')
-        }
-      })
-    }
-    return result
-  }
-
-  private validateContent (): boolean {
-    switch (this.options.contentType) {
-      case ContentTypeEnum.image:
-        return Object.hasOwnProperty.call(this.options, 'image')
-      case ContentTypeEnum.multiLineText:
-      case ContentTypeEnum.richText:
-      case ContentTypeEnum.text:
-        return this.options.content.length > 0
-    }
-    return false
-  }
-
-  private draw (): Promise<HTMLCanvasElement> {
-    const canvas = Watermark.createCanvas(this.options.width, this.options.height)
-    // document.body?.appendChild(canvas)
-    const ctx = canvas.getContext('2d')
-    if (ctx === null) {
-      throw new Error('get context error')
-    }
-    ctx.font = `${this.options.fontWeight} ${this.options.fontSize}px ${this.options.fontFamily}`
-    ctx.textAlign = this.options.textAlign
-    ctx.textBaseline = this.options.textBaseline
-    ctx.fillStyle = this.options.fontColor
-    ctx.globalAlpha = this.options.globalAlpha
-    return new Promise((resolve) => {
-      switch (this.options.contentType) {
-        case ContentTypeEnum.text:
-          this.drawText(ctx, resolve)
-          break
-        case ContentTypeEnum.image:
-          this.drawImage(ctx, resolve)
-          break
-        case ContentTypeEnum.multiLineText:
-          this.drawMultiLineText(ctx, resolve)
-          break
-        case ContentTypeEnum.richText:
-          this.drawRichText(ctx, resolve)
-          break
-      }
-    })
-  }
-
-  private drawText (ctx: CanvasRenderingContext2D, resolve: Function) {
-    ctx.translate(this.options.width / 2, this.options.height / 2)
-    ctx.rotate(this.options.rotate)
-    ctx.fillText(this.options.content, 0, 0)
-    resolve(ctx.canvas)
-  }
-
-  private drawImage (ctx: CanvasRenderingContext2D, resolve: Function) {
-    const image = new Image()
-    image.setAttribute('crossOrigin', 'Anonymous')
-    image.src = this.options.image as string
-    image.onload = () => {
-      ctx.translate(this.options.width / 2, this.options.height / 2)
-      ctx.rotate(this.options.rotate)
-      const { width: imageWidth, height: imageHeight } = this.getImageRect(image)
-      ctx.drawImage(
-        image,
-        0 - imageWidth / 2,
-        0 - imageHeight / 2,
-        imageWidth,
-        imageHeight
-      )
-      resolve(ctx.canvas)
-    }
-  }
-
-  private drawMultiLineText (ctx: CanvasRenderingContext2D, resolve: Function) {
-    // image.width = this.options.width
-    // image.height = this.options.height
-    // const element = createCustomContentSvg(context, this.options)
-    // image.src = convertSVGToImage(element)
-    // image.onload = () => {
-    //   context.translate(this.options.width / 2, this.options.height / 2)
-    //   context.rotate(this.options.rotate)
-    //   context.drawImage(
-    //     image,
-    //     -this.options.width / 2,
-    //     -this.options.height / 2,
-    //     context.canvas.width,
-    //     context.canvas.height
-    //   )
-    //   resolve(canvas)
-    // }
-    const lines = getMultiLineData(ctx, this.options.content, this.options.width)
-    ctx.translate(this.options.width / 2, this.options.height / 2)
-    ctx.rotate(this.options.rotate)
-    const yOffsetValue = (lines.length - 1) * this.options.lineHeight / 2
-    lines.forEach((txt, index) => {
-      ctx.fillText(txt, 0, this.options.lineHeight * index - yOffsetValue)
-    })
-    resolve(ctx.canvas)
-  }
-
-  private drawRichText (ctx: CanvasRenderingContext2D, resolve: Function) {
-    const image = new Image()
-    image.width = this.options.width
-    image.height = this.options.height
-    const element = createCustomContentSVG(ctx, this.options)
-    image.src = convertSVGToImage(element)
-    image.onload = () => {
-      ctx.translate(this.options.width / 2, this.options.height / 2)
-      ctx.rotate(this.options.rotate)
-      ctx.drawImage(
-        image,
-        -this.options.width / 2,
-        -this.options.height / 2,
-        ctx.canvas.width,
-        ctx.canvas.height
-      )
-      resolve(ctx.canvas)
-    }
-  }
-
-  private getImageRect (image: HTMLImageElement) {
-    const rect = { width: this.options.imageWidth, height: this.options.imageHeight }
-    switch (true) {
-      case rect.width !== 0 && rect.height === 0:
-        rect.height = rect.width * image.height / image.width
-        break
-      case rect.width === 0 && rect.height !== 0:
-        rect.width = rect.height * image.width / image.height
-        break
-      case rect.width === 0 && rect.height === 0:
-        rect.width = image.width
-        rect.height = image.height
-        break
-    }
-    return rect
-  }
-
-  private bindMutationObserve (): void {
-    if (!this.watermarkDom) {
-      return
-    }
-    this.observer = new MutationObserver((mutationsList: MutationRecord[]) => {
-      if (mutationsList.length > 0) {
-        this.destroy()
-        this.create()
-      }
-    })
-    this.observer.observe(this.watermarkDom, {
-      attributes: true, // 子节点的变动（指新增，删除或者更改）
-      childList: true, // 属性的变动
-      subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
-      characterData: true // 节点内容或节点文本的变动。
-    })
-    this.parentObserve = new MutationObserver((mutationsList: MutationRecord[]) => {
-      mutationsList.forEach(item => {
-        if (item?.target === this.watermarkDom || item?.removedNodes?.[0] === this.watermarkDom) {
-          this.destroy()
-          this.create()
-        }
-      })
-    })
-    this.parentObserve.observe(this.parentElement, {
-      attributes: true, // 子节点的变动（指新增，删除或者更改）
-      childList: true, // 属性的变动
-      subtree: true, // 布尔值，表示是否将该观察器应用于该节点的所有后代节点。
-      characterData: true // 节点内容或节点文本的变动。
-    })
-  }
-}

package/tools/terser.js

@@ -1,19 +0,0 @@
-import { minify } from 'terser'
-import { yourFunction } from 'rollup-plugin-your-function'
-
-const terser = () => yourFunction({
-  output: true,
-  name: 'terser',
-  fn: async (source, options) => {
-    return minify(
-      source,
-      {
-        module: (/^esm?$/).test(options.outputOptions.format),
-        toplevel: options.outputOptions.format === 'cjs',
-        sourceMap: true
-      }
-    )
-  }
-})
-
-export default terser

package/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "module": "esnext",
-    "target": "esnext",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "noUnusedLocals": true,
-    "resolveJsonModule": true,
-    "jsx": "preserve",
-    "lib": ["ESNext", "DOM"]
-  },
-  "exclude": ["**/node_modules/**", "**/dist/**"]
-}