1.0.1 • Published 4 years ago
@jonge/watermark v1.0.1
水印
使用示例
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