@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