水印

使用示例

browser: window.Watermark

import { getWatermark, setWatermark } from '@jonge/watermark';

// 通过方法获取{生成的图片，建议图片大小}
const content = '水印测试1234';
const { backgroundImage, backgroundSize, dataUrl } = getWatermark({ content });
// backgroundImage: url(dataUrl)
// backgroundSize: 10px 20px
// dataUrl: "data:image/png;base64;xxxxxxxx"

// 指定挂载容器，设置水印，并开启防篡改
setWatermark({
  content: 'watermark 1234 水印',
  mountEl: this.refs.el as HTMLElement,
  marginLeft: 120,
  marginTop: 200,
  antiHack: true,
  styles: {
    fontWeight: '200',
    backgroundColor: 'lightyellow'
  },
});

API

• function getWatermark(config: WatermarkConfig) {}
• function getWatermark(config: DomWatermarkConfig) {}

WatermarkConfig 属性

属性名	类型	说明	是否必填	默认值
type	string	水印类型：svg，canvas	N	canvas
content	string	水印内容	Y
rotate	number	旋转角度（顺时针正，逆时针负）	N	-30
marginTop	number	垂直间距	N	48
marginLeft	number	水平间距	N	60
color	string	文字颜色	N	rgba(191, 195, 199, 0.3)
fontSize	number	文字大小	N	14
fontFamily	string	字体	N	"PingFang SC,Microsoft YaHei,sans-serif"

DomWatermarkConfig 属性

除 WatermarkConfig 中的属性外，还有

属性名	类型	说明	是否必填	默认值
styles	StyleSheet 对象	自定义水印字体样式，水印容器 zIndex、背景等	N
mountEl	HTMLElement	水印挂载容器	N	document.body

开发者

# 启动示例
yarn storybook