# 水印组件
# 什么是水印组件
水印是指在系统页面中添加的半透明标识或图案，用于防止内容被盗用或篡改，并标明版权信息或作者身份。
标准产品提供了通用的水印设置页面，允许设置哪些模块需要水印，详细配置位置：系统管理员-安全管理-数据保护-水印设置。
水印设置代码位置：\ctp-common\src\main\webapp\WEB-INF\jsp\common\waterMark\waterMarkSetting.jsp
如果项目上进行了新页面的开发，需要添加水印，可以参考本手册自行加上水印组件。
# PC添加水印
（1）在JSP页面中引入水印组件Javascript文件：<script src="${path}/common/waterMark/js/waterMark.js${ctp:resSuffix()}"></script>
（2）调用function addWaterMark(xxx)执行水印设置操作
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html class="over_hidden h100b">
<head>
<%@include file="/WEB-INF/jsp/common/common_header.jsp"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="renderer" content="webkit">
<title>${ctp:i18n("文件标题") }</title>
<link rel="stylesheet" href="${path}/apps_res/{module}/css/xxx.css${ctp:resSuffix()}">
</head>
<body class="over_hidden h100b">
</body>
<%@include file="/WEB-INF/jsp/common/common_footer.jsp"%>
<script src="${path}/common/waterMark/js/waterMark.js${ctp:resSuffix()}"></script>
<script type="text/javascript">
$(document).ready(function(){
addWaterMark({"appType": "addressbook","isMobile":false,"imgInfo":true},function (result) {
if(result.show && result.img){ // result.show = true表示开启了水印
var watermarkImg = result.img;
if(watermarkImg != ''){
// 设置水印操作，其中$('body')可以根据需求来控制，比如只需要指定div区域则找到对应div dom设置即可
$('body').css("background-image","url(\"" + watermarkImg +"\")");
}
}
});
});
</script>
</html>
addWaterMark相关参数注释如下：
/**
* 水印生成方法
* @param params 配置参数 格式如下
* {
* "appType": "news", 必有，表示当前水印属于什么模块，该模块与后台水印设置对应，用来判断当前模块是否开启了水印，目前可选的值为 col form imail edoc report news bul addressbook doc salary zx officePreview paperless bbs print
* "isMobile":false, 选填，默认为false,与appType组合，取pc还是移动端的水印启停状态
* "imgInfo":true 选填，默认为true,是否生成base64的水印图片
* }
* @param callbackFun 回调方法，需要接收一个参数 接收数据 格式如下
* {
* "show":false, 是否显示水印
* "print":false, 是否显示打印水印
* "img":"", 水印base64图片字符串,只有打印水印时，为空
* "printImg":"", 打印用水印base64图片字符串，方便区分用
* "info":"" 额外信息 出错信息存于此
* "name" : true, 是否显示名称
* "acc" : true, 是否显示单位名称
* "time" : true, 是否显示时间
* };
* @param isSync 同步还是异步，默认异步
*/
function addWaterMark(params, callbackFun, isSync)
# 移动端添加水印
1、先在当前模块注册JSSDK，以获取水印配置信息：
getWaterMarkInfo : function(appType, isMobile, imgInfo, _params, options) {
return SeeyonApi.Rest.get('waterMark/waterMarkInfo/' + appType + '/' + isMobile + "/" + imgInfo + "", _params, '', cmp.extend({}, options))
}
参照源码示例：\mplus-front\src\apps\v5\vreport\js\vreport-jssdk.js
2、H5页面引入cmp-watermark.js：<script type="text/javascript" src="${data:dependencies.cmp}/js/cmp-watermark.js${data:buildversion}"></script>
参照源码示例：\mplus-front\src\apps\v5\vreport\html\fileReportView.html
3、在H5页面底部或在js中执行水印渲染操作：
<!DOCTYPE html>
<html>
<head>
忽略若干代码
<title></title>
<style id="styleForWaterMark">
</style>
</head>
<body class="cmp-fullscreen cmp-p-bg">
忽略若干代码
<script type="text/javascript" src="${data:dependencies.cmp}/js/cmp-watermark.js${data:buildversion}"></script>
<script type="text/javascript">
cmp.ready(function(){
// 执行水印渲染
$s.Vreport.getWaterMarkInfo("report", true, false, null, { // 通过jssdk调用后端获取当前模块是否支持水印，返回水印信息
success: function(rs){
if (rs && rs.show) { // rs.show = true 表示支持水印
var imgUrl = cmp.watermark(rs.mobileWaterMarkParams).toBase64URL();
var tempStyle = "" +
".waterMark::after {\n" +
" content:\"\";\n" +
" position: absolute;\n" +
" top: 0;\n" +
" left: 0;\n" +
" right: 0;\n" +
" bottom: 0;\n" +
" background-image: url(\""+ imgUrl +"\");\n" +
" background-size: 200px 100px;\n" +
" background-repeat: repeat;\n" +
" pointer-events: none;\n" +
"}";
var styleTag = document.getElementById("styleForWaterMark");
styleTag.innerHTML = tempStyle;
// 页面注入waterMark的css样式
document.querySelector('.cmp-content').classList.add("waterMark");
}
}
});
});
</script>
</body>
</html>
参照源码示例：\mplus-front\src\apps\v5\vreport\js\fileReportView.js => $s.Vreport.getWaterMarkInfo
4、以上开发完成后无法直接使用，需要使用自动构建系统编译出结果，或使用S3JS工具编译出最终文件测试。
← 数据国际化 Form校验提交组件 →
