js-watermarker

2.0.3 • Public • Published

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

方法名 Method 说明 Description 参数 Parameters 返回值 Returns
init 初始化获取实例
Initialize to get instance
targetElement: HTMLElement Watermarker 实例
instance of Watermarker
setOption 设置或更新水印
show wartermark with options specified, also for update
options: Object -
clear 清除水印
remove watermark
- -

options properties

属性名 Property 属性 说明 Note  説明 类型 Type タイプ・型 是否必须  Required  必須 可选值 Values 設定値 默认值 Default デフォルト値
content 水印文字内容 String / Array Required
targetElement
(removed in v2)
要加水印的对象元素 null / HTMLElement Optional document.body
textStyle 水印文字的相关属性 Object Optional
imageStyle 水印图片的相关属性 Object Optional

textStyle properties

属性名 Property 属性 说明 Note  説明 类型 Type タイプ・型 是否必须  Required  必須 可选值 Values 設定値 默认值 Default デフォルト値
left 水印文字的起始横坐标 Integer Optional 20
top 水印文字的起始纵坐标
当文字倾斜致显示切字时适当增大该值
Integer Optional 20
color 水印文字的颜色
当颜色使用rgba时已含透明度故无需单独的透明度设置(默认为 1),如果同时设置将同时起作用
String Optional rgba(150, 150, 150, .15)
alpha 单独设置的透明
color使用了纯色,可单独设置该值控制透明度
Float Optional 1
align 文字排版 String Optional left/right/center left
fontFamily 字体 String Optional "PingFang SC","Lantinghei SC","Microsoft YaHei",arial,"MS Gothic","\5b8b\4f53",sans-serif,tahoma
fontSize 字号 Integer Optional 16
rotate 文字倾斜 Integer Optional 0
lineHeight 多行文本时用于累加的行高 Integer Optional 25

imageStyle properties

属性名 Property 属性 说明 Note  説明 类型 Type タイプ・型 是否必须  Required  必須 可选值 Values 設定値 默认值 Default デフォルト値
width 水印图片宽度 Integer Optional 200
height 水印图片高度 Integer Optional 200
position 水印图片排版 String Optional "x y" (x y:left/top/center) "left top"
repeat 水印图片重复 String Optional repeat / no-repeat repeat

功能简介(特色) | 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)

Package Sidebar

Install

npm i js-watermarker

Weekly Downloads

2

Version

2.0.3

License

MIT

Unpacked Size

49.6 kB

Total Files

12

Last publish

Collaborators

  • maonianyou
  • xiukun