may-watermark v1.0.0

水印

下载

git clone git@github.com:freeethy/may-watermark.git

项目运行

yarn install
yarn run build

build 后会打包两个文件到 dist：

• watermark-xxx.min.js (xxx 为 package.json 中的 version)
  这个文件可以直接通过 script 加载，见 /demo/link，访问此文件下的 html 即可观察效果

  使用方式：

    ```javascript
    <script src="./lib/watermark-xxx.min.js"></script>
    <script>
        window.onload = function () {
            window.MayWaterMark.init({
                name: "staff",
                color: "gray",
                auto: false,
                container: document.querySelector('.test')
            });
        }
    </script>
    ```

• watermark.js (xxx 为 package.json 中的 version)
  这个文件是 umd 包，可通过 require 或 import 引入使用。 见 /demo/import，此 demo 项目需要先执行 yarn install，yarn run build命令打包，然后其访问/src/index.html 即可看到效果。

  使用方式：

  import MayWaterMark from "./lib/watermark.js";
  
  MayWaterMark.init({
    name: "may-watermark",
    color: "gray",
    container: document.querySelector(".test")
  });

  如果上述引用后报错 MayWaterMark undefined，在 webpack 解析 js 的 rule 中加上 exclude: path.resolve("src/lib/watermark.js")

开发

开发时需注意，使用 require 和 module.exports 进行导入、导出，否则可能出现打包后调用失败的情况。

有修改源码的话提交代码前先执行 yarn run build

调试（demo 中引用的 watermark 文件需修改成打包后的版本号）

调试 link demo

yarn run start:dev

访问 http://localhost:8080/ ，端口修改为启动服务的端口

调试 import demo

cd demo
cd import
yarn install
yarn run build
yarn run start:dev

访问 http://localhost:8080/ ，端口修改为启动服务的端口

测试

yarn run test

测试框架使用 Jest，配置简单，集成度高。
控制台打印测试报告，会在根目录下生成 coverage 文件，浏览器访问 /coverage/lcov-report/index.html 即可查看测试报告结果。

设计方案

调用方式

按 【项目运行】 章节

api 设计

目前提供以下几个 API

init

初始化水印信息

MayWaterMark.init({
  auto: true,
  name: "staff",
  color: "gray",
  hasAuthority: true
});

备注

1. 如果auto 为 true，则会在接口调用成功后根据hasAuthority(默认为true)调用MayWaterMark.add; auto 为 false 则会自动调用MayWaterMark.add添加水印。
2. 目前只能给一个 container 添加水印。

add

参数：无
根据已有配置生成并添加水印，建议配合 auto:true 使用。

MayWaterMark.add();

addForImg

给图片添加水印，需要每张图片单独处理

MayWaterMark.addForImg({
  url: 'http://xxx.xxx/a/test.jpg'
})

备注：部分参数的默认值为 init 传入的配置值，在 this.config 中。

实现功能

1. 根据传入的配置生成背景水印。
2. 支持通过 script 引入方式，及 umd、import 模式加载。
3. 监听水印节点，只可读不可写，兼容到 IE11

出错处理

• 调用 API 时判断传入的 config 格式，如果格式错误则提示
• 不支持 canvas 的浏览器使用 svg 图片做背景

TODO

以下功能是否需要？

• 不使用 babel 编译的话，字符串模板需改成字符串拼接
• [] 暂未加入各种 lint
• 未加入测试
• 制作成 npm 包，提交到内部 npm 仓库，直接通过 npm 进行安装、更新
• [] 暂不支持多个节点分开添加水印
• 未加入删除水印方法（去掉此功能，不可删除）
• 未支持图片水印
• canvas 和 svg 配置需完善
• [] 监听 DOM 变动的 API MutationObserver 只兼容到 IE11