preview.html 5.49 KB
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>水印效果预览</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="/cloudstore/resource/pc/com/v1/index.min.css">
    <link rel="stylesheet" type="text/css" href="/cloudstore/resource/pc/com/v1/ecCom.min.css">
    <script type="text/javascript" src="/cloudstore/resource/pc/jquery/jquery-1.8.3.min.js"></script>
    <style>html,body,#container{ height: 100%;overflow: hidden}</style>
    <script>
      // 根据环境加载配置文件
      var curHost = window.location.hostname;
      var hostArr = [
        '192.168.7.224',
        '192.168.1.73',
        '192.168.1.71'
      ];
      if (hostArr.indexOf(curHost) === -1) {
        document.writeln('<script src="/spa/coms/ssoConfig/config.js"' + '>' + '<' + '/' + 'script>');
      } else {
        document.writeln('<script src="/spa/coms/ssoConfig/config-dev.js"' + '>' + '<' + '/' + 'script>');
      }
    </script>
  </head>

  <body>
    <div id="container">
      <h1 style="text-align: center">水印预览效果</h1>
      <p>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
      <p>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
      <p>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
      <p>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
      <p>水印预览效果水印预览效果水印预览效果水印预览效果水印预览效果</p>
    </div>
    <script type="text/javascript" src="/cloudstore/resource/pc/polyfill/polyfill.min.js"></script>
    <!-- Polyfills -->
    <!--[if lt IE 10]>
    <script type="text/javascript" src="/cloudstore/resource/pc/shim/shim.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/cloudstore/resource/pc/react16/react.production.min.js"></script>
    <script type="text/javascript" src="/cloudstore/resource/pc/react16/react-dom.production.min.js"></script>
    <script type="text/javascript" src="/cloudstore/resource/pc/react16/prop-types.min.js"></script>
    <script type="text/javascript" src="/cloudstore/resource/pc/react16/create-react-class.min.js"></script>
    <script>
      React.PropTypes = PropTypes;
      React.createClass = createReactClass;
    </script>
    <!-- 全局依赖 -->
    <script type="text/javascript" src="/cloudstore/resource/pc/promise/promise.min.js"></script>
    <script type="text/javascript" src="/cloudstore/resource/pc/fetch/fetch.min.js"></script>
    <!-- 组件库 -->
    <script type="text/javascript" src="/cloudstore/resource/pc/com/v1/index.min.js"></script>
    <script type="text/javascript" src="/cloudstore/resource/pc/com/v1/ecCom.min.js"></script>
    <script>
      function parseURL(url) {
        var url = url.split('?')[1];
        var para = url.split('&');
        var len = para.length;
        var res = {};
        var arr = [];
        for(var i = 0; i < len; i ++){
          arr = para[i].split('=');
          res[arr[0]] = decodeURIComponent(arr[1]);
        }
        return res;
      }
      function loadWatermark(opt) {
        // 添加定时器,覆盖系统设置的水印
        setTimeout(function() {ecCom.WeaTools.watermark(opt || {});}, 200);
      }
      var options = {
        text: '',
        fontStyle: 'font-size:14px;color:#000;',
        src: '',
        width: 200,
        height: 150,
        rotate: -15,
        alpha: 0.15,
        interval: 2000,
        intervalCheck: true,
        clickCheck: true
      };
      var tmpOptions = parseURL(window.location.href);
      var text = tmpOptions.wmcontent || '';
      if (tmpOptions.watermarktype == '1') {
        ecCom.WeaTools.callApi('/api/doc/watermark/convertwmtextparams', 'POST', { paramsContent: tmpOptions.wmcontent }).then(function(res) {
          text = res.paramsContent;
          if (tmpOptions.document) {
            options.fontStyle = "font-family:" + (tmpOptions.familyname || '微软雅黑')
            + ";font-size:" + (tmpOptions.fontsize || 14)
            + "px;color:" + (tmpOptions.color || '#000')
            + ";text-align:" + (tmpOptions.align || 'left');
            let lines = '';
            // 处理多行文本的换行
            text.split('\n').forEach(function(line) { lines += "<p style=" + options.fontStyle + ">" + line + '</p>'; });
            text = lines;
          }
          options.text = text;
          loadWatermark(options);
        });
      }
      options.text = text;
      options.width = tmpOptions.wmwidth;
      options.height = tmpOptions.wmheight;
      options.src = tmpOptions.watermarktype == '2' ? '/weaver/weaver.file.FileDownload?fileid=' + tmpOptions.imageid : '';
      options.rotate = -Number(tmpOptions.rotate);
      options.alpha = Number(tmpOptions.opacity) / 100;
      loadWatermark(options);
    </script>
  </body>
</html>