便宜云服务器租用微搭低代码应用添加水印示例-实践教程-文档中心-便宜云服务器租用

方案思路
在每个应用生命周期中添加水印代码。
注意事项 
只在当前应用生效，切换多个应用刷新后失效；切换到系统设置刷新后失效。
多个应用需要启用的话，要在每个应用生命周期中配置，并要注意处理重复添加问题。
效果
?
?
?
代码示例
export default {
  onAppLaunch(launchOpts) {
    (function () {
        function __canvasWM({
          container = document.body,
          width = '300px',
          height = '200px',
          textAlign = 'center',
          textBaseline = 'middle',
          font = '20px Microsoft Yahei',
          fillStyle = 'rgba(184, 184, 184, 0.6)',
          content = '水印',
          rotate = '45',
          zIndex = 10000,
        } = {}) {
          const args = arguments[0];
          const canvas = document.createElement('canvas');
?
          canvas.setAttribute('width', width);
          canvas.setAttribute('height', height);
          const ctx = canvas.getContext('2d');
?
          ctx.textAlign = textAlign;
          ctx.textBaseline = textBaseline;
          ctx.font = font;
          ctx.fillStyle = fillStyle;
          ctx.rotate((Math.PI / 180) * rotate);
          ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
?
          const base64Url = canvas.toDataURL();
          const __wm = document.querySelector('.__wm');
?
          const watermarkDiv = __wm || document.createElement('div');
          const styleStr = `
                  position:fixed;
                  top:0;
                  left:0;
                  bottom:0;
                  right:0;
                  width:100%;
                  height:100%;
                  z-index:${zIndex};
                  pointer-events:none;
                  background-repeat:repeat;
                  background-image:url(?document/product/1301/83129/&)`;
?
          watermarkDiv.setAttribute('style', styleStr);
          watermarkDiv.classList.add('__wm');
?
          if (!__wm) {
            container.insertBefore(watermarkDiv, container.firstChild);
          }
?
          if (typeof module != 'undefined' && module.exports) {
            //CMD
            module.exports = __canvasWM;
          } else if (typeof define == 'function' && define.amd) {
            // AMD
            define(function () {
              return __canvasWM;
            });
          } else {
            window.__canvasWM = __canvasWM;
          }
        }
?
        // 调用
        __canvasWM({
          rotate: 30,
          content: $app.auth.currentUser.name,
        });
      })();
  },
  onAppShow(appShowOpts) {
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}
?
?
?
应用添加水印示例

本页目录：

方案思路

注意事项

效果

代码示例
