watermark-js-plus 0.0.1 → 0.0.3

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;
-  parentElement: HTMLElement;
-  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,288 +0,0 @@
-import { convertImage, convertSVGToImage, createCustomContentSVG, getMultiLineData } from './utils'
-import {
-  ContentTypeEnum,
-  CreateWatermarkModeEnum,
-  TextAlignEnum,
-  TextBaselineEnum,
-  WatermarkDom,
-  WatermarkOptions
-} from './types'
-
-export default class Watermark {
-  options: WatermarkOptions
-  observer?: MutationObserver
-  parentObserve?: MutationObserver
-  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,
-      parentElement: document.body,
-      onSuccess: () => {},
-      onBeforeDestroy: () => {},
-      onDestroyed: () => {}
-    }, props)
-    if (this.options?.rotate) {
-      this.options.rotate = (360 - this.options.rotate % 360) * (Math.PI / 180)
-    }
-  }
-
-  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
-  }
-
-  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};
-    `
-    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.options.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.options.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.options.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/**"]
-}