效果
procedure TMainForm.Set_watermark(xparent: TWinControl; s: string); var hf:TUniHTMLFrame; begin hf:= TUniHTMLFrame.Create(xparent); hf.Parent:= xparent; with hf do begin Height:=0; Width:=0; HTML.Clear; HTML.Add('<div id="watermark"> </div><script>' // 定义水印函数 +'function addWatermark({' +'container = document.body,' // 水印添加到的容器,默认为 body +'width = "0px",' // 水印 canvas 的宽度 +'height = "0px", '// 水印 canvas 的高度 +'textAlign = "center", '// 水印文字的对齐方式 +'textBaseline = "middle",' // 水印文字的基线 +'font = "16px Microsoft Yahei",' // 水印文字的字体 +'fillStyle = "rgba(90, 90, 90, 0.6)",' // 水印文字的填充样式 +'content = "", '// 水印文字的内容 +'content2 = "",' // 水印文字的内容 +'rotate = "15", '// 水印文字的旋转角度 +'zIndex = 10000,' // 水印的 z-index 值 +'}) { ' // 生成水印 canvas +'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) / 5, parseFloat(height) / 30); ' +'ctx.fillText(content2, parseFloat(width) / 2, parseFloat(height) / 2);' // 将 canvas 转换为 base64 URL + '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};' +' background-repeat: repeat;' +' pointer-events: none;' +' background-image: url(''${base64Url}'')' +'`; ' +'watermarkDiv.setAttribute("style", styleStr);' +'watermarkDiv.classList.add("__wm");' //则创建一个 div 并设置样式和类名 +'if (!__wm) {' +' container.style.position = ''relative'';' +'container.insertBefore(watermarkDiv, container.firstChild);' +'} ' // 监听容器变化,当容器发生变化时重新调用 addWatermark 函数 // +'const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;' // +' if (MutationObserver) {' // +' let mo = new MutationObserver(function () { ' // +' const __wm = document.querySelector(''.__wm''); ' // // 只在__wm元素变动才重新调用__canvasWM // +' if ((__wm && __wm.getAttribute(''style'') !== styleStr) || !__wm) { ' // // 避免一直触发 // +'mo.disconnect();' // +'mo = null; ' //// +'console.log(''1''); ' // +'addWatermark({' // +' container: document.getElementById("watermark"),' // +' width: "300px", ' // +' height: "150px", ' // +' textAlign: "center", ' // +' textBaseline: "middle",' // +' font: "16px Microsoft Yahei", ' // +' fillStyle: "rgba(90, 90, 90, 0.3 )",' // +' content: "",' // +' content2: "", ' // +' rotate: "15", ' // +' zIndex: 10000, ' // +' });' // +'} ' // +'});' // // +'mo.observe(container, { ' // +' attributes: true,' // +' subtree: true,' // +'childList: true ' // +' });' // + ' } ' + ' } ' // 调用 addWatermark 函数添加水印 +'addWatermark({ ' +' container: document.getElementById("watermark"), ' +' width: "200px",' +' height: "258px",' +' textAlign: "center", ' +' textBaseline: "middle", ' +' font: "16px Microsoft Yahei", ' +' fillStyle: "rgba(90, 90, 90, 0.3 )", ' +' content: "'+s+'", ' +' content2: "'+ FormatDateTime('YYMMdd HH:MM', Now)+'", ' +' rotate: "40", ' +' zIndex: 10000, ' +' });' +'</script>'); // Refresh; end; end;
调用
procedure TMainForm.UniFormShow(Sender: TObject); begin Set_watermark(MainForm, 'asdf涂dsa磊'); end;标签:__,canvas,const,unigui,效果,wm,印纹,水印,90 From: https://www.cnblogs.com/tulater/p/18544157