js-watermarker v2.0.3

js-watermarker

👏 版本更新 Version Up👏

v1.x 仅支持设一个水印（可以更新水印的设置）
v1.x only one watermark can be set (can update setting options)
v1.x 1 つだけウォーターマーク設定できる

v2.x 支持创建多个实例，分别给页面多多个元素设置不同水印
v2.x support multi-instance to set different wartermarks for different elements
v2.x 複数インスタンスの作成で、複数のウォーターマークを追加できる

v2.0.1 支持设置图片水印 v2.0.1 watermark for image v2.0.1 イメージにウォーターマーク

安装 | Install | インストール

npm i js-watermarker
# or
yarn add js-watermarker

使用 | Usage | 使い方

v1.x

import setWatermark from "js-watermarker";

setWatermark({
  content: "@码路工人",
});

v2.x

key code:

import watermarker from "js-watermarker";

// onMounted
marker = watermarker.init(watermarkRef);
marker.setOption(options);

In Vue3 project:

<template>
  <div ref="watermarkRef">
    <!-- maybe have some contents here -->
  </div>
</template>

<script>
import { onMounted } from 'vue';
import watermarker from "js-watermarker";

export default {
  name: "ComponentName",
  setup() {
    let marker = null;
    const states = reactive({
      watermarkRef: null,

      // could be no-reactive
      options: {
        // content could be String or Array
        content: ['Hello World', 'Wartermark Demo'],
        // textStyle object
        textStyle: {
          left: 20,
          top: 100,
          rotate: -10,
          align: "left",
          fontSize: 16,
          lineHeight: 25,
          color: "#fee0b9",
          alpha: 1,
        },
        // imageStyle object
        imageStyle: {
          width: 400,
          height: 300,
          position: "left top",
          repeat: "repeat",
        },
      },
    });
  },
  onMounted(() => {
    marker = watermarker.init(states.watermarkRef);

    marker.setOption(states.options);
  })
};
</script>

配置对象 | API | 設定項目明細

详细设置项可参考 Demo 页面中生成的配置 JSON

For more details, see JSON generated in Demo page.

設定項目明細は下記 オンライン サンプル ページ 参照:
Demo

Methods

options properties

textStyle properties

imageStyle properties

功能简介(特色) | Feature | 機能概要(特色)

添加水印
Add watermark to page/element
画面要素に ウォーターマーク を追加

• 可配置化，基本能满足多种样式需求
  • 可指定为页面元素添加水印
  • 默认添加到 body，也可指定其它页面元素（如图片）
  • 可指定文字内容，支持换行
  • 支持设置水印颜色、位置、倾斜角度及是否重复水印等
• 可实时动态修改水印配置
• 水印防删除
• 可在线(示例地址)查看调整效果
• v2.x 支持给多个元素分别设置不同水印

纯 js 实现，无任何其它依赖

查看 Demo | Example | サンプル

本地启动 | To develop | 起動

npm run dev
# or
yarn dev

# or 编译后启动 | start after build | ビルドしてからプレビューで起動
npm run preview
# or
yarn preview

Note:
给跨域图片加水印文字需要资源服务器侧设Access-Control-Allow-Origin，同时img标签设crossorigin="anonymous"

在线示例 | demo online | オンライン Demo

codermonkie.github.io/js-watermarker

coder-monkey.gitee.io/js-watermarker

版权 | License | ライセンス

MIT

TODO
x refactor and multi-instance support in v2.0 (issue#2)
query selector support for init method in v2.0 (issue#3)