@pagoda-tools/image-watermark

针对 watermarkjs 工具，扩展文字水印平铺功能

用于在浏览器中为图像添加水印的功能库。使用 ES6 编写，并通过 Babel 提供给当前的浏览器。支持 URL、文件输入、Blob 和页面图像。

经测试的浏览器

任何支持文件和文件读取器的浏览器都应该可以工作。以下浏览器已经过测试并正常工作：

• IE10 (Windows 7)
• Chrome 42 (OS X 10.10.3)
• Firefox 38 (OS X 10.10.3)
• Safari 8.0.6 (OS X 10.10.3)
• Opera 29.0 (OS X 10.10.3)

请随时更新此列表或通过拉取请求提交特定浏览器的修复程序。

安装

@pagoda-tools/image-watermark可通过npm和yarn获得：

# install via npm
npm install @pagoda-tools/image-watermark -S

# install via yarn
yarn add @pagoda-tools/image-watermark -S

用法

引入

// 本地路径水印
import { watermark, textExpand } from '@pagoda-tools/image-watermark';

// 兼容
import watermark, {
  textRepeat,
  textCustomizeCenter,
} from '@pagoda-tools/image-watermark';

加载一个 url 和 文件对象

const file = document.querySelector('input[type=file]').files[0];

// 加载一个 url 和 文件对象
watermark([file])
  .image(textExpand.repeat({ text: '示范例子', degree: 45 })) // 兼容 textRepeat
  .then((img) => document.getElementById('container').appendChild(img));

// 来自远程源的水印
const options = {
  init(img) {
    img.crossOrigin = 'anonymous';
  },
};

watermark(['https://host.com/photo.jpg'], options)
  .image(textExpand.repeat({ text: '示范例子', degree: 45 })) // 兼容 textRepeat
  .then((img) => document.getElementById('container').appendChild(img));

生成Blob或File对象上传

watermark([file])
  .blob(textExpand.repeat({ text: '示范例子', degree: 45 }))
  .then((blob) => {
    // 一、上传需要的 Blob 对象。
    console.log(blob); // 可用于 cos 上传
    // 二、上传所需的 File 对象
    const file = new File([blob], fileName, { type: mimeType });
  });

textRepeat（平铺水印）与textCustomizeCenter（文字居中-可设置角度）

引入

import { watermark, textExpand } from '@pagoda-tools/image-watermark';

参数说明

| 参数名 | 参数描述 | 类型 | 是否必填 | 版本 | | --- | --- | --- | --- | --- | | text | 水印文字 | string | 是 | | font | 字体，只支持浏览器字体，缺省值为microsoft yahei | string | 否 | | | fontSize | 字体大小，缺省值为 20 | number | 否 | | | degree | 文字水印的旋转角度设置，取值范围为 0 - 360，缺省值为 0) | number | 否 | | | dx | 水平（横轴）边距，单位为像素，缺省值为 20 | number | 否 | | | dy | 垂直（纵轴）边距，单位为像素，缺省值为 20 | number | 否 | | | fill | 字体颜色，缺省为灰色(#3D3D3D)，需设置为十六进制 RGB 格式 | string | 否 | | | strokeStyle | 描边颜色，缺省为灰色(#FFF)，需设置为十六进制 RGB 格式 | string | 否 | ^1.0.4 | | dissolve | 文字透明度，取值 1 - 100 ，默认 40（40%不透明度） | number | 否 | | | repetition | 重复方向，默认：repeat 该模式在水平和垂直方向重复。 textRepeat 方法有生效 | repeat、repeat-x 、repeat-y 、no-repeat; | 否 | |

Method

opts：查看 - 参数说明

textExpand 扩展方法^1.0.4

textExpand.repeat(opts); // 平铺
textExpand.center(opts); // 居中
textExpand.lowerRight(opts); // 右下角
textExpand.lowerLeft(opts); // 左下角
textExpand.upperRight(opts); // 右上角
textExpand.upperLeft(opts); // 左上角
textExpand.upperCenter(opts); // 正上方
textExpand.lowerCenter(opts); // 正下方
textExpand.leftCenter(opts); // 正左方
textExpand.rightCenter(opts); // 正右方

Examples

这些示例演示如何使用水印图像和文本，以及将带水印的图像上传到腾讯云 COS 的演示。

• watermarkjs 官网
• watermarkjs npm