水印

生成base64格式的水印图片，默认以屏幕宽为宽度，Math.max(1500, screen.height)为高度，宽高属性可通过传参进行配置。

使用

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

安装：tnpm i @ali/h5-watermark -S。

浏览器端（有window对象）

• generateWatermark方法形参如下：

  type showType = 'contactList' | 'contactDetail' | 'chat' | 'h5Page' | 'meetingDetail'
  
  interface Property {
    width: number;
    height: number;
  }
  
  function generateWatermark(
    config:object, // config参数是通过接口获取的服务端配置
    onlyThePage:showType='h5Page',
    containerProperty:Property|number=Math.max(1500, screen.height)
  ) {
    // 省略
  };

• 调用Demo如下

  import { generateWatermark } from '@ali/h5-watermark';
  
  var base64Url = generateWatermark({
    watermark: {
        watermarkStatus: 1,
        targetPages: [
            {"name":"contactList","value":"1"},
            {"name":"contactDetail","value":"1"},
            {"name":"chat","value":"1"},
            // {"name":"h5Page","value":"1"},
            {"name":"meetingDetail","value":"1"}
        ],
        contentType: [1, 2, 0],
        contentCustom: "一二三四五六七八九十一二三四五一二三四五六七八九十",
        watermarkShowDensity: 1,
        fontSize: 0,
        fontColor: 2,
        fontDiaphaneity: "10",
        fontStyle: 1,
        userName: "命名命名",
        account: "234435660"
    }
  }, 'meetingDetail', 400);

支付宝小程序组件Rax（无window对象）

👉RAX文档

调用Demo如下

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(() => {
      // generateWatermark方法的可选参数为'h5Page'或'meetingDetail'，默认为'h5Page'
      this.refWatermark.current.generateWatermark('h5Page', 700).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} />
      </View>
    );
  }
}

调试

• 浏览器端：npm run dev；
• 小程序：由于该项目为小程序组件，不能单独启动，需以依赖包的形式执行于小程序应用。可通过npm link或yarn link做本地调试。

发布

# build
npm run build
# 发布
tnpm publish