@vfa25/h5-watermark v1.0.29

水印

生成base64格式的水印图片。

使用

暴露绘制水印图片的generateWatermark方法，并兼容支付宝小程序。

• 浏览器端：

tnpm i @ali/h5-watermark -S

import { generateWatermark } from '@ali/h5-watermark';
type showType = 'h5Page' | 'meetingDetail'
console.log(generateWatermark(config:object, onlyThePage?:showType='h5Page'));

• 支付宝小程序(rax)

tnpm i @ali/h5-watermark -S

import { Component, createRef } from 'rax';
import View from 'rax-view';
import Watermark from '@ali/h5-watermark';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.refWatermark = createRef();
    this.state = {
      bg: 'background: url("")',
      config: {
        watermark: {
          watermarkStatus: 1,
          targetPages: [
            {'name':'contactList','value':'1'},
            {'name':'contactDetail','value':'1'},
            {'name':'chat','value':'1'},
            {'name':'meetingDetail','value':'1'}
          ],
          contentType: [1, 2, 0],
          contentCustom: 'IOS-H5',
          watermarkShowDensity: 0,
          fontSize: 0,
          fontColor: 1,
          fontDiaphaneity: '90',
          fontStyle: 1,
          userName: '测试04',
          account: '234435660'
        }
      }
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.refWatermark.current.generateWatermark().then((res)=> {
        console.log(res);
        this.setState({
          bg: 'background: url(' + res + ')'
        });
      });
    }, 0);
  }

  render() {
    const {config, bg} = this.state;
    return (
      <View className="home" style={bg}>
        <Watermark config={config} ref={this.refWatermark} pageName="h5Page" />
      </View>
    );
  }
}